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