79661643

Date: 2025-06-11 08:45:18
Score: 2.5
Natty:
Report link

I finally rebuild it with a different working example using the import-method and changed the way the position is added, without the Geocoder.

Also, in case it might be useful for someone: The map was so terribly slow because it used FontAwesome-Icons, which resulted in strange JS-errors (while being displayed correctly) - as soon as I replaced them with static SVG, it was fine.

One thing though that is being ignored without an error: The MarkerClusterer-Options don't work (minimumClusterSize: 10, maxZoom: 15) - any ideas how to do this correctly, or is it just broken?


<div id="map"></div>
<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: "", v: "weekly"});</script>
<script type="module">
import { MarkerClusterer } from "https://cdn.skypack.dev/@googlemaps/[email protected]";
async function initMap() {
  const { Map } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
  const center = { lat: 50.5459719, lng: 10.0703129 };
  const map = new Map(document.getElementById("map"), {
    zoom: 6.6,
    center,
    mapId: "4504f8b37365c3d0",
  });
  const labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
  const markers = properties.map((property, i) => {
    const label = labels[i % labels.length];
    const marker = new google.maps.marker.AdvancedMarkerElement({
      position: new google.maps.LatLng(property.lat,property.lng),
      content: buildContent(property),
      title: property.name,
    });
    marker.addListener("gmp-click", () => {
        toggleHighlight(marker, property);
    });
    return marker;
  });

  const markerCluster = new MarkerClusterer({ markers:markers, map:map, options:{minimumClusterSize: 10, maxZoom: 15} });

}
Reasons:
  • Blacklisted phrase (1): any ideas
  • Long answer (-1):
  • Has code block (-0.5):
  • Ends in question mark (2):
  • Self-answer (0.5):
  • Low reputation (0.5):
Posted by: lichtpixel