The existing code, as follows does not loop through gmp-map html elements to add markers, It merely adds a marker to one of them. A loop is needed, either in the html itself or via javascript.:
<body>
<cfoutput>
<gmp-map
center="#vLat#,#vLng#"
zoom="10"
map-id="DEMO_MAP_ID"
style="height: 400px"
>
<cfloop query="qNearbyTradies">
<gmp-advanced-marker
position="#lat#,#lng#"
title="#company_name# - #sublocality#, #locality#"
gmpClickable=true
></gmp-advanced-marker>
</cfloop>
</cfoutput>
</body>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap&key=[KEY]&libraries=maps,marker&v=beta" async defer></script>
<script>
async function initMap() {
// I assume a javascript loop would begin here somewhere
const m = document.querySelector("gmp-advanced-marker");
m.addListener("click", ({ domEvent, latLng }) => {
const { target } = domEvent;
const infoWindow = new google.maps.InfoWindow;
infoWindow.close();
infoWindow.setContent(m.title);
infoWindow.open(m.map, m);
});
}
window.initMap = initMap;
</script>
I've written some code that generates an array of companies in javascript, but after deciding to generate the map with html, I now already have a loop in the html code and it would make sense to generate all the clickable events within that loop if possible. Looking for pointers on how do achieve that.
Answer
<cfoutput>
<gmp-map
id="marker-click-event-example"
center="-36.8761279,174.83046"
zoom="8"
map-id="DEMO_MAP_ID"
>
<cfloop query="qNearbyTradies">
<gmp-advanced-marker
position="#lat#,#lng#"
title="#company_name# - #sublocality#, #locality#"
gmp-clickable
></gmp-advanced-marker>
</cfloop>
</gmp-map>
</cfoutput>
<!-- prettier-ignore -->
<script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
({key: "[KEY", v: "beta"});</script>
<script>
// This example adds a map using web components.
async function initMap() {
const { Map } = await google.maps.importLibrary("maps");
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
console.log("Maps JavaScript API loaded.");
const advancedMarkers = document.querySelectorAll(
"#marker-click-event-example gmp-advanced-marker",
);
for (const advancedMarker of advancedMarkers) {
customElements.whenDefined(advancedMarker.localName).then(async () => {
advancedMarker.addEventListener("gmp-click", async () => {
const infoWindow = new google.maps.InfoWindow({
//@ts-ignore
content: advancedMarker.title,
});
infoWindow.open({
//@ts-ignore
anchor: advancedMarker,
});
});
});
}
}
initMap();