GoogleMaps: Markierungscluster
Veröffentlichungsdatum: 20. April 2023
Änderungsdatum: 21. April 2023
MarkerCluster Markierungscluster Render-Objekt Marker gruppieren GoogleMaps wGoogleClusterRenderer
Über die GoogleMap können nun individuelle Markierungscluster definiert werden.
Schritt 1: Externe Anwendung für Markierungscluster einbinden
Um auf die Funktionen der Makrierungscluster (markerClusterer) zugreifen zu können, müssen diese in die Seite eingebunden werden. Die Syntax zum Einbinden der aktuellen CDN-Datei steht auf der GoogleMapsPlattform unter dem Punkt Markierungscluster (markerClusterer) zur Verfügung.
Möchten Sie Datei nicht via CDN laden, so können Sie diese in Ihrem Projekt unter
/[[Ihr-Layout-Projekt]]/wGlobal/layout/scripts/markerclusterer.js speichern. Die Datei wird beim Laden der GoogleMap automatisch in die Seite eingebunden.
In jedem Fall sollten Sie beim Verwenden von externen Google-Anwendungen die Lizenzbedingungen und ggf. die Regeln der Datenschutzgrundverordnung (DSGVO) berücksichtigen.
Schritt 2: Cluster aktivieren und definieren
Aktivieren Sie innerhalb des Standortes die Einstellung "Marker-Clustering nutzen, um Marker zu gruppieren".
Ist nichts weiter angegeben, so wird eine Standard-Darstellung verwendet.
Für eigene Cluster-Darstellungen definieren Sie ein globales render-Objekt wGoogleClusterRenderer.
Nutzen Sie dazu das Javscript-Quelltextelement auf der Seite der betreffenden Google-Map bzw. stellen Sie sicher, dass die
erforderlichen JS-Bibliotheken auf der Seite zur Verfügung stehen.
Beispiel: Auszug JS-Code render-Objekt
var wGoogleClusterRenderer = { render: ({ count, position }) => new google.maps.Marker({ label: { text: String(count), color: "black", fontWeight: "700", fontSize: "10px"}, icon: { url: `/[Ihr-Layout-Projekt]/wGlobal/layout/images/markerclusterer/clusterer.svg`, scaledSize: new google.maps.Size(40, 40), }, position, // adjust zIndex to be above other markers zIndex: Number(google.maps.Marker.MAX_ZINDEX) + count, }), };