1(function ($) { 2 3 let infoWindows = []; 4 5 /** 6 * initMap 7 * 8 * Renders a Google Map onto the selected jQuery element 9 * 10 * @date 22/10/19 11 * @since 5.8.6 12 * 13 * @param jQuery $el The jQuery element. 14 * @return object The map instance. 15 */ 16 function initMap( $el ) { 17 18 // Find marker elements within map. 19 var $markers = $el.find('.marker'); 20 21 // Create gerenic map. 22 var mapArgs = { 23 zoom : $el.data('zoom') || 16, 24 mapTypeId : google.maps.MapTypeId.ROADMAP, 25 styles : [ 26 { 27 "elementType": "geometry", 28 "stylers": [ 29 { 30 "color": "#f5f5f5" 31 } 32 ] 33 }, 34 { 35 "elementType": "labels.icon", 36 "stylers": [ 37 { 38 "visibility": "off" 39 } 40 ] 41 }, 42 { 43 "elementType": "labels.text.fill", 44 "stylers": [ 45 { 46 "color": "#616161" 47 } 48 ] 49 }, 50 { 51 "elementType": "labels.text.stroke", 52 "stylers": [ 53 { 54 "color": "#f5f5f5" 55 } 56 ] 57 }, 58 { 59 "featureType": "administrative.land_parcel", 60 "elementType": "labels.text.fill", 61 "stylers": [ 62 { 63 "color": "#bdbdbd" 64 } 65 ] 66 }, 67 { 68 "featureType": "poi", 69 "elementType": "geometry", 70 "stylers": [ 71 { 72 "color": "#eeeeee" 73 } 74 ] 75 }, 76 { 77 "featureType": "poi", 78 "elementType": "labels.text.fill", 79 "stylers": [ 80 { 81 "color": "#757575" 82 } 83 ] 84 }, 85 { 86 "featureType": "poi.park", 87 "elementType": "geometry", 88 "stylers": [ 89 { 90 "color": "#e5e5e5" 91 } 92 ] 93 }, 94 { 95 "featureType": "poi.park", 96 "elementType": "labels.text.fill", 97 "stylers": [ 98 { 99 "color": "#9e9e9e" 100 } 101 ] 102 }, 103 { 104 "featureType": "road", 105 "elementType": "geometry", 106 "stylers": [ 107 { 108 "color": "#ffffff" 109 } 110 ] 111 }, 112 { 113 "featureType": "road.arterial", 114 "elementType": "labels.text.fill", 115 "stylers": [ 116 { 117 "color": "#757575" 118 } 119 ] 120 }, 121 { 122 "featureType": "road.highway", 123 "elementType": "geometry", 124 "stylers": [ 125 { 126 "color": "#dadada" 127 } 128 ] 129 }, 130 { 131 "featureType": "road.highway", 132 "elementType": "labels.text.fill", 133 "stylers": [ 134 { 135 "color": "#616161" 136 } 137 ] 138 }, 139 { 140 "featureType": "road.local", 141 "elementType": "labels.text.fill", 142 "stylers": [ 143 { 144 "color": "#9e9e9e" 145 } 146 ] 147 }, 148 { 149 "featureType": "transit.line", 150 "elementType": "geometry", 151 "stylers": [ 152 { 153 "color": "#e5e5e5" 154 } 155 ] 156 }, 157 { 158 "featureType": "transit.station", 159 "elementType": "geometry", 160 "stylers": [ 161 { 162 "color": "#eeeeee" 163 } 164 ] 165 }, 166 { 167 "featureType": "water", 168 "elementType": "geometry", 169 "stylers": [ 170 { 171 "color": "#c9c9c9" 172 } 173 ] 174 }, 175 { 176 "featureType": "water", 177 "elementType": "labels.text.fill", 178 "stylers": [ 179 { 180 "color": "#9e9e9e" 181 } 182 ] 183 } 184 ] 185 }; 186 var map = new google.maps.Map( $el[0], mapArgs ); 187 188 // Add markers. 189 map.markers = []; 190 $markers.each(function(){ 191 initMarker( $(this), map ); 192 }); 193 194 // Center map based on markers. 195 centerMap( map ); 196 197 // Return map instance. 198 return map; 199 } 200 201 /** 202 * initMarker 203 * 204 * Creates a marker for the given jQuery element and map. 205 * 206 * @date 22/10/19 207 * @since 5.8.6 208 * 209 * @param jQuery $el The jQuery element. 210 * @param object The map instance. 211 * @return object The marker instance. 212 */ 213 function initMarker( $marker, map ) { 214 215 // Get position from marker. 216 var lat = $marker.data('lat'); 217 var lng = $marker.data('lng'); 218 var latLng = { 219 lat: parseFloat( lat ), 220 lng: parseFloat( lng ) 221 }; 222 223 var iconUrl = { 224 url: $marker.attr('data-icon'), 225 size: new google.maps.Size(36, 50), 226 origin: new google.maps.Point(0, 0), 227 anchor: new google.maps.Point(0, 50), 228 } 229 230 var marker = new google.maps.Marker({ 231 position : latLng, 232 map: map, 233 icon: iconUrl, 234 shouldFocus: true, 235 }); 236 237 // Append to reference for later use. 238 map.markers.push( marker ); 239 240 // If marker contains HTML, add it to an infoWindow. 241 if( $marker.html() ){ 242
243 // Create info window. 244 let infowindow = new google.maps.InfoWindow({ 245 content: $marker.html() 246 }); 247 248 // gather all infowindows 249 infoWindows.push(infowindow); 250 251 // Show info window when marker is clicked. 252 google.maps.event.addListener(marker, 'click', function() { 253 254 //close all 255 for (var i = 0; i < infoWindows.length; i++) { 256 infoWindows[i].close(); 257 } 258 259 infowindow.open( map, marker ); 260 }); 261 262 } 263 } 264 265 /** 266 * centerMap 267 * 268 * Centers the map showing all markers in view. 269 * 270 * @date 22/10/19 271 * @since 5.8.6 272 * 273 * @param object The map instance. 274 * @return void 275 */ 276 function centerMap( map ) { 277 278 // Create map boundaries from all map markers. 279 var bounds = new google.maps.LatLngBounds(); 280 map.markers.forEach(function( marker ){ 281 bounds.extend({ 282 lat: marker.position.lat(), 283 lng: marker.position.lng() 284 }); 285 }); 286 287 // Case: Single marker. 288 if( map.markers.length == 1 ){ 289 map.setCenter( bounds.getCenter() ); 290 291 // Case: Multiple markers. 292 } else{ 293 map.fitBounds( bounds ); 294 } 295 } 296 297 // Render maps on page load. 298 $(document).ready(function(){ 299 $('.c-static-map__render').each(function(){ 300 var map = initMap( $(this) ); 301 }); 302 }); 303 304})(jQuery);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.