{"version":3,"file":"stockist-map.js","sources":["../../src/js/widgets/stockist-map.js"],"sourcesContent":["import { Loader } from \"@googlemaps/js-api-loader\";\r\nimport { latLngToMiles, mapStyles } from \"../utils\";\r\nconst key = \"AIzaSyCtL_2M4QkpYHDOKGuGwORyyJRRtf4VMSM\";\r\n\r\nconst GMap = function () {\r\n // Location data\r\n this.locations = [];\r\n\r\n // Current map focal coords\r\n this.centerLatLng = { lat: null, lng: null };\r\n\r\n // Google map markers\r\n this.mapMarkers = [];\r\n\r\n // Selected via filtering / distance etc/\r\n this.filteredByTerm = [];\r\n this.filteredByTermAndDistance = [];\r\n\r\n // Google Map JS API\r\n this.googleMap = null;\r\n\r\n // Results elements wrapper (slide in)\r\n this.resultsWrapper = null;\r\n\r\n // Results elements container (holding results els list)\r\n this.resultsContainer = null;\r\n\r\n // Result elements\r\n this.results = [];\r\n\r\n const self = this;\r\n\r\n this.init = function () {\r\n self.mapMarkers.forEach(function (marker) {\r\n // Zoom to location and order details cards based on distance & expand selected\r\n marker.addListener(\"click\", function () {\r\n const markerPos = marker.getPosition();\r\n self.googleMap.setCenter(markerPos);\r\n self.centerLatLng = {\r\n lat: markerPos.lat(),\r\n lng: markerPos.lng(),\r\n };\r\n self.orderResultsByDistance(self.centerLatLng);\r\n self.googleMap.setZoom(16);\r\n\r\n self.resultsWrapper.classList.add(\"active\");\r\n\r\n self.toggleResult(marker.id);\r\n });\r\n });\r\n self.locations.forEach(function (location) {\r\n const resultEl = self.createResultElement(location);\r\n self.results.push(resultEl);\r\n self.resultsContainer.appendChild(resultEl);\r\n });\r\n };\r\n\r\n this.showResults = function () {\r\n self.orderResultsByDistance(self.centerLatLng);\r\n self.resultsWrapper.classList.add(\"active\");\r\n };\r\n\r\n this.hideResults = function () {\r\n self.resultsWrapper.classList.remove(\"active\");\r\n };\r\n\r\n // Create result element from pin, add GMap centering on click\r\n this.createResultElement = function (location) {\r\n const result = document.createElement(\"button\");\r\n result.type = \"button\";\r\n result.classList.add(\"js-mapResult\", \"map-result\");\r\n\r\n // Data attributes for ID\r\n result.dataset.id = location.id;\r\n\r\n const gmapPin = self.mapMarkers.find(function (m) {\r\n return `${m.id}` === `${location.id}`;\r\n });\r\n\r\n const directionsURL = `https://www.google.com/maps/dir/?api=1&destination=${location.latLng.lat},${location.latLng.lng}`;\r\n\r\n let detailsHtml = '';\r\n\r\n if (location.email && location.email !== '') {\r\n detailsHtml += `${location.email}`;\r\n }\r\n\r\n if (location.telephone && location.telephone !== '') {\r\n detailsHtml += `${location.telephone}`;\r\n }\r\n\r\n if (location.website && location.website !== '') {\r\n detailsHtml += `${location.website}`;\r\n }\r\n\r\n detailsHtml += `Download directions`;\r\n\r\n result.innerHTML = `\r\n ${location.title}\r\n ${location.address}\r\n