https://getzschman.com/wp-content/plugins/tp-map-wplugin-main/public/js/tp-map-wplugin-public.js?ver=1.0.11

1jQuery(function ($) {
2
3	/**
4	 * initMap
5	 *
6	 * Renders a Google Map onto the selected jQuery element
7	 *
8	 * @date    22/10/19
9	 * @since   5.8.6
10	 *
11	 * @param   jQuery $el The jQuery element.
12	 * @return  object The map instance.
13	 */
14
15	function loadGoogleMapsScript(mapId) {
16			initMap(mapId);
17	}
18
19	function initIntersectionObserver(mapContainerId) {
20		var observer = new IntersectionObserver(function (entries) {
21			entries.forEach(function (entry) {
22				if (entry.isIntersecting && entry.intersectionRatio > 0) {
23					loadGoogleMapsScript(mapContainerId);
24					observer.disconnect();
25				}
26			});
27		}, { rootMargin: '500px' });
28
29		var mapContainer = document.getElementById(mapContainerId);
30		
31		if (mapContainer) {
32			observer.observe(mapContainer);
33		} else {
34			console.log('Map container element not found.');
35		}
36	}
37
38    // Define mapIds in the global scope
39    var mapIds = [];
40	jQuery(document).ready(function () {
41	
42	const sections = document.querySelectorAll('.multiple-map');
43		sections.forEach(section => {
44			const mapElements = section.querySelectorAll('[id^="tp-map-n"]');
45			mapElements.forEach(mapElement => {
46				mapIds.push(mapElement.id);
47				initIntersectionObserver(mapElement.id);
48			});
49		});
50	});
51
52	window.addEventListener('load', function() {
53        if (mapIds.length > 0) {
54            mapIds.forEach(mapId => {
55                if (document.getElementById(mapId)) {
56                    initMap(mapId); 
57                }
58            });
59        }
60    });
61
62	var infoWindow;
63	window.initMap = function (mapId) {
64
65		var mapElement = document.getElementById(mapId);
66
67		if (!mapElement) {
68			return;
69		}
70
71		var visibilityValue = map_label_option_vars.mapLabelOption;
72		var isFeatureEnabled = map_zoom_level_vars.isFeatureEnabled;
73		var mapZoomLevelDesktop = parseInt(map_zoom_level_vars.mapZoomLevelDesktop, 10);
74		var mapZoomLevelMobile = parseInt(map_zoom_level_vars.mapZoomLevelMobile, 10);
75
76
77       // get zoom level by attribute
78    	 mapZoomLevelDesktop = parseInt(mapElement.getAttribute("zoom-desktop"));
79         mapZoomLevelMobile = parseInt(mapElement.getAttribute("zoom-mobile")); 
80        
81		// Find marker elements within map.
82		var $markers = $('.'+mapId+'.acftp-map .marker').filter(function () {
83			return $(this).data('lat') && $(this).data('lng');
84		});
85		googleMapStyle = [
86			{
87				"elementType": "geometry",
88				"stylers": [
89					{
90						"color": "#f5f5f5"
91					}
92				]
93			},
94			{
95				"elementType": "labels",
96				"stylers": [
97					{
98						"visibility": visibilityValue
99					}
100				]
101			},
102			{
103				"elementType": "labels.icon",
104				"stylers": [
105					{
106						"visibility": "off"
107					}
108				]
109			},
110			{
111				"elementType": "labels.text.fill",
112				"stylers": [
113					{
114						"color": "#616161"
115					}
116				]
117			},
118			{
119				"elementType": "labels.text.stroke",
120				"stylers": [
121					{
122						"color": "#f5f5f5"
123					}
124				]
125			},
126			{
127				"featureType": "administrative",
128				"elementType": "labels.icon",
129				"stylers": [
130					{
131						"visibility": visibilityValue === "off" ? "off" : "on"
132					}
133				]
134			},
135			{
136				"featureType": "administrative.land_parcel",
137				"stylers": [
138					{
139						"visibility": "off"
140					}
141				]
142			},
143			{
144				"featureType": "administrative.land_parcel",
145				"elementType": "labels.text.fill",
146				"stylers": [
147					{
148						"color": "#bdbdbd"
149					}
150				]
151			},
152			{
153				"featureType": "administrative.neighborhood",
154				"stylers": [
155					{
156						"visibility": "off"
157					}
158				]
159			},
160			{
161				"featureType": "poi",
162				"elementType": "geometry",
163				"stylers": [
164					{
165						"color": "#eeeeee"
166					}
167				]
168			},
169			{
170				"featureType": "poi",
171				"elementType": "labels.text.fill",
172				"stylers": [
173					{
174						"color": "#757575"
175					}
176				]
177			},
178			{
179				"featureType": "poi.park",
180				"elementType": "geometry",
181				"stylers": [
182					{
183						"color": "#e5e5e5"
184					}
185				]
186			},
187			{
188				"featureType": "poi.park",
189				"elementType": "labels.text.fill",
190				"stylers": [
191					{
192						"color": "#9e9e9e"
193					}
194				]
195			},
196			{
197				"featureType": "road",
198				"elementType": "geometry",
199				"stylers": [
200					{
201						"color": "#ffffff"
202					}
203				]
204			},
205			{
206				"featureType": "road.arterial",
207				"elementType": "labels.text.fill",
208				"stylers": [
209					{
210						"color": "#757575"
211					}
212				]
213			},
214			{
215				"featureType": "road.highway",
216				"elementType": "geometry",
217				"stylers": [
218					{
219						"color": "#dadada"
220					}
221				]
222			},
223			{
224				"featureType": "road.highway",
225				"elementType": "labels.text.fill",
226				"stylers": [
227					{
228						"color": "#616161"
229					}
230				]
231			},
232			{
233				"featureType": "road.local",
234				"elementType": "labels.text.fill",
235				"stylers": [
236					{
237						"color": "#9e9e9e"
238					}
239				]
240			},
241			{
242				"featureType": "transit.line",
243				"elementType": "geometry",
244				"stylers": [
245					{
246						"color": "#e5e5e5"
247					}
248				]
249			},
250			{
251				"featureType": "transit.station",
252				"elementType": "geometry",
253				"stylers": [
254					{
255						"color": "#eeeeee"
256					}
257				]
258			},
259			{
260				"featureType": "water",
261				"elementType": "geometry",
262				"stylers": [
263					{
264						"color": "#c9c9c9"
265					}
266				]
267			},
268			{
269				"featureType": "water",
270				"elementType": "labels.text.fill",
271				"stylers": [
272					{
273						"color": "#9e9e9e"
274					}
275				]
276			}
277		];
278
279		// Get the coordinates of the center of the map
280		$cLat = document.querySelector('.marker').getAttribute('data-lat');
281        $cLng = document.querySelector('.marker').getAttribute('data-lng');
282
283		var mapArgs = {
284			zoom: 10,
285			scrollwheel: false,
286			streetViewControl: false,
287			mapTypeControl: false,
288			fullscreenControl: false,
289			zoomControl: true,
290			navigationControl: false,
291			mapTypeId: google.maps.MapTypeId.ROADMAP,
292			center: new google.maps.LatLng($cLat, $cLng),
293			styles: googleMapStyle
294		};
295
296
297       
298
299		   if (window.matchMedia("(max-width: 767px)").matches) {
300				mapArgs.zoom = mapZoomLevelMobile; // Apply mobile zoom level
301			} else if (window.matchMedia("(min-width: 768px)").matches) {
302				mapArgs.zoom = mapZoomLevelDesktop; // Apply desktop zoom level
303			}
304		
305
306		var map = new google.maps.Map(mapElement, mapArgs);
307    	infoWindow = new google.maps.InfoWindow();
308
309		// Add markers.
310		map.markers = [];
311		$markers.each(function () {
312			initMarker($(this), map);
313
314		});
315
316		// Center map based on markers.

317		centerMap(map);
318		// Return map instance.
319		return map;
320	}
321
322	/**
323	 * initMarker
324	 *
325	 * Creates a marker for the given jQuery element and map.
326	 *
327	 * @date    22/10/19
328	 * @since   5.8.6
329	 *
330	 * @param   jQuery $el The jQuery element.
331	 * @param   object The map instance.
332	 * @return  object The marker instance.
333	 */
334	function initMarker($marker, map) {
335
336		// Get position from marker.
337		var lat = $marker.data('lat');
338		var lng = $marker.data('lng');
339		var label = $marker.data('title');
340		var latLng = {
341			lat: parseFloat(lat),
342			lng: parseFloat(lng)
343		};
344		var point = new google.maps.LatLng(parseFloat(lat), parseFloat(lng));
345		var iconSize = new google.maps.Size(43, 56);
346		var iconShadowSize = new google.maps.Size(22, 20);
347		var iconHotSpotOffset = new google.maps.Point(23, 47);
348		var iconPosition = new google.maps.Point(0, 0);
349		var infoWindowAnchor = new google.maps.Point(9, 2);
350		var infoShadowAnchor = new google.maps.Point(18, 25);
351
352		var visibilityValue = map_label_option_vars.mapLabelOption;
353		var markerColor = marker_color_vars.markerColor;
354		var iconSvg = '<svg xmlns="http://www.w3.org/2000/svg" height="44" viewBox="0 -960 960 960" width="44"><path d="M480-480q33 0 56.5-23.5T560-560q0-33-23.5-56.5T480-640q-33 0-56.5 23.5T400-560q0 33 23.5 56.5T480-480Zm0 400Q319-217 239.5-334.5T160-552q0-150 96.5-239T480-880q127 0 223.5 89T800-552q0 100-79.5 217.5T480-80Z" fill="' + markerColor + '"/></svg>';
355
356		var markerOptions = {
357			position: point,
358			map: map,
359			icon: {
360				url: 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(iconSvg),
361			},
362			cursor: 'grab'
363		};
364		if (visibilityValue === "off") {
365			markerOptions.label = {
366				text: String(label),
367				className: "markerClass",
368				color: "black",
369				fontWeight: "bold",
370				fontSize: "19px"
371
372			}
373		}
374		var marker = new google.maps.Marker(markerOptions);
375
376		// Append to reference for later use.
377		map.markers.push(marker);
378
379		// If marker contains HTML, add it to an infoWindow.
380		if ($marker.html()) {
381
382			// // Create info window.
383			// var infowindow = new google.maps.InfoWindow({
384			//     content: $marker.html()
385			// });
386
387			// Show info window when marker is clicked.
388			google.maps.event.addListener(marker, 'notclick', function () {
389				infoWindow.open(map, marker);
390				infoWindow.setContent($marker.html());
391				aTrigger();
392				updateMarkerColors(map, marker);
393
394			});
395		}
396	}
397
398	function aTrigger() {
399		google.maps.event.addListener(infoWindow, 'domready', function () {
400			$(".default-cta").click(function (e) {
401				e.preventDefault();
402				console.log('hi');
403				ScheduleEngine.show();
404			});
405		});
406	}
407	function updateMarkerColors(map, marker) {
408		map.markers.forEach(function (marker) {
409			marker.setOpacity(0.5);
410		});
411		infoWindow.addListener('closeclick', () => {
412			// Handle focus manually.
413			map.markers.forEach(function (marker) {
414				marker.setOpacity(1);
415			});
416		});
417		marker.setOpacity(1);
418	}
419	/**
420	 * centerMap
421	 *
422	 * Centers the map showing all markers in view.
423	 *
424	 * @date    22/10/19
425	 * @since   5.8.6
426	 *
427	 * @param   object The map instance.
428	 * @return  void
429	 */
430	function centerMap(map) {
431
432		// Create map boundaries from all map markers.
433		var bounds = new google.maps.LatLngBounds();
434		map.markers.forEach(function (marker) {
435			bounds.extend({
436				lat: marker.position.lat(),
437				lng: marker.position.lng()
438			});
439		});
440		map.setCenter(bounds.getCenter());
441
442		// Case: Single marker.
443		if (map.markers.length == 1) {
444			map.setCenter(bounds.getCenter());
445
446			// Case: Multiple markers.
447		} else {
448			// const cityCircle = new google.maps.Circle({
449			//     strokeColor: "#11537F",
450			//     strokeOpacity: 0.8,
451			//     strokeWeight: 2,
452			//     fillColor: "#11537F",
453			//     fillOpacity: 0.35,
454			//     map,
455			//     center: { lat: 32.715736, lng: -117.161087 },
456			//     radius: 10000,
457			// });
458			// cityCircle.setMap(map);
459
460			// if (window.matchMedia("(max-width: 767px)").matches) {
461			//     map.fitBounds(bounds, 40);
462			// } else if (window.matchMedia("(min-width: 768px)").matches) {
463			//     map.fitBounds(bounds, 10);
464			// }
465		}
466	}
467});