https://vicreativity.com/wp-content/plugins/myvoyage-core/inc/maps/assets/js/google-map.js?ver=7.1.3

1(function ( $ ) {
2	'use strict';
3
4	var qodefGoogleMap = {
5		mapHolder: '',
6		mapOptions: [],
7		mapElement: '',
8		map: {},
9		markers: {},
10		circleMap: {},
11		init: function ( $mapHolder, options ) {
12			// Set main map holder
13			this.mapHolder = $mapHolder;
14
15			if ( typeof google !== 'object' || typeof this.mapHolder === 'undefined' || typeof this.mapHolder === '' ) {
16				return;
17			}
18
19			// Init map
20			this.initMap( this.mapHolder, options );
21		},
22		getMapSettings: function () {
23			var settings = {
24				styles: qodefMapsVariables.global.mapStyle,
25				mapTypeId: google.maps.MapTypeId.ROADMAP,
26				scrollwheel: qodefMapsVariables.global.mapScrollable,
27				draggable: qodefMapsVariables.global.mapDraggable,
28				streetViewControl: qodefMapsVariables.global.streetViewControl,
29				zoomControl: qodefMapsVariables.global.zoomControl,
30				zoom: parseInt( qodefMapsVariables.global.mapZoom, 10 ),
31				mapTypeControl: qodefMapsVariables.global.mapTypeControl,
32				fullscreenControl: qodefMapsVariables.global.fullscreenControl,
33			};
34
35			return settings;
36		},
37		getMapOptions: function ( $mapHolder, forwardOptions ) {
38			var options = {
39				uniqueId: '',
40				holderId: '',
41				mapHeight: 0,
42				addresses: [],
43				addressesLatLng: [],
44				pin: '',
45				selectorIsID: false,
46				multipleTrigger: false,
47				geolocation: false,
48			};
49
50			options = $.extend( options, forwardOptions );
51
52			if ( options.selectorIsID ) {
53				options.uniqueId = $mapHolder[0].id;
54				options.holderId = $mapHolder[0].id;
55			} else if ( typeof $mapHolder.data( 'unique-id' ) !== 'undefined' && $mapHolder.data( 'unique-id' ) !== false ) {
56				options.uniqueId = $mapHolder.data( 'unique-id' );
57				options.holderId = 'qodef-map-id--' + $mapHolder.data( 'unique-id' );
58			}
59
60			if ( typeof $mapHolder.data( 'height' ) !== 'undefined' && $mapHolder.data( 'height' ) !== false ) {
61				options.mapHeight = parseInt( $mapHolder.data( 'height' ), 10 );
62			}
63
64			if ( typeof qodefMapsVariables.multiple.addresses !== 'undefined' && qodefMapsVariables.multiple.addresses !== '' ) {
65				options.addresses = qodefMapsVariables.multiple.addresses;
66			} else if ( typeof $mapHolder.data( 'addresses' ) !== 'undefined' && $mapHolder.data( 'addresses' ) !== false ) {
67				options.addresses = $mapHolder.data( 'addresses' );
68			}
69
70			if ( typeof $mapHolder.data( 'pin' ) !== 'undefined' && $mapHolder.data( 'pin' ) !== false ) {
71				options.pin = $mapHolder.data( 'pin' );
72			}
73
74			return options;
75		},
76		initMap: function ( $mapHolder, options ) {
77			this.mapOptions = this.getMapOptions( $mapHolder, options );
78			this.mapElement = document.getElementById( this.mapOptions.holderId );
79			this.map        = new google.maps.Map( this.mapElement, this.getMapSettings() );
80
81			// Trigger geolocation
82			this.triggerGeolocation();
83
84			// Set map addresses
85			this.setAddress();
86
87			// Set map height
88			this.setMapHeight();
89		},
90		triggerGeolocation: function () {
91
92			//If geolocation enabled set map center to user location
93			if ( navigator.geolocation && this.mapOptions.geolocation ) {
94				this.centerMapToGeolocationAddress();
95			}
96		},
97		setAddress: function () {
98			for ( var index = 0; index < this.mapOptions.addresses.length; index++ ) {
99				var address = this.mapOptions.addresses[index];
100
101				if ( address === '' ) {
102					return;
103				}
104
105				if ( this.mapOptions.multipleTrigger ) {
106					var addressLocation = address.location;
107
108					if ( typeof addressLocation !== 'undefined' && addressLocation !== null && addressLocation.latitude !== '' && addressLocation.longitude !== '' ) {
109						this.mapOptions.addressesLatLng.push( $.extend( addressLocation, address ) );
110					}
111
112				} else {
113					this.setSingleAddress( address );
114				}
115			}
116
117			if ( this.mapOptions.multipleTrigger ) {
118
119				// Center map and set borders of map
120				this.centerMapMultipleAddresses( this.map, this.mapOptions );
121
122				// Add markers to the map
123				this.addMultipleMarkers();
124			}
125		},
126		setSingleAddress: function ( address ) {
127			var $infoWindow = new google.maps.InfoWindow(
128				{
129					content: '<div id="content"><div id="siteNotice"></div><div id="bodyContent"><p>' + address + '</p></div></div>',
130				}
131			);
132
133			var $geocoder = new google.maps.Geocoder();
134
135			if ( typeof $geocoder === 'object' ) {
136				var $map       = this.map,
137					mapOptions = this.mapOptions;
138
139				$geocoder.geocode(
140					{ 'address': address },
141					function ( results, status ) {
142						if ( status === google.maps.GeocoderStatus.OK && typeof results === 'object' ) {
143							var $marker = new google.maps.Marker(
144								{
145									map: $map,
146									position: results[0].geometry.location,
147									icon: mapOptions.pin,
148									title: address.store_title,
149								}
150							);
151
152							google.maps.event.addListener(
153								$marker,
154								'click',
155								function () {
156									$infoWindow.open( $map, $marker );
157								}
158							);
159
160							var addressVariables = {
161								address: results[0].formatted_address,
162								latitude: results[0].geometry.location.lat(),
163								longitude: results[0].geometry.location.lng(),
164							};
165
166							mapOptions.addressesLatLng.push( addressVariables );
167
168							// Center map address
169							qodefGoogleMap.centerMapAddress( $map, mapOptions, results );
170						}
171					}
172				);
173			}
174		},
175		setMapHeight: function () {
176			var mapOptions = this.mapOptions;
177
178			if ( mapOptions.mapHeight > 0 && this.mapElement !== '' ) {
179				this.mapElement.style.height = mapOptions.mapHeight + 'px';
180			}
181		},
182		centerMapAddress: function ( $map, mapOptions, results ) {
183
184			// Different logic for single and multiple addresses
185			if ( mapOptions.addresses.length === 1 ) {
186				$map.setCenter( results[0].geometry.location );
187			} else {
188				this.centerMapMultipleAddresses( $map, mapOptions );
189			}
190
191			// Re-init markers position on resize
192			google.maps.event.addDomListener(
193				window,
194				'resize',
195				function () {
196					qodefGoogleMap.centerMapAddress( $map, mapOptions, results );
197				}
198			);
199		},
200		centerMapMultipleAddresses: function ( $map, mapOptions ) {
201			var $bounds         = new google.maps.LatLngBounds(),
202				addressesLatLng = mapOptions.addressesLatLng;
203
204			if ( mapOptions.multipleTrigger && addressesLatLng.length === 1 ) {
205				$map.setCenter(
206					{
207						lat: parseFloat( addressesLatLng[0].latitude ),
208						lng: parseFloat( addressesLatLng[0].longitude ),
209					}
210				);
211			} else if ( typeof $bounds === 'object' && addressesLatLng.length ) {
212				for ( var index = 0; index < addressesLatLng.length; index++ ) {
213					$bounds.extend(
214						{
215							lat: parseFloat( addressesLatLng[index].latitude ),
216							lng: parseFloat( addressesLatLng[index].longitude ),
217						}
218					);
219				}
220
221				$map.fitBounds( $bounds );
222			}
223		},
224		centerMapToGeolocationAddress: function ( setInputAddressValue, placesInput, geoLocationLinkIcon, listHolder ) {
225
226			// Try HTML5 geolocation.

227			if ( navigator.geolocation ) {
228				var $map = this.map;
229
230				if ( setInputAddressValue ) {
231					geoLocationLinkIcon.addClass( 'fa-spinner fa-spin' );
232				}
233
234				navigator.geolocation.getCurrentPosition(
235					function ( position ) {
236						var lat    = position.coords.latitude,
237							lng    = position.coords.longitude,
238							latlng = {
239								lat: lat,
240								lng: lng,
241							};
242
243						if ( setInputAddressValue ) {
244							var $geocoder           = new google.maps.Geocoder(),
245								cityName            = '',
246								cityWithCountryName = '';
247
248							$geocoder.geocode(
249								{ 'latLng': latlng },
250								function ( results, status ) {
251									if ( status === google.maps.GeocoderStatus.OK && typeof results === 'object' ) {
252										var resultsObject = results;
253
254										for ( var $i = 0; $i <= resultsObject.length; $i++ ) {
255											var result = resultsObject[$i];
256
257											if ( typeof result === 'object' && result.types[0] === 'locality' ) {
258												var currentAddress = result.address_components;
259
260												cityName = currentAddress[0].long_name;
261
262												for ( var $j = 0; $j <= currentAddress.length; $j++ ) {
263													if ( typeof currentAddress[$j] === 'object' && currentAddress[$j].types[0] === 'country' ) {
264														cityWithCountryName = cityName + ',' + currentAddress[$j].long_name;
265													}
266												}
267											}
268										}
269
270										if ( typeof cityName === 'string' ) {
271											geoLocationLinkIcon.removeClass( 'fa-spinner fa-spin' );
272
273											if ( typeof cityWithCountryName === 'string' ) {
274												placesInput.val( cityWithCountryName );
275											} else {
276												placesInput.val( cityName );
277											}
278
279											window.qodefGeoLocation.showRangeSlider( latlng, true );
280											qodef.body.trigger( 'myvoyage_core_trigger_after_autocomplete_places', [placesInput] );
281										}
282									}
283								}
284							);
285						} else {
286							$map.setCenter( latlng );
287						}
288					}
289				);
290			}
291		},
292		centerMapToForwardAddress: function ( addressName ) {
293
294			if ( typeof addressName === 'string' && typeof google === 'object' ) {
295				var $map        = this.map,
296					mapSettings = this.getMapSettings(),
297					$geocoder   = new google.maps.Geocoder();
298
299				$geocoder.geocode(
300					{ 'address': addressName },
301					function ( results, status ) {
302						if ( status === google.maps.GeocoderStatus.OK && typeof results[0] === 'object' ) {
303							$map.setZoom( mapSettings.zoom );
304							$map.setCenter( results[0].geometry.location );
305						}
306					}
307				);
308			}
309		},
310		addMultipleMarkers: function () {
311			var markers         = [],
312				addressesLatLng = this.mapOptions.addressesLatLng;
313
314			for ( var i = 0; i < addressesLatLng.length; i++ ) {
315				var latLng = {
316					lat: parseFloat( addressesLatLng[i].latitude ),
317					lng: parseFloat( addressesLatLng[i].longitude )
318				};
319
320				//Custom html markers
321				//Insert marker data into info window template
322				var templateData = {
323					title: addressesLatLng[i].title,
324					itemId: addressesLatLng[i].itemId,
325					address: addressesLatLng[i].address,
326					featuredImage: addressesLatLng[i].featuredImage,
327					itemUrl: addressesLatLng[i].itemUrl,
328					latLng: latLng,
329				};
330
331				var $customMarker = new window.qodefCustomMarker(
332					{
333						position: latLng,
334						map: this.map,
335						templateData: templateData,
336						markerPin: addressesLatLng[i].markerPin,
337					}
338				);
339
340				markers.push( $customMarker );
341			}
342
343			this.markers = markers;
344
345			//Init map clusters ( Grouping map markers at small zoom values )
346			this.initMarkerClusters();
347
348			//Init marker info
349			this.initMarkerInfo();
350
351			//Init marker info close
352			this.initMarkerInfoClose();
353		},
354		initMarkerClusters: function () {
355			var markerOptions = {
356				minimumClusterSize: 2,
357				maxZoom: 12,
358				styles: [{
359					width: 50,
360					height: 60,
361					url: '',
362					textSize: 12,
363				}],
364			};
365
366			new MarkerClusterer(
367				this.map,
368				this.markers,
369				markerOptions
370			);
371		},
372		initMarkerInfo: function () {
373			var $map = this.map;
374
375			$( document ).off(
376				'click',
377				'.qodef-map-marker'
378			).on(
379				'click',
380				'.qodef-map-marker',
381				function () {
382					var self             = $( this ),
383						$markerHolders   = $( '.qodef-map-marker-holder' ),
384						$infoWindows     = $( '.qodef-info-window' ),
385						$markerHolder    = self.parent( '.qodef-map-marker-holder' ),
386						markerlatlngData = $markerHolder.data( 'latlng' ),
387						$infoWindow      = self.siblings( '.qodef-info-window' );
388
389					if ( $markerHolder.hasClass( 'qodef-active qodef-map-active' ) ) {
390						$markerHolder.removeClass( 'qodef-active qodef-map-active' );
391						$infoWindow.fadeOut( 0 );
392					} else {
393						$markerHolders.removeClass( 'qodef-active qodef-map-active' );
394						$infoWindows.fadeOut( 0 );
395						$markerHolder.addClass( 'qodef-active qodef-map-active' );
396						$infoWindow.fadeIn( 300 );
397
398						if ( markerlatlngData.length && markerlatlngData !== undefined ) {
399							var latlngStr = markerlatlngData.replace( '(', '' ).replace( ')', '' ).split( ',', 2 );
400
401							$map.panTo( new google.maps.LatLng( parseFloat( latlngStr[0] ), parseFloat( latlngStr[1] ) ) );
402						}
403					}
404				}
405			);
406		},
407		initMarkerInfoClose: function () {
408
409			$(document).on('click', '.icon_close', function () {
410
411				var self = $(this),
412					$markerHolder    = self.parents( '.qodef-map-marker-holder' ),
413					$infoWindow      = self.parents( '.qodef-info-window' );
414
415				if ( $markerHolder.hasClass( 'qodef-active qodef-map-active' ) ) {
416					$markerHolder.removeClass( 'qodef-active qodef-map-active' );
417					$infoWindow.fadeOut( 0 );
418				}
419			});
420		},
421		setGeoLocationRadius: function ( $geoLocation, radius, isActive ) {
422
423			if ( typeof $geoLocation === 'object' && typeof google === 'object' ) {
424				var $map     = this.map,
425					$markers = this.markers;
426
427				if ( isActive ) {
428					this.circleMap.setMap( null );
429				}
430
431				this.circleMap = new google.maps.Circle(
432					{
433						map: $map,
434						center: $geoLocation,

435						radius: parseInt( radius, 10 ) * 1000, // 1000 change meters to kilometers
436						strokeWeight: 0,
437						fillColor: '#fc475f',
438						fillOpacity: 0.15,
439					}
440				);
441
442				var $currentCircle = this.circleMap;
443
444				var itemsInArea = [];
445				$.each(
446					$markers,
447					function ( i, marker ) {
448						if ( $currentCircle.getBounds().contains( marker.latlng ) ) {
449							itemsInArea.push( marker.templateData.itemId );
450						}
451					}
452				);
453
454				window.qodefGeoLocation.disableItemsOutOfRange( itemsInArea );
455			}
456		},
457		createAutocompletePlaces: function ( placeInputID ) {
458
459			if ( typeof google === 'object' && typeof google.maps.places === 'object' ) {
460				var autocompleteConfig = {
461					types: ['(cities)']
462				};
463
464				var autocomplete = new google.maps.places.Autocomplete( placeInputID, autocompleteConfig );
465
466				autocomplete.addListener(
467					'place_changed',
468					function () {
469						// Enable reset icon in field
470						$( placeInputID ).next().show();
471						window.qodefGeoLocation.reset();
472						qodef.body.trigger( 'myvoyage_core_trigger_after_autocomplete_places', [placeInputID] );
473					}
474				);
475			}
476		},
477	};
478
479	window.qodefGoogleMap = qodefGoogleMap;
480
481	var qodefGeoLocation = {
482		holder: '',
483		radius: '',
484		slider: '',
485		init: function ( $holder = '' ) {
486			this.holder = $holder;
487
488			if ( this.holder.length ) {
489				this.radius = this.holder.find( '.qodef-places-geo-radius' );
490				this.slider = document.getElementById( 'qodef-range-slider-id' );
491
492				if ( this.radius.length && this.slider !== null ) {
493					this.createSlider();
494				}
495			}
496		},
497		createSlider: function () {
498			noUiSlider.create(
499				this.slider,
500				{
501					connect: [true, false],
502					start: 0,
503					step: 1,
504					tooltips: true,
505					format: {
506						from: function ( value ) {
507							return parseInt( value );
508						},
509						to: function ( value ) {
510							return parseInt( value );
511						},
512					},
513					range: {
514						min: 0,
515						max: 100,
516					}
517				}
518			);
519
520			this.updateMapRadius();
521		},
522		updateMapRadius: function () {
523			var sliderEventCount = 0;
524
525			this.slider.noUiSlider.on(
526				'set',
527				function ( values ) {
528					var $geoLocation = qodefGeoLocation.radius.data( 'geo-location' );
529
530					if ( typeof $geoLocation === 'object' ) {
531						window.qodefGoogleMap.setGeoLocationRadius( $geoLocation, values, sliderEventCount > 0 );
532						sliderEventCount++;
533					}
534				}
535			);
536		},
537		reset: function () {
538
539			if ( this.slider !== null && this.radius.length && this.radius.is( ':visible' ) ) {
540				this.setRadiusVisibility( '', false );
541				this.slider.noUiSlider.reset();
542			}
543		},
544		showRangeSlider: function ( latlng, visibility ) {
545
546			if ( this.radius.length ) {
547				this.setRadiusVisibility( latlng, visibility );
548			}
549		},
550		setRadiusVisibility: function ( latlng, visibility ) {
551			this.radius.data( 'geo-location', latlng );
552
553			if ( visibility ) {
554				this.radius.show();
555			} else {
556				this.radius.hide();
557			}
558		},
559		disableItemsOutOfRange: function ( $itemsInArea ) {
560			var $holder = this.holder;
561
562			if ( $holder.length && typeof $itemsInArea === 'object' ) {
563				var $items         = $holder.find( '.qodef-grid-inner article' ),
564					$outOfRangeHolder,
565					$outOfRangeItems,
566					$inRangeHolder = $holder.find( '.qodef-grid-inner' );
567
568				if ( ! $holder.children( '.qodef-out-of-range-holder' ).length ) {
569					$holder.append( '<div class="qodef-out-of-range-holder"></div>' );
570				}
571
572				$outOfRangeHolder = $holder.children( '.qodef-out-of-range-holder' );
573				$outOfRangeItems  = $outOfRangeHolder.children( 'article' );
574
575				if ( $items.length || $outOfRangeItems.length ) {
576
577					$items.each(
578						function () {
579							var $thisItem = $( this ),
580								itemID    = $thisItem.data( 'id' );
581
582							if ( itemID !== undefined && itemID !== false ) {
583								var itemInRange = false;
584
585								$.each(
586									$itemsInArea,
587									function ( i, id ) {
588										if ( parseInt( itemID, 10 ) === id ) {
589											itemInRange = true;
590											return true;
591										}
592									}
593								);
594
595								if ( ! itemInRange ) {
596									$thisItem.appendTo( $outOfRangeHolder );
597
598									if ( $holder.hasClass( 'qodef-layout--masonry' ) ) {
599										$inRangeHolder.isotope( 'layout' );
600									}
601								}
602							}
603						}
604					);
605
606					if ( $outOfRangeItems.length ) {
607						$outOfRangeItems.each(
608							function () {
609								var $thisOutItem = $( this ),
610									outItemID    = $thisOutItem.data( 'id' ),

611									itemInRange  = false;
612
613								$.each(
614									$itemsInArea,
615									function ( i, id ) {
616										if ( parseInt( outItemID, 10 ) === id ) {
617											itemInRange = true;
618											return true;
619										}
620									}
621								);
622
623								if ( itemInRange ) {
624									$thisOutItem.appendTo( $inRangeHolder );
625
626									if ( $holder.hasClass( 'qodef-layout--masonry' ) ) {
627										$inRangeHolder.isotope( 'layout' );
628									}
629								}
630							}
631						);
632					}
633				}
634			}
635		},
636	};
637
638	window.qodefGeoLocation = qodefGeoLocation;
639
640})( jQuery );