https://www.niauk.org/wp-content/themes/rouge-wp-start-theme/js/google-maps.js

1/* Google Maps JS */
2(function($) {
3
4/*
5*  new_map
6*
7*  This function will render a Google Map onto the selected jQuery element
8*
9*  @type	function
10*  @date	8/11/2013
11*  @since	4.3.0
12*
13*  @param	$el (jQuery element)
14*  @return	n/a
15*/
16
17function new_map( $el ) {
18	
19	// var
20	var $markers = $el.find('.marker');
21	
22	
23	// vars
24	var args = {
25		zoom		: 18,
26		center		: new google.maps.LatLng(0, 0),
27		mapTypeId	: google.maps.MapTypeId.ROADMAP,
28		disableDefaultUI: true,
29		styles		: [
30  {
31    "elementType": "geometry",
32    "stylers": [
33      {
34        "color": "#1d2c4d"
35      }
36    ]
37  },
38  {
39    "elementType": "labels.text.fill",
40    "stylers": [
41      {
42        "color": "#8ec3b9"
43      }
44    ]
45  },
46  {
47    "elementType": "labels.text.stroke",
48    "stylers": [
49      {
50        "color": "#1a3646"
51      }
52    ]
53  },
54  {
55    "featureType": "administrative.country",
56    "elementType": "geometry.stroke",
57    "stylers": [
58      {
59        "color": "#4b6878"
60      }
61    ]
62  },
63  {
64    "featureType": "administrative.land_parcel",
65    "elementType": "labels.text.fill",
66    "stylers": [
67      {
68        "color": "#64779e"
69      }
70    ]
71  },
72  {
73    "featureType": "administrative.province",
74    "elementType": "geometry.stroke",
75    "stylers": [
76      {
77        "color": "#4b6878"
78      }
79    ]
80  },
81  {
82    "featureType": "landscape.man_made",
83    "elementType": "geometry.stroke",
84    "stylers": [
85      {
86        "color": "#334e87"
87      }
88    ]
89  },
90  {
91    "featureType": "landscape.natural",
92    "elementType": "geometry",
93    "stylers": [
94      {
95        "color": "#023e58"
96      }
97    ]
98  },
99  {
100    "featureType": "poi",
101    "elementType": "geometry",
102    "stylers": [
103      {
104        "color": "#283d6a"
105      }
106    ]
107  },
108  {
109    "featureType": "poi",
110    "elementType": "labels.text.fill",
111    "stylers": [
112      {
113        "color": "#6f9ba5"
114      }
115    ]
116  },
117  {
118    "featureType": "poi",
119    "elementType": "labels.text.stroke",
120    "stylers": [
121      {
122        "color": "#1d2c4d"
123      }
124    ]
125  },
126  {
127    "featureType": "poi.business",
128    "stylers": [
129      {
130        "visibility": "off"
131      }
132    ]
133  },
134  {
135    "featureType": "poi.park",
136    "elementType": "geometry.fill",
137    "stylers": [
138      {
139        "color": "#023e58"
140      }
141    ]
142  },
143  {
144    "featureType": "poi.park",
145    "elementType": "labels.text",
146    "stylers": [
147      {
148        "visibility": "off"
149      }
150    ]
151  },
152  {
153    "featureType": "poi.park",
154    "elementType": "labels.text.fill",
155    "stylers": [
156      {
157        "color": "#3C7680"
158      }
159    ]
160  },
161  {
162    "featureType": "road",
163    "elementType": "geometry",
164    "stylers": [
165      {
166        "color": "#304a7d"
167      }
168    ]
169  },
170  {
171    "featureType": "road",
172    "elementType": "labels.text.fill",
173    "stylers": [
174      {
175        "color": "#98a5be"
176      }
177    ]
178  },
179  {
180    "featureType": "road",
181    "elementType": "labels.text.stroke",
182    "stylers": [
183      {
184        "color": "#1d2c4d"
185      }
186    ]
187  },
188  {
189    "featureType": "road.highway",
190    "elementType": "geometry",
191    "stylers": [
192      {
193        "color": "#2c6675"
194      }
195    ]
196  },
197  {
198    "featureType": "road.highway",
199    "elementType": "geometry.stroke",
200    "stylers": [
201      {
202        "color": "#255763"
203      }
204    ]
205  },
206  {
207    "featureType": "road.highway",
208    "elementType": "labels.text.fill",
209    "stylers": [
210      {
211        "color": "#b0d5ce"
212      }
213    ]
214  },
215  {
216    "featureType": "road.highway",
217    "elementType": "labels.text.stroke",
218    "stylers": [
219      {
220        "color": "#023e58"
221      }
222    ]
223  },
224  {
225    "featureType": "transit",
226    "elementType": "labels.text.fill",
227    "stylers": [
228      {
229        "color": "#98a5be"
230      }
231    ]
232  },
233  {
234    "featureType": "transit",
235    "elementType": "labels.text.stroke",
236    "stylers": [
237      {
238        "color": "#1d2c4d"
239      }
240    ]
241  },
242  {
243    "featureType": "transit.line",
244    "elementType": "geometry.fill",
245    "stylers": [
246      {
247        "color": "#283d6a"
248      }
249    ]
250  },
251  {
252    "featureType": "transit.station",
253    "elementType": "geometry",
254    "stylers": [
255      {
256        "color": "#3a4762"
257      }
258    ]
259  },
260  {
261    "featureType": "water",
262    "elementType": "geometry",
263    "stylers": [
264      {
265        "color": "#0e1626"
266      }
267    ]
268  },
269  {
270    "featureType": "water",
271    "elementType": "labels.text.fill",
272    "stylers": [
273      {
274        "color": "#4e6d70"
275      }
276    ]
277  }
278]
279	};
280	
281	
282	// create map	        	
283	var map = new google.maps.Map( $el[0], args);
284	
285	
286	// add a markers reference
287	map.markers = [];
288	
289	
290	// add markers
291	$markers.each(function(){
292		
293    	add_marker( $(this), map );
294		
295	});
296	
297	
298	// center map
299	center_map( map );
300	
301	
302	// return
303	return map;
304	
305}
306
307/*
308*  add_marker
309*
310*  This function will add a marker to the selected Google Map
311*
312*  @type	function
313*  @date	8/11/2013
314*  @since	4.3.0
315*
316*  @param	$marker (jQuery element)
317*  @param	map (Google Map object)
318*  @return	n/a
319*/
320
321function add_marker( $marker, map ) {
322
323	// var
324	var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );
325
326    var getUrl = window.location.origin;
327	var image = {
328		url: getUrl + '/wp-content/themes/rouge-wp-start-theme/assets/images/map-pin.svg'
329	}
330
331	// create marker
332	var marker = new google.maps.Marker({
333		position	: latlng,
334		map			: map,
335		icon 		: image
336	});
337
338	// add to array
339	map.markers.push( marker );
340
341	// if marker contains HTML, add it to an infoWindow
342	if( $marker.html() )
343	{

344		// create info window
345		var infowindow = new google.maps.InfoWindow({
346			content		: $marker.html()
347		});
348
349		// show info window when marker is clicked
350		google.maps.event.addListener(marker, 'click', function() {
351
352			infowindow.open( map, marker );
353
354		});
355	}
356
357}
358
359/*
360*  center_map
361*
362*  This function will center the map, showing all markers attached to this map
363*
364*  @type	function
365*  @date	8/11/2013
366*  @since	4.3.0
367*
368*  @param	map (Google Map object)
369*  @return	n/a
370*/
371
372function center_map( map ) {
373
374	// vars
375	var bounds = new google.maps.LatLngBounds();
376
377	// loop through all markers and create bounds
378	$.each( map.markers, function( i, marker ){
379
380		var latlng = new google.maps.LatLng( marker.position.lat(), marker.position.lng() );
381
382		bounds.extend( latlng );
383
384	});
385
386	// only 1 marker?
387	if( map.markers.length == 1 )
388	{
389		// set center of map
390	    map.setCenter( bounds.getCenter() );
391	    map.setZoom( 18 );
392	}
393	else
394	{
395		// fit to bounds
396		map.fitBounds( bounds );
397	}
398
399}
400
401/*
402*  document ready
403*
404*  This function will render each map when the document is ready (page has loaded)
405*
406*  @type	function
407*  @date	8/11/2013
408*  @since	5.0.0
409*
410*  @param	n/a
411*  @return	n/a
412*/
413// global var
414var map = null;
415
416$(document).ready(function(){
417
418	$('#map').each(function(){
419
420		// create map
421		map = new_map( $(this) );
422
423	});
424
425});
426
427})(jQuery);