Loop and add multiple Google Maps markers on an html map

Loop and add multiple Google Maps markers on an html map

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();

Enjoyed this article?

Check out more content on our blog or follow us on social media.

Browse more articles