https://www.postie.co.nz/map-js/1749088268

1(()=>{const StoreMap={state:{map:null,markers:[],infoWindows:[],stores:[],},async init(){const{Map}=await google.maps.importLibrary('maps');const{AdvancedMarkerElement}=await google.maps.importLibrary('marker');this.state.stores=Array.isArray(window.ga_stores)?window.ga_stores:Object.values(window.ga_stores);this.state.map=new Map(document.getElementById('map'),{zoom:window.gi_zoom,center:window.go_center,draggable:!0,mapId:'postie-store-locations',});this.createMarkers();this.createButtonEvents(!0)},async postData(url){try{const response=await fetch(url,{method:'POST',headers:{'Accept':'application/json','X-Requested-With':'XMLHttpRequest',},credentials:'same-origin',});if(!response.ok){throw new Error(`HTTP error! Status: ${response.status}`)}
2const data=await response.json();if(data.la_jsvariables){this.state.stores=Object.values(data.la_stores);this.state.map.setCenter(JSON.parse(data.la_jsvariables.go_center));this.state.map.setZoom(data.la_jsvariables.gi_zoom);this.clearMarkers();this.createMarkers()}
3if(data.ls_storegrouped){document.getElementById('storegroup').innerHTML=data.ls_storegrouped;this.createButtonEvents(!1)}
4window.history.pushState(null,document.title,url)}catch(error){console.error('Fetch error in postData:',error)}},clearMarkers(){Object.keys(this.state.markers).forEach((key)=>{const marker=this.state.markers[key];if(marker){marker.setMap(null);this.state.markers[key]=null}})},clearInfoWindows(){Object.values(this.state.infoWindows).forEach((infoWindow)=>{infoWindow.close()})},createMarkers(){const{map}=this.state;this.state.stores.forEach((store)=>{const{name,address,phone,monday,tuesday,wednesday,thursday,friday,saturday,sunday,holidayhours,latitude,longitude,urlname,storeid,}=store;const holidayhoursHtml=holidayhours?`<tr class="u-bold"><td>Public Holiday Hours&nbsp</td></tr>
5                    <tr class="locations-christmas-hours"><td>${holidayhours}</td></tr>`:'';const icon=document.createElement('img');icon.src='/content/images/marker1.png';const contentString=`
6                <div class="storeInfo">
7                    <p class="red storeName u-bold">${name}</p>
8                    <p>${address}</p>
9                    <span class="u-bold">Phone: </span>${phone}<br><br>
10                    <table class="mapInfoTable">
11                    <thead><tr><th>Store Hours</th><th></th></tr></thead>
12                    <tbody>
13                        <tr><td>Monday</td><td>${monday}</td></tr>
14                        <tr><td>Tuesday</td><td>${tuesday}</td></tr>
15                        <tr><td>Wednesday</td><td>${wednesday}</td></tr>
16                        <tr><td>Thursday</td><td>${thursday}</td></tr>
17                        <tr><td>Friday</td><td>${friday}</td></tr>
18                        <tr><td>Saturday</td><td>${saturday}</td></tr>
19                        <tr><td>Sunday</td><td>${sunday}</td></tr>
20                        ${holidayhoursHtml}
21                    </tbody>
22                    </table>
23                </div>`;const infoWindow=new google.maps.InfoWindow({content:contentString,ariaLabel:'Store Info',});const marker=new google.maps.marker.AdvancedMarkerElement({map,content:icon,position:{lat:parseFloat(latitude),lng:parseFloat(longitude)},title:urlname,});marker.addListener('gmp-click',()=>{this.clearInfoWindows();infoWindow.open({anchor:marker,map})});this.state.markers[storeid]=marker;this.state.infoWindows[storeid]=infoWindow})},createButtonEvents(initialCreate=!1){if(initialCreate&&document.querySelector('#storegroup')){document.querySelector('.j-searchNear').addEventListener('click',()=>{this.postData('/stores')});document.querySelector('.j-searchAll').addEventListener('click',()=>{this.postData('/stores/all')});document.querySelector('.j-SearchBtn').addEventListener('click',(e)=>{e.preventDefault();const input=document.querySelector('#j-search');if(input.value)this.postData('/stores/s/'+input.value);});document.querySelector('.j-region').addEventListener('change',(e)=>{this.postData('/stores/r/'+e.target.value)})}
24document.querySelectorAll('.j-storehour').forEach((button)=>{button.addEventListener('click',(e)=>{const storeId=e.target.dataset.id;const marker=this.state.markers[storeId];this.state.map.setCenter(marker.position);this.state.map.setZoom(17);this.clearInfoWindows();this.state.infoWindows[storeId].open({anchor:marker,map:this.state.map});const mapElement=document.querySelector('#map');const headerElement=document.querySelector('.site-header-wrapper');const offset=headerElement.offsetHeight;const elementPosition=mapElement.getBoundingClientRect().top+window.pageYOffset;const offsetPosition=elementPosition-offset;window.scrollTo({top:offsetPosition,behavior:'smooth',})})})},};window.initMap=()=>{StoreMap.init()}})()