GoogleMaps: Markierungscluster

Ü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,
  }),
};
FAQs
Wie können individuelle Markierungscluster in Google Maps verwendet werden?
Individuelle Markierungscluster können über die GoogleMap definiert werden. Dafür muss zunächst die MarkerClusterer-Funktion eingebunden und anschließend im Standort die Option „Marker-Clustering nutzen, um Marker zu gruppieren“ aktiviert werden.
Wie wird die MarkerClusterer-Funktion in eine Seite eingebunden?
Die aktuelle CDN-Datei kann gemäß der Google-Maps-Plattform-Dokumentation zum Thema Markierungscluster eingebunden werden. Alternativ kann die Datei lokal im Projekt unter <code class="codeInline">*/[[Ihr-Layout-Projekt]]/wGlobal/layout/scripts/markerclusterer.js</code> gespeichert werden. In diesem Fall wird sie beim Laden der GoogleMap automatisch eingebunden.
Was passiert, wenn für Markierungscluster keine eigene Darstellung definiert wird?
Wenn keine weiteren Angaben gemacht werden, wird automatisch eine Standard-Darstellung für die Markierungscluster verwendet.
Wie lässt sich eine eigene Darstellung für Cluster in Google Maps definieren?
Für eine individuelle Cluster-Darstellung muss ein globales Render-Objekt namens <code class="codeInline">wGoogleClusterRenderer</code> definiert werden. Dies kann über das JavaScript-Quelltextelement auf der Seite der betreffenden Google-Map erfolgen. Außerdem müssen die benötigten JavaScript-Bibliotheken auf der Seite verfügbar sein.
Welche Aufgabe hat das Render-Objekt <code class="codeInline">wGoogleClusterRenderer</code>?
Das Render-Objekt <code class="codeInline">wGoogleClusterRenderer</code> bestimmt, wie ein Cluster visuell dargestellt wird. Im Beispiel wird darüber ein <code class="codeInline">google.maps.Marker</code> erzeugt, der die Anzahl der gruppierten Marker als Text anzeigt und ein eigenes Icon verwendet.
Welche Eigenschaften enthält das Beispiel für ein benutzerdefiniertes Cluster-Rendering?
Das Beispiel definiert ein Label mit der Cluster-Anzahl, schwarzer Schriftfarbe, fetter Schrift und einer Schriftgröße von <code class="codeInline">10px</code>. Zusätzlich wird ein eigenes SVG-Icon über <code class="codeInline">clusterer.svg</code> mit einer Größe von <code class="codeInline">40 x 40</code> eingebunden. Der <code class="codeInline">zIndex</code> wird erhöht, damit der Cluster über anderen Markern liegt.
Wo sollte die JavaScript-Datei für MarkerClusterer gespeichert werden, wenn sie nicht per CDN geladen wird?
Wenn die Datei nicht über ein CDN geladen werden soll, kann sie im Projekt unter <code class="codeInline">*/[[Ihr-Layout-Projekt]]/wGlobal/layout/scripts/markerclusterer.js</code> abgelegt werden.
Was ist beim Einsatz externer Google-Anwendungen zu beachten?
Beim Verwenden externer Google-Anwendungen sollten die jeweiligen Lizenzbedingungen sowie gegebenenfalls die Anforderungen der Datenschutzgrundverordnung (DSGVO) berücksichtigt werden.