(()=>{class e{constructor(){this.instances=new Map,this.defaults=null,this.ready=!1,"undefined"!=typeof google&&google.maps?this.init():document.addEventListener("googleMapsReady",()=>this.init())}init(){this.ready=!0,this.defaults=window.jvbMapDefaults||{lat:53.5461,lng:-113.4938,zoom:14},document.querySelectorAll("[data-location-field-init]").forEach(e=>{try{const t=e.dataset.locationFieldInit;if(!t||""===t.trim())return void console.warn("Empty location field init data for field:",e);const o=JSON.parse(t);if(!o.fieldId)return void console.error("Missing fieldId in location field config");this.createLocationField(o)}catch(t){console.error("Failed to parse location field config:",t),console.error("Data attribute value:",e.dataset.locationFieldInit),console.error("Field element:",e)}})}createLocationField(e){if(!this.ready)return console.warn("Google Maps not ready yet"),setTimeout(()=>this.createLocationField(e),100),null;const{fieldId:t,initialCoords:o,onLocationSelected:n}=e,s=document.querySelector(`[data-field="${t}"]`);if(!s)return console.error("Field container not found:",t),null;const a=s.querySelector(".location-map");if(!a)return console.error("Required elements not found in field:",t),null;const l={center:o||this.defaults,zoom:this.defaults.zoom,mapId:this.defaults.mapId,styles:this.getMapStyles(),disableDefaultUI:!0},r=new google.maps.Map(a,l);let i=null;o&&o.lat&&o.lng&&(i=this.createMarker(r,o)),this.setupAutocomplete(s,r,i,n);const c={map:r,marker:i,fieldContainer:s,config:e};return this.instances.set(t,c),c}setupAutocomplete(e,t,o,n){console.log("Setting up autocomplete");const s=new google.maps.places.PlaceAutocompleteElement({includedRegionCodes:["ca"]});e.querySelector(".autocomplete-wrapper").append(s);let a=e.querySelector('[name="current_location[street]"]');return a&&""!==a.value&&(console.log("Saved value: ",a.value),s.value=a.value),s.addEventListener("gmp-select",async({placePrediction:s})=>{const a=s.toPlace();await a.fetchFields({fields:["displayName","addressComponents","formattedAddress","location"]}),console.log("Display Name:",a.displayName),console.log("Formatted Address:",a.formattedAddress),console.log("Address Components:",a.addressComponents),console.log("Location:",a.location),a.viewport?t.fitBounds(a.viewport):(t.setCenter(a.location),t.setZoom(17));const l={lat:a.location.lat(),lng:a.location.lng(),address:a.displayName||a.formattedAddress||"",components:this.parseAddressComponents(a.addressComponents)};console.log("Grabbed Location: ",l),t.setCenter(a.location),o?o.position=a.location:o=this.createMarker(t,a.location),console.log("Updating field inputs"),this.updateFieldInputs(e,l),this.updateMapLinks(e,l.lat,l.lng),n&&n(l),e.dispatchEvent(new Event("change",{bubbles:!0}))}),o&&o.addListener("dragend",t=>{const o={lat:t.latLng.lat(),lng:t.latLng.lng()};this.reverseGeocode(o.lat,o.lng,t=>{if(t){const a={...o,address:t.formatted_address,components:t.components};s.value=a.address,this.updateFieldInputs(e,a),this.updateMapLinks(e,a.lat,a.lng),n&&n(a)}})}),s}createMarker(e,t){return google.maps.marker&&google.maps.marker.AdvancedMarkerElement?new google.maps.marker.AdvancedMarkerElement({map:e,position:t,gmpDraggable:!0}):new google.maps.Marker({position:t,map:e,draggable:!0})}parseAddressComponents(e){const t={street:"",city:"",province:"",country:"",postal_code:""};if(!Array.isArray(e))return t;let o="",n="";return console.log("Attempting to parse address components..."),e.forEach(e=>{const s=e.types||[];console.log(e),console.log(s);const a=e.longText||e.long_name||"",l=e.shortText||e.short_name||"";s.includes("street_number")&&(o=a),s.includes("route")&&(n=a),s.includes("locality")&&(t.city=a),s.includes("administrative_area_level_1")&&(t.province=l),s.includes("country")&&(t.country=l),s.includes("postal_code")&&(t.postal_code=a)}),t.street=`${o} ${n}`.trim(),console.log("Final result: ",t),t}updateFieldInputs(e,t){const o=e.querySelector('[data-location-field="address"]'),n=e.querySelector('[data-location-field="lat"]'),s=e.querySelector('[data-location-field="lng"]');console.log("Address Input:",o),console.log("Latitude Input:",n),console.log("lngInput Input:",s),o&&(o.value=t.address||""),n&&(n.value=t.lat||""),s&&(s.value=t.lng||""),console.log("Components: ",t.components),t.components&&Object.keys(t.components).forEach(o=>{const n=e.querySelector(`[data-location-field="${o}"]`);console.log("Component input: ",n),n&&(n.value=t.components[o]||"")}),e.querySelectorAll('input[type="hidden"]').forEach(e=>{e.dispatchEvent(new Event("change",{bubbles:!0}))})}updateMapLinks(e,t,o){const n=e.querySelector(".location-links");if(n){const e=n.querySelector(".google-maps-link"),s=n.querySelector(".apple-maps-link");e&&(e.href=`https://www.google.com/maps/search/?api=1&query=${t},${o}`),s&&(s.href=`https://maps.apple.com/?ll=${t},${o}`)}else{const n=e.querySelector(".location-preview");if(n){const e=document.createElement("div");e.className="location-links",e.innerHTML=`\n\t\t\t\t\t<a href="https://www.google.com/maps/search/?api=1&query=${t},${o}"\n\t\t\t\t\t target="_blank" class="google-maps-link">\n\t\t\t\t\t\t<span>View in Google Maps</span>\n\t\t\t\t\t</a>\n\t\t\t\t\t<a href="https://maps.apple.com/?ll=${t},${o}"\n\t\t\t\t\t target="_blank" class="apple-maps-link">\n\t\t\t\t\t\t<span>View in Apple Maps</span>\n\t\t\t\t\t</a>\n\t\t\t\t`,n.appendChild(e)}}}createDisplayMap(e,t){if(!this.ready)return null;const o=document.getElementById(e);if(!o)return null;const n={center:{lat:t.lat,lng:t.lng},zoom:t.zoom||this.defaults.zoom,mapId:this.defaults.mapId,styles:this.getMapStyles(),disableDefaultUI:!t.interactive,gestureHandling:t.interactive?"auto":"none"},s=new google.maps.Map(o,n);if(t.show_marker){const e=this.createMarker(s,{lat:t.lat,lng:t.lng});if(t.show_info_window&&t.info_content){const o=new google.maps.InfoWindow({content:`<div class="map-info-window">${t.info_content}</div>`});e.addListener("click",()=>{o.open(s,e)}),!1!==t.auto_open&&setTimeout(()=>o.open(s,e),500)}}return this.instances.set(e,{map:s,config:t}),s}reverseGeocode(e,t,o){(new google.maps.Geocoder).geocode({location:{lat:e,lng:t}},(e,t)=>{if("OK"===t&&e[0]){const t={formatted_address:e[0].formatted_address,components:this.parseAddressComponents(e[0].address_components)};o(t)}else o(null)})}getMapStyles(){return[{elementType:"geometry",stylers:[{color:"#f5f5f5"}]},{elementType:"labels.text.fill",stylers:[{color:"#616161"}]},{elementType:"labels.text.stroke",stylers:[{color:"#f5f5f5"}]},{featureType:"road",elementType:"geometry",stylers:[{color:"#ffffff"}]},{featureType:"water",elementType:"geometry",stylers:[{color:"#c9c9c9"}]},{featureType:"poi.business",stylers:[{visibility:"off"}]},{featureType:"transit",elementType:"labels.icon",stylers:[{visibility:"off"}]}]}getInstance(e){return this.instances.get(e)}destroyInstance(e){const t=this.instances.get(e);t&&(t.map&&google.maps.event.clearInstanceListeners(t.map),this.instances.delete(e))}}document.addEventListener("DOMContentLoaded",()=>{window.jvbMaps||(window.jvbMaps=new e)})})();
|
