GoogleMaps: Markierungscluster

Navigation

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