TweenMax.js
1 year ago
anime.js
1 year ago
flipster.js
1 year ago
headroom.js
1 year ago
iscroll.js
1 year ago
isotope.js
1 year ago
jquery-countdown.js
1 year ago
jquery-mousewheel.js
1 year ago
jquery-slimscroll.js
1 year ago
lottie.js
1 year ago
luxon.js
1 year ago
markerclusterer.js
1 year ago
modal.js
1 year ago
motionpath.js
1 year ago
pa-gsap.js
1 year ago
pa-scrolldir.js
1 year ago
premium-addons.js
1 year ago
premium-banner.js
1 year ago
premium-blog.js
1 year ago
premium-button.js
1 year ago
premium-carousel-widget.js
1 year ago
premium-contact-form.js
1 year ago
premium-countdown-timer.js
1 year ago
premium-counter.js
1 year ago
premium-dis-conditions.js
1 year ago
premium-dual-header.js
1 year ago
premium-eq-height.js
1 year ago
premium-fancy-text.js
1 year ago
premium-floating-effects.js
1 year ago
premium-global-tooltips.js
1 year ago
premium-icon-list.js
1 year ago
premium-image-button.js
1 year ago
premium-image-scroll.js
1 year ago
premium-img-gallery.js
1 year ago
premium-maps.js
1 year ago
premium-media-wheel.js
1 year ago
premium-mini-cart.js
1 year ago
premium-mobile-menu.js
1 year ago
premium-modal-box.js
1 year ago
premium-nav-menu.js
1 year ago
premium-notifications.js
1 year ago
premium-person.js
1 year ago
premium-pinterest-feed.js
1 year ago
premium-post-ticker.js
1 year ago
premium-progressbar.js
1 year ago
premium-search-form.js
1 year ago
premium-shape-divider.js
1 year ago
premium-svg-drawer.js
1 year ago
premium-tcloud.js
1 year ago
premium-testimonials.js
1 year ago
premium-textual-showcase.js
1 year ago
premium-tiktok-feed.js
1 year ago
premium-title.js
1 year ago
premium-video-box.js
1 year ago
premium-vscroll.js
1 year ago
premium-weather.js
1 year ago
premium-woo-categories.js
1 year ago
premium-woo-cta.js
1 year ago
premium-woo-products.js
1 year ago
premium-world-clock.js
1 year ago
premium-wrapper-link.js
1 year ago
prettyPhoto.js
1 year ago
scrollTrigger.js
1 year ago
slick.js
1 year ago
tooltipster.js
1 year ago
typed.js
1 year ago
universal-tilt.js
1 year ago
vticker.js
1 year ago
premium-maps.js
280 lines
| 1 | function initMap() { |
| 2 | console.log('Google API Loaded'); |
| 3 | } |
| 4 | |
| 5 | jQuery(window).on("elementor/frontend/init", function () { |
| 6 | |
| 7 | var PremiumMapsHandler = function ($scope, $) { |
| 8 | |
| 9 | var $carouselWidgets = null, |
| 10 | mapElement = $scope.find(".premium_maps_map_height"), |
| 11 | mapSettings = mapElement.data("settings"), |
| 12 | mapStyle = mapElement.data("style"), |
| 13 | premiumMapMarkers = [], |
| 14 | premiumMapPopups = []; |
| 15 | |
| 16 | if (mapSettings.loadScroll) { |
| 17 | |
| 18 | var $closestSection = $scope.closest('.elementor-top-section, .e-con'); |
| 19 | |
| 20 | var eleObserver = new IntersectionObserver(function (entries) { |
| 21 | entries.forEach(function (entry) { |
| 22 | if (entry.isIntersecting) { |
| 23 | premiumMap = newMap(mapElement, mapSettings, mapStyle); |
| 24 | eleObserver.unobserve(entry.target); // to only excecute the callback func once. |
| 25 | } |
| 26 | }); |
| 27 | }, { |
| 28 | rootMargin: '-70% 0px 0px 0px' |
| 29 | }); |
| 30 | |
| 31 | eleObserver.observe($closestSection[0]); |
| 32 | |
| 33 | // elementorFrontend.waypoint($closestSection, function () { |
| 34 | // premiumMap = newMap(mapElement, mapSettings, mapStyle); |
| 35 | // }, { |
| 36 | // offset: '70%' |
| 37 | // }); |
| 38 | |
| 39 | } else { |
| 40 | premiumMap = newMap(mapElement, mapSettings, mapStyle); |
| 41 | } |
| 42 | |
| 43 | |
| 44 | function newMap(map, settings, mapStyle) { |
| 45 | |
| 46 | var scrollwheel = settings.scrollwheel, |
| 47 | streetViewControl = settings.streetViewControl, |
| 48 | fullscreenControl = settings.fullScreen, |
| 49 | zoomControl = settings.zoomControl, |
| 50 | mapTypeControl = settings.typeControl, |
| 51 | centerLat = JSON.parse(settings.centerlat), |
| 52 | centerLong = JSON.parse(settings.centerlong), |
| 53 | autoOpen = settings.automaticOpen, |
| 54 | hoverOpen = settings.hoverOpen, |
| 55 | hoverClose = settings.hoverClose, |
| 56 | args = { |
| 57 | zoom: settings["zoom"], |
| 58 | mapTypeId: settings["maptype"], |
| 59 | center: { lat: centerLat, lng: centerLong }, |
| 60 | scrollwheel: scrollwheel, |
| 61 | streetViewControl: streetViewControl, |
| 62 | fullscreenControl: fullscreenControl, |
| 63 | zoomControl: zoomControl, |
| 64 | mapTypeControl: mapTypeControl, |
| 65 | styles: mapStyle |
| 66 | }; |
| 67 | |
| 68 | if ("yes" === mapSettings.drag) |
| 69 | args.gestureHandling = "none"; |
| 70 | |
| 71 | var markers = map.find(".premium-pin"); |
| 72 | |
| 73 | var map = new google.maps.Map(map[0], args); |
| 74 | |
| 75 | map.markers = []; |
| 76 | |
| 77 | $carouselWidgets = $(".maps-carousel .premium-carousel-wrapper"); |
| 78 | // add markers |
| 79 | markers.each(function (index) { |
| 80 | addMarker(jQuery(this), map, autoOpen, hoverOpen, hoverClose, index); |
| 81 | }); |
| 82 | |
| 83 | if ($scope.hasClass('pa-maps-carousel')) { |
| 84 | $carouselWidgets.map(function (index, item) { |
| 85 | |
| 86 | $(item).find(".premium-carousel-inner").on("afterChange", function (event, slick, currentSlide) { |
| 87 | |
| 88 | |
| 89 | premiumMapPopups.map(function (popup, index) { |
| 90 | |
| 91 | popup.close(); |
| 92 | }); |
| 93 | |
| 94 | if (premiumMapPopups[currentSlide]) |
| 95 | premiumMapPopups[currentSlide].open(map, map.markers[currentSlide]); |
| 96 | |
| 97 | }); |
| 98 | |
| 99 | }); |
| 100 | |
| 101 | } |
| 102 | |
| 103 | if (mapSettings.cluster && MarkerClusterer) { |
| 104 | |
| 105 | new MarkerClusterer(map, premiumMapMarkers, { |
| 106 | imagePath: '' != mapSettings.cluster_icon ? mapSettings.cluster_icon : "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m", |
| 107 | styles: [ |
| 108 | { |
| 109 | url: mapSettings.cluster_icon || "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m1.png", // The URL of your cluster icon |
| 110 | width: mapSettings.cluster_icon_size, |
| 111 | height: mapSettings.cluster_icon_size |
| 112 | } |
| 113 | ] |
| 114 | }); |
| 115 | } |
| 116 | |
| 117 | return map; |
| 118 | } |
| 119 | |
| 120 | var activeInfoWindow = null; |
| 121 | function addMarker(pin, map, autoOpen, hoverOpen, hoverClose, zIndex) { |
| 122 | |
| 123 | var latlng = new google.maps.LatLng(pin.data("lat"), pin.data("lng")), |
| 124 | iconImg = pin.data("icon"), |
| 125 | maxWidth = pin.data("max-width"), |
| 126 | customID = pin.data("id"), |
| 127 | isActive = pin.data("activated"), |
| 128 | iconSize = parseInt(pin.data("icon-size")); |
| 129 | |
| 130 | if ('' != iconImg) { |
| 131 | var icon = { |
| 132 | url: iconImg |
| 133 | }; |
| 134 | |
| 135 | if (iconSize) { |
| 136 | icon.scaledSize = new google.maps.Size(iconSize, iconSize); |
| 137 | icon.origin = new google.maps.Point(0, 0); |
| 138 | icon.anchor = new google.maps.Point(iconSize / 2, iconSize); |
| 139 | } |
| 140 | } |
| 141 | |
| 142 | // create marker |
| 143 | var marker = new google.maps.Marker({ |
| 144 | position: latlng, |
| 145 | map: map, |
| 146 | icon: icon, |
| 147 | zIndex: zIndex |
| 148 | }); |
| 149 | |
| 150 | |
| 151 | //Used with Carousel Custom Navigation option |
| 152 | if (customID) { |
| 153 | |
| 154 | google.maps.event.addListener(marker, "click", function () { |
| 155 | |
| 156 | if ($carouselWidgets.length > 0) { |
| 157 | $carouselWidgets.map(function (index, item) { |
| 158 | var carouselSettings = $(item).data("settings"); |
| 159 | |
| 160 | if (carouselSettings.navigation) { |
| 161 | |
| 162 | if (-1 != carouselSettings.navigation.indexOf("#" + customID)) { |
| 163 | var slideIndex = carouselSettings.navigation.indexOf("#" + customID); |
| 164 | $(item).find(".premium-carousel-inner").slick("slickGoTo", slideIndex); |
| 165 | } |
| 166 | } |
| 167 | }) |
| 168 | |
| 169 | } |
| 170 | |
| 171 | }); |
| 172 | } |
| 173 | |
| 174 | // if marker contains HTML, add it to an infoWindow |
| 175 | if (pin.find(".premium-maps-info-title").html() || pin.find(".premium-maps-info-desc").html()) { |
| 176 | // create info window |
| 177 | |
| 178 | var infowindow = new google.maps.InfoWindow({ |
| 179 | maxWidth: maxWidth, |
| 180 | content: pin.html() |
| 181 | }); |
| 182 | |
| 183 | //Opened by default. |
| 184 | if (autoOpen || isActive) { |
| 185 | infowindow.open(map, marker); |
| 186 | } |
| 187 | |
| 188 | //Open on hover. |
| 189 | if (hoverOpen) { |
| 190 | |
| 191 | var isTouch = checkTouchDevice(), |
| 192 | triggerEvent = isTouch ? "click" : "mouseover"; |
| 193 | |
| 194 | google.maps.event.addListener(marker, triggerEvent, function () { |
| 195 | |
| 196 | if (activeInfoWindow) |
| 197 | activeInfoWindow.close(); |
| 198 | |
| 199 | activeInfoWindow = infowindow; |
| 200 | |
| 201 | infowindow.open(map, marker); |
| 202 | |
| 203 | }); |
| 204 | |
| 205 | //Close on mouse out. |
| 206 | if (hoverClose && !isTouch) { |
| 207 | google.maps.event.addListener(marker, "mouseout", function () { |
| 208 | infowindow.close(map, marker); |
| 209 | }); |
| 210 | } |
| 211 | } |
| 212 | |
| 213 | // Show info window when marker is clicked |
| 214 | google.maps.event.addListener(marker, "click", function () { |
| 215 | |
| 216 | if (activeInfoWindow) |
| 217 | activeInfoWindow.close(); |
| 218 | |
| 219 | //Used with Carousel Custom Navigation option |
| 220 | if (customID) { |
| 221 | |
| 222 | if ($carouselWidgets.length) { |
| 223 | $carouselWidgets.map(function (index, item) { |
| 224 | var carouselSettings = $(item).data("settings"); |
| 225 | |
| 226 | if (carouselSettings.navigation) { |
| 227 | if (-1 != carouselSettings.navigation.indexOf("#" + customID)) { |
| 228 | var slideIndex = carouselSettings.navigation.indexOf("#" + customID); |
| 229 | $carouselWidgets.find(".premium-carousel-inner").slick("slickGoTo", slideIndex); |
| 230 | } |
| 231 | } |
| 232 | }) |
| 233 | |
| 234 | } |
| 235 | |
| 236 | } |
| 237 | |
| 238 | activeInfoWindow = infowindow; |
| 239 | |
| 240 | infowindow.open(map, marker); |
| 241 | |
| 242 | }); |
| 243 | |
| 244 | infowindow.addListener('visible', function () { |
| 245 | |
| 246 | if (pin.find('.advanced-pin').length > 0) |
| 247 | $('.gm-ui-hover-effect').remove(); |
| 248 | |
| 249 | $scope.find('.premium-maps-info-close').on('click', function () { |
| 250 | infowindow.close(map, marker); |
| 251 | }) |
| 252 | }) |
| 253 | |
| 254 | |
| 255 | if ($scope.hasClass('pa-maps-carousel')) |
| 256 | premiumMapPopups.push(infowindow); |
| 257 | |
| 258 | |
| 259 | } |
| 260 | |
| 261 | // add to array |
| 262 | map.markers.push(marker); |
| 263 | premiumMapMarkers.push(marker); |
| 264 | |
| 265 | } |
| 266 | |
| 267 | function checkTouchDevice() { |
| 268 | |
| 269 | var currentDevice = elementorFrontend.getCurrentDeviceMode(); |
| 270 | |
| 271 | return !['desktop', 'widescreen', 'laptop'].includes(currentDevice); |
| 272 | |
| 273 | } |
| 274 | |
| 275 | }; |
| 276 | |
| 277 | elementorFrontend.hooks.addAction("frontend/element_ready/premium-addon-maps.default", PremiumMapsHandler); |
| 278 | |
| 279 | }); |
| 280 |