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