Es kann losgehen!

Bevor Sie mit der Entwicklung beginnen, lesen Sie bitte unsere Entwicklerdokumentation.

Die Google Maps JavaScript API aktivieren

Zum Einstieg führen wir Sie durch die Google Developers Console, wo Sie vorab Folgendes tun müssen:

  1. Ein Projekt erstellen oder auswählen
  2. Die Google Maps JavaScript API und zugehörige Dienste aktivieren
  3. Zugehörige Schlüssel erstellen
Weiter

Marker-Clustering

Übersicht

In dieser Anleitung erfahren Sie, wie Sie Marker-Cluster verwenden, um eine große Anzahl von Markern auf einer Karte anzuzeigen. Sie können die Bibliothek MarkerClusterer in Kombination mit der Google Maps JavaScript API verwenden, um Marker, die sich in unmittelbarer Nähe zueinander befinden, in Clustern zu kombinieren und die Anzeige der Marker auf der Karte zu vereinfachen.

Sehen Sie sich die nachfolgende Karte an, um zu verstehen, wie Marker-Clustering funktioniert.

Die Zahl in einem Cluster gibt an, wie viele Marker dieser enthält. Wenn Sie einen beliebigen Ort mit einem Cluster vergrößern, wird die Zahl im Cluster immer kleiner und Sie fangen an, die einzelnen Marker auf der Karte zu sehen. Wird die Karte wieder verkleinert, werden die Marker erneut in Clustern zusammengefasst.

Im folgenden Beispiel wird der gesamte Code angezeigt, den Sie zum Erstellen dieser Karte benötigen.

function initMap() {

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: {lat: -28.024, lng: 140.887}
  });

  // Create an array of alphabetical characters used to label the markers.
  var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

  // Add some markers to the map.
  // Note: The code uses the JavaScript Array.prototype.map() method to
  // create an array of markers based on a given "locations" array.
  // The map() method here has nothing to do with the Google Maps API.
  var markers = locations.map(function(location, i) {
    return new google.maps.Marker({
      position: location,
      label: labels[i % labels.length]
    });
  });

  // Add a marker clusterer to manage the markers.
  var markerCluster = new MarkerClusterer(map, markers,
      {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
}
var locations = [
  {lat: -31.563910, lng: 147.154312},
  {lat: -33.718234, lng: 150.363181},
  {lat: -33.727111, lng: 150.371124},
  {lat: -33.848588, lng: 151.209834},
  {lat: -33.851702, lng: 151.216968},
  {lat: -34.671264, lng: 150.863657},
  {lat: -35.304724, lng: 148.662905},
  {lat: -36.817685, lng: 175.699196},
  {lat: -36.828611, lng: 175.790222},
  {lat: -37.750000, lng: 145.116667},
  {lat: -37.759859, lng: 145.128708},
  {lat: -37.765015, lng: 145.133858},
  {lat: -37.770104, lng: 145.143299},
  {lat: -37.773700, lng: 145.145187},
  {lat: -37.774785, lng: 145.137978},
  {lat: -37.819616, lng: 144.968119},
  {lat: -38.330766, lng: 144.695692},
  {lat: -39.927193, lng: 175.053218},
  {lat: -41.330162, lng: 174.865694},
  {lat: -42.734358, lng: 147.439506},
  {lat: -42.734358, lng: 147.501315},
  {lat: -42.735258, lng: 147.438000},
  {lat: -43.999792, lng: 170.463352}
]
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>


Probieren Sie es selbst aus

Bewegen Sie die Maus oben rechts über den Codeblock, um den Code zu kopieren, oder öffnen Sie ihn in JSFiddle.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Marker Clustering</title>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>

      function initMap() {

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 3,
          center: {lat: -28.024, lng: 140.887}
        });

        // Create an array of alphabetical characters used to label the markers.
        var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

        // Add some markers to the map.
        // Note: The code uses the JavaScript Array.prototype.map() method to
        // create an array of markers based on a given "locations" array.
        // The map() method here has nothing to do with the Google Maps API.
        var markers = locations.map(function(location, i) {
          return new google.maps.Marker({
            position: location,
            label: labels[i % labels.length]
          });
        });

        // Add a marker clusterer to manage the markers.
        var markerCluster = new MarkerClusterer(map, markers,
            {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
      }
      var locations = [
        {lat: -31.563910, lng: 147.154312},
        {lat: -33.718234, lng: 150.363181},
        {lat: -33.727111, lng: 150.371124},
        {lat: -33.848588, lng: 151.209834},
        {lat: -33.851702, lng: 151.216968},
        {lat: -34.671264, lng: 150.863657},
        {lat: -35.304724, lng: 148.662905},
        {lat: -36.817685, lng: 175.699196},
        {lat: -36.828611, lng: 175.790222},
        {lat: -37.750000, lng: 145.116667},
        {lat: -37.759859, lng: 145.128708},
        {lat: -37.765015, lng: 145.133858},
        {lat: -37.770104, lng: 145.143299},
        {lat: -37.773700, lng: 145.145187},
        {lat: -37.774785, lng: 145.137978},
        {lat: -37.819616, lng: 144.968119},
        {lat: -38.330766, lng: 144.695692},
        {lat: -39.927193, lng: 175.053218},
        {lat: -41.330162, lng: 174.865694},
        {lat: -42.734358, lng: 147.439506},
        {lat: -42.734358, lng: 147.501315},
        {lat: -42.735258, lng: 147.438000},
        {lat: -43.999792, lng: 170.463352}
      ]
    </script>
    <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

In einem einfachen Beispiel werden in dieser Anleitung mehrere Marker der Karte mithilfe des Arrays locations hinzugefügt. Sie können jedoch auch andere Quellen verwenden, um Marker für Ihre Karte zu erhalten. Weitere Informationen finden Sie im Leitfaden zum Erstellen von Markern.

Wissenswertes zu Marker-Clustering

Die Bibliothek MarkerClusterer nutzt die rasterbasierte Cluster-Technik, mit der die Karte in Quadrate einer bestimmten Größe (die Größe ändert sich je nach Vergrößerungsstufe) unterteilt wird und die Marker in jedem Rasterquadrat in Gruppen zusammengefasst werden. Ein Cluster wird an einem bestimmten Marker erstellt und Marker, die sich innerhalb der Grenzen des Clusters befinden, werden dem Cluster hinzugefügt. Dieser Prozess wird wiederholt, bis alle Marker den nächstgelegenen rasterbasierten Marker-Clustern basierend auf der Vergrößerungsstufe der Karte zugewiesen wurden.

Wenn sich Marker innerhalb der Grenzen von einem oder mehreren vorhandenen Clustern befinden, ermittelt die Maps JavaScript API den Abstand des Markers von jedem Cluster und fügt ihn dem nächstgelegenen Cluster hinzu.

Zum Anpassen der Cluster-Position können Sie eine Option MarkerClusterer festlegen, um den durchschnittlichen Abstand zwischen allen im Cluster enthaltenen Markern wiederzugeben. Außerdem können Sie die Option MarkerClusterer anpassen, um andere Parameter wie die Rastergröße, das Cluster-Symbol und den Cluster-Text zu ändern.

Hinzufügen eines Marker-Clusterers

Gehen Sie wie folgt vor, um einen Marker-Clusterer hinzuzufügen:

  1. Rufen Sie die Marker-Clustering-Bibliothek und die Bilder von GitHub ab und speichern Sie sie auf einem Server, auf den Ihre App zugreifen kann.
    Die JavaScript-Bibliothek und die Bilddateien für den MarkerClusterer sind im Google Maps-Repository auf GitHub verfügbar. Laden Sie die folgenden Dateien von GitHub in einen Speicherort herunter, auf den Ihre App zugreifen kann, bzw. kopieren Sie sie:

  2. Fügen Sie die Marker-Clustering-Bibliothek Ihrer Seite hinzu.

    Im Code dieser Anleitung wird mit dem nachfolgenden Skript der Speicherort der Bibliotheksdatei markerclusterer.js auf „https://developers.google.com“ angegeben.

    <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
    

    Ändern Sie den Pfad, um Ihren Speicherort der Datei anzugeben.


  3. Fügen Sie einen Marker-Clusterer in Ihrer App hinzu.

    Mit dem folgenden Code wird der Karte ein Marker-Clusterer hinzugefügt.

    var markerCluster = new MarkerClusterer(map, markers,
                {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
          }
    

    In diesem Beispiel wird das Array markers an den MarkerClusterer übergeben. Außerdem wird der Speicherort aller fünf Bilddateien im Parameter imagePath angegeben. Ersetzen Sie diesen durch den Pfad, in dem Sie diese Bilddateien gespeichert haben.

Weitere Infos

Komplexere Beispiele für das Marker-Clustering finden Sie im Google Maps-Repository auf GitHub.

Feedback geben zu...

Google Maps JavaScript API
Google Maps JavaScript API