(function($){
var map;
var markersArray=[];
var currentInfoWindow=null;
var currentMarker=null;
var mapLoaded=false;
window.initMap=async function (){
const { Map }=await google.maps.importLibrary("maps");
const { AdvancedMarkerElement }=await google.maps.importLibrary("marker");
const mapEl=document.getElementById("locations-acf-map");
if(!mapEl) return;
const bounds=new google.maps.LatLngBounds();
const locations=JSON.parse(document.getElementById("pjListingLocationsLatLng").innerHTML
);
const map=new Map(mapEl, {
disableDefaultUI: true,
zoom: 8,
mapId: "ef058da5131c63b69fa9f37a",
mapTypeId: "hybrid",
tilt: 0,
heading: 0 
});
const infoWindow=new google.maps.InfoWindow();
markersArray=[];
locations.forEach((position)=> {
const latLng={ lat: position.lat, lng: position.lng };
const marker=new AdvancedMarkerElement({
map,
position: latLng,
title: position.name
});
marker.index=position.idx;
markersArray.push(marker);
bounds.extend(latLng);
marker.element.addEventListener("click", ()=> {
const html=document.getElementById("location-marker-" + marker.index
).innerHTML;
infoWindow.setContent(html);
infoWindow.open({
anchor: marker,
map
});
map.setCenter(latLng);
});
});
map.fitBounds(bounds);
google.maps.event.addListenerOnce(map, "idle", ()=> {
map.setZoom(16);
});
};
window.initMap_Backup=function($el){
var $markers=$el.find('.marker');
var mapArgs={
zoom: $el.data('zoom')||16,
mapTypeId: google.maps.MapTypeId.SATELLITE,
disableDefaultUI: true
};
var map=new google.maps.Map($el[0], mapArgs);
map.markers=[];
google.maps.event.addListenerOnce(map, 'idle', function(){
$markers.each(function(){
initMarker($(this), map);
});
centerMap(map);
});
return map;
};
function initMarker($marker, map){
var latLng={
lat: parseFloat($marker.data('lat')),
lng: parseFloat($marker.data('lng'))
};
var icon1=$marker.attr('data-img1');
var icon2=$marker.attr('data-img2');
var labels=$marker.attr('data-label');
const iconImg=document.createElement("img");
iconImg.src=icon1;
iconImg.className="marker-icon";
const labelSpan=document.createElement("span");
labelSpan.textContent=labels;
labelSpan.style.fontWeight="bold";
const wrapper=document.createElement("div");
wrapper.classList.add("marker-wrapper");
wrapper.appendChild(iconImg);
wrapper.appendChild(labelSpan);
const marker=new google.maps.marker.AdvancedMarkerElement({
map,
position: latLng,
content: wrapper
});
const infoWindow=new google.maps.InfoWindow({
content: $marker.html()
});
wrapper.addEventListener("click", ()=> {
if(currentInfoWindow&&currentInfoWindow!==infoWindow){
currentInfoWindow.close();
if(currentMarker){
const oldImg=currentMarker.content.querySelector("img");
const oldLbl=currentMarker.content.querySelector("span");
oldImg.src=icon1;
oldLbl.style.color="#000";
}}
infoWindow.open({
anchor: marker,
map
});
iconImg.src=icon2;
labelSpan.style.color="#fff";
currentInfoWindow=infoWindow;
currentMarker=marker;
});
map.markers.push(marker);
return marker;
}
function centerMap(map){
var bounds=new google.maps.LatLngBounds();
map.markers.forEach(marker=> bounds.extend(marker.position));
map.setCenter(bounds.getCenter());
map.setZoom(16);
}})(jQuery);