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,
}),
};