Diese Seite wurde von der Cloud Translation API übersetzt.

Karte in Ihre Website einbinden (JavaScript)

1. Vorbereitung

In diesem Codelab erfahren Sie alles, was Sie für die ersten Schritte mit der Google Maps Platform für das Web benötigen. Sie lernen alle Grundlagen, von der Einrichtung bis zum Laden der Maps JavaScript API, dem Anzeigen Ihrer ersten Karte, dem Arbeiten mit Markierungen und Markierungsclustern, dem Zeichnen auf der Karte und dem Verarbeiten von Nutzerinteraktionen.

Aufgaben

In diesem Codelab erstellen Sie eine einfache Webanwendung, die Folgendes ausführt:

Lädt die Maps JavaScript API
Zeigt eine Karte an, auf der Sydney, Australien, in der Mitte liegt.
Benutzerdefinierte Markierungen für beliebte Sehenswürdigkeiten in Sydney
Markierungscluster implementieren
Ermöglicht die Nutzerinteraktion, bei der die Karte neu zentriert und ein Kreis auf der Karte gezeichnet wird, wenn auf eine Markierung geklickt wird.

Lerninhalte

Erste Schritte mit der Google Maps Platform
Maps JavaScript API dynamisch über JavaScript-Code laden
Karte wird geladen
Markierungen, benutzerdefinierte Markierungen und Markierungscluster verwenden
Mit dem Ereignissystem der Maps JavaScript API für Nutzerinteraktionen arbeiten
Karte dynamisch steuern
Auf Karten zeichnen

2. Vorbereitung

Um dieses Codelab durchzuarbeiten, müssen Sie sich mit den folgenden Punkten vertraut machen. Wenn Sie bereits mit der Google Maps Platform vertraut sind, können Sie direkt zum Codelab springen.

Erforderliche Google Maps Platform-Produkte

In diesem Codelab verwenden Sie die folgenden Google Maps Platform-Produkte:

Maps JavaScript API
MarkerClustererPlus-Open-Source-Bibliothek für Markierungscluster

Weitere Anforderungen für dieses Codelab

Für dieses Codelab benötigen Sie die folgenden Konten, Dienste und Tools:

Ein Google Cloud Platform-Konto mit aktivierter Abrechnung
Ein Google Maps Platform API-Schlüssel, für den die Maps JavaScript API aktiviert ist
Grundkenntnisse in JavaScript, HTML und CSS
Node.js auf Ihrem Computer installiert
Ein Texteditor oder eine IDE Ihrer Wahl

Einstieg in die Google Maps Platform

Wenn Sie die Google Maps Platform noch nicht verwendet haben, folgen Sie der Anleitung für die ersten Schritte mit der Google Maps Platform oder sehen Sie sich die Playlist „Erste Schritte mit der Google Maps Platform“ an, um die folgenden Schritte auszuführen:

Erstellen Sie ein Rechnungskonto.
Projekt erstellen
Aktivieren Sie die APIs und SDKs der Google Maps Platform, die im vorherigen Abschnitt aufgeführt sind.
Generieren Sie einen API-Schlüssel.

3. Einrichtung

Google Maps Platform einrichten

Wenn Sie noch kein Google Cloud-Konto und kein Projekt mit aktivierter Abrechnung haben, lesen Sie bitte den Leitfaden Erste Schritte mit Google Maps Platform, um ein Rechnungskonto und ein Projekt zu erstellen.

Klicken Sie in der Cloud Console auf das Drop-down-Menü für das Projekt und wählen Sie das Projekt aus, das Sie für dieses Codelab verwenden möchten.

Aktivieren Sie die für dieses Codelab erforderlichen APIs und SDKs der Google Maps Platform im Google Cloud Marketplace. Folgen Sie dazu der Anleitung in diesem Video oder dieser Dokumentation.
Generieren Sie einen API-Schlüssel in der Cloud Console auf der Seite Anmeldedaten. Folgen Sie dazu dieser Anleitung oder dieser Dokumentation. Für alle Anfragen an die Google Maps Platform ist ein API-Schlüssel erforderlich.

Node.js-Einrichtung

Falls Sie die Laufzeitumgebung noch nicht haben, können Sie sie unter https://nodejs.org/ herunterladen und auf Ihrem Computer installieren.

Node.js wird mit dem npm-Paketmanager geliefert, den Sie zum Installieren von Abhängigkeiten für dieses Codelab benötigen.

Einrichtung von Projektstartvorlagen

Bevor Sie mit diesem Codelab beginnen, laden Sie die Starterprojektvorlage und den vollständigen Lösungscode herunter:

Laden Sie das GitHub-Repository für dieses Codelab unter https://github.com/googlecodelabs/maps-platform-101-js herunter oder forken Sie es.

Das Starterprojekt befindet sich im Verzeichnis /starter und enthält die grundlegende Dateistruktur, die Sie für das Codelab benötigen. Alle benötigten Dateien befinden sich im Verzeichnis /starter/src. 2. Führen Sie nach dem Herunterladen des Startprojekts npm install im Verzeichnis /starter aus. Dadurch werden alle erforderlichen Abhängigkeiten installiert, die in package.json aufgeführt sind. 3. Führen Sie nach der Installation der Abhängigkeiten npm start im Verzeichnis aus.

Das Starterprojekt ist so eingerichtet, dass Sie webpack-dev-server verwenden können. Damit wird der von Ihnen geschriebene Code lokal kompiliert und ausgeführt. Außerdem wird Ihre App im Browser automatisch neu geladen, wenn Sie Codeänderungen vornehmen.

Wenn Sie den vollständigen Lösungscode ausführen möchten, können Sie die oben beschriebenen Einrichtungsschritte im Verzeichnis /solution ausführen.

4. Maps JavaScript API laden

Bevor Sie beginnen, führen Sie die Schritte unter Einrichtung aus. Alles erledigt? Okay, es ist an der Zeit, Ihre erste Webanwendung mit der Google Maps Platform zu erstellen.

Die Grundlage für die Nutzung der Google Maps Platform für das Web ist die Maps JavaScript API. Diese API bietet eine JavaScript-Schnittstelle für die Nutzung aller Funktionen der Google Maps Platform, einschließlich der Karte, Markierungen, Zeichenwerkzeuge und anderer Google Maps Platform-Dienste wie Places.

Wenn Sie bereits Erfahrung mit der Maps JavaScript API haben, wissen Sie vielleicht, dass sie durch Einfügen eines script-Tags in eine HTML-Datei geladen wird:

    <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">

Das ist immer noch eine völlig gültige Methode zum Laden der API, aber in modernem JavaScript werden Abhängigkeiten normalerweise dynamisch aus dem Code eingebunden. Um das Äquivalent des script-Tags oben aus dem Code zu erreichen, verwenden Sie das Modul@googlemaps/js-api-loader. Das JS API-Ladeprogramm ist bereits in den Abhängigkeiten der package.json-Datei des Projekts enthalten und wurde daher installiert, als Sie npm install ausgeführt haben.

So verwenden Sie den JS API Loader:

Öffnen Sie /src/app.js. In dieser Datei werden Sie alle Aufgaben für dieses Codelab erledigen.
Importieren Sie die Klasse Loader aus @googlemaps/js-api-loader.

Fügen Sie oben in app.js Folgendes hinzu:
```
 import { Loader } from '@googlemaps/js-api-loader';
```
Erstellen Sie ein apiOptions-Objekt.

Für die Loader-Klasse ist ein JSON-Objekt erforderlich, das verschiedene Optionen zum Laden der Maps JavaScript API angibt, darunter Ihren Google Maps Platform-API-Schlüssel, die Version der API, die Sie laden möchten, und alle zusätzlichen Bibliotheken, die von der Maps JS API bereitgestellt werden und die Sie laden möchten. Für dieses Codelab müssen Sie nur den API-Schlüssel angeben, indem Sie Folgendes an app.js anhängen:
```
 const apiOptions = {
   apiKey: "YOUR API KEY"
 }
```
Erstellen Sie eine Instanz von Loader und übergeben Sie ihr Ihr apiOptions.
```
 const loader = new Loader(apiOptions);
```
Laden Sie die Maps JS API.

Rufen Sie load() für die Loader-Instanz auf, um die API zu laden. Das JS API-Ladeprogramm gibt ein Promise zurück, das aufgelöst wird, sobald die API geladen und einsatzbereit ist. Fügen Sie den folgenden Stub hinzu, um die API zu laden und das Promise zu verarbeiten:
```
 loader.load().then(() => {
   console.log('Maps JS API loaded');
 });
```

Wenn alles funktioniert, sollte die Anweisung console.log in der Browserkonsole angezeigt werden. In Chrome kann auf dieses zusätzliche Fenster über Ansicht -> Entwickler -> JavaScript-Konsole zugegriffen werden.

Zusammenfassend lässt sich sagen, dass Sie die Maps JavaScript API nun dynamisch aus Code geladen und die Callback-Funktion definiert haben, die ausgeführt wird, sobald die Maps JavaScript API geladen wurde.

Ihre app.js-Datei sollte in etwa so aussehen:

    import { Loader } from '@googlemaps/js-api-loader';

    const apiOptions = {
      apiKey: "YOUR API KEY"
    }

    const loader = new Loader(apiOptions);

    loader.load().then(() => {
      console.log('Maps JS API Loaded');
    });

Nachdem die Maps JavaScript API geladen wurde, laden Sie im nächsten Schritt die Karte.

5. Karte anzeigen

Es ist an der Zeit, Ihre erste Karte zu präsentieren.

Der am häufigsten verwendete Teil der Maps JavaScript API ist google.maps.Map. Mit dieser Klasse können wir Karteninstanzen erstellen und bearbeiten. Sehen Sie sich an, wie das funktioniert, indem Sie eine neue Funktion namens displayMap() erstellen.

Definieren Sie die Karteneinstellungen.

Die Maps JavaScript API unterstützt eine Vielzahl verschiedener Einstellungen für die Karte, aber nur zwei sind erforderlich:
- center: Hiermit werden der Breiten- und Längengrad für den Mittelpunkt der Karte festgelegt.
- zoom: Hiermit wird die anfängliche Zoomstufe der Karte festgelegt.
Mit dem folgenden Code wird die Karte auf Sydney, Australien, zentriert und die Zoomstufe 14 festgelegt. Das ist genau die richtige Zoomstufe, um das Stadtzentrum anzuzeigen.
```
 function displayMap() {
   const mapOptions = {
     center: { lat: -33.860664, lng: 151.208138 },
     zoom: 14
   };
 }
```
Rufen Sie das div ab, in das die Karte in das DOM eingefügt werden soll.

Bevor Sie die Karte anzeigen können, müssen Sie der Maps JavaScript API mitteilen, wo auf der Seite sie angezeigt werden soll. Wenn Sie sich index.html kurz ansehen, sehen Sie, dass es bereits ein div gibt, das so aussieht:
```
 <div id="map"></div>
```
Damit die Maps JavaScript API weiß, wo die Karte eingefügt werden soll, verwenden Sie document.getElementById, um die DOM-Referenz abzurufen:
```
 const mapDiv = document.getElementById('map');
```
Erstellen Sie eine Instanz von google.maps.Map.

Wenn Sie die Maps JavaScript API auffordern möchten, eine neue Karte zu erstellen, die angezeigt werden kann, erstellen Sie eine Instanz von google.maps.Map und übergeben Sie mapDiv und mapOptions. Sie geben auch die Map-Instanz aus dieser Funktion zurück, damit Sie später mehr damit tun können:
```
 const map = new google.maps.Map(mapDiv, mapOptions);
 return map;
```
Zeige die Karte an.

Nachdem Sie die gesamte Logik zum Erstellen Ihrer Karteninstanz definiert haben, müssen Sie nur noch displayMap() aus dem JS API-Promise-Handler aufrufen, damit sie aufgerufen wird, sobald die Maps JavaScript API geladen ist:
```
 loader.then(() => {
   console.log('Maps JS API loaded');
   const map = displayMap();
 });
```

In Ihrem Browser sollte nun eine Karte von Sydney angezeigt werden:

Zusammenfassend haben Sie in diesem Schritt Anzeigeoptionen für die Karte definiert, eine neue Karteninstanz erstellt und sie in das DOM eingefügt.

Ihre displayMap()-Funktion sollte in etwa so aussehen:

function displayMap() {
  const mapOptions = {
    center: { lat: -33.860664, lng: 151.208138 },
    zoom: 14
  };
  const mapDiv = document.getElementById('map');
  const map = new google.maps.Map(mapDiv, mapOptions);
  return map;
}

6. Cloudbasiertes Gestalten von Karteninhalten (optional)

Sie können den Stil Ihrer Karte mit cloudbasiertem Gestalten von Karteninhalten anpassen.

Karten-ID erstellen

Wenn Sie noch keine Karten-ID mit einem zugehörigen Kartenstil erstellt haben, folgen Sie der Anleitung unter Karten-IDs, um die folgenden Schritte auszuführen:

Erstellen Sie eine Karten-ID.
Verknüpfen Sie eine Karten-ID mit einem Kartenstil.

Karten-ID zur App hinzufügen

Wenn Sie die erstellte Karten-ID verwenden möchten, ändern Sie die Funktion displayMap in der Datei app.js und übergeben Sie Ihre Karten-ID in der Eigenschaft mapId des Objekts mapOptions.

app.js

function displayMap() {
  const mapOptions = {
    center: { lat: -33.860664, lng: 151.208138 },
    zoom: 14,
    mapId: 'YOUR_MAP_ID'
  };
  const mapDiv = document.getElementById('map');
  return new google.maps.Map(mapDiv, mapOptions);
}

Danach sollte der ausgewählte Stil auf der Karte angezeigt werden.

7. Markierungen zur Karte hinzufügen

Entwickler nutzen die Maps JavaScript API für viele verschiedene Zwecke, aber das Platzieren von Markierungen auf der Karte ist definitiv am beliebtesten. Mit Markierungen können Sie bestimmte Punkte auf der Karte anzeigen. Sie sind ein gängiges UI-Element für die Verarbeitung von Nutzerinteraktionen. Wenn Sie Google Maps schon einmal verwendet haben, kennen Sie wahrscheinlich die Standardmarkierung, die so aussieht:

In diesem Schritt verwenden Sie google.maps.Marker, um Markierungen auf der Karte zu platzieren.

Definieren Sie ein Objekt für die Markerpositionen.

Erstellen Sie zuerst eine neue addMarkers()-Funktion und deklarieren Sie ein locations-Objekt mit den folgenden Breiten-/Längengradpunkten für beliebte Touristenattraktionen in Sydney.

Beachten Sie außerdem, dass Sie Ihre Map-Instanz an die Funktion übergeben müssen. Sie benötigen diese später, wenn Sie Ihre Markerinstanzen erstellen.

 function addMarkers(map) {
   const locations = {
     operaHouse: { lat: -33.8567844, lng: 151.213108 },
     tarongaZoo: { lat: -33.8472767, lng: 151.2188164 },
     manlyBeach: { lat: -33.8209738, lng: 151.2563253 },
     hyderPark: { lat: -33.8690081, lng: 151.2052393 },
     theRocks: { lat: -33.8587568, lng: 151.2058246 },
     circularQuay: { lat: -33.858761, lng: 151.2055688 },
     harbourBridge: { lat: -33.852228, lng: 151.2038374 },
     kingsCross: { lat: -33.8737375, lng: 151.222569 },
     botanicGardens: { lat: -33.864167, lng: 151.216387 },
     museumOfSydney: { lat: -33.8636005, lng: 151.2092542 },
     maritimeMuseum: { lat: -33.869395, lng: 151.198648 },
     kingStreetWharf: { lat: -33.8665445, lng: 151.1989808 },
     aquarium: { lat: -33.869627, lng: 151.202146 },
     darlingHarbour: { lat: -33.87488, lng: 151.1987113 },
     barangaroo: { lat: - 33.8605523, lng: 151.1972205 }
   }
 }

Erstellen Sie eine Instanz von google.maps.Marker für jede Markierung, die angezeigt werden soll.

Verwenden Sie den folgenden Code, um Ihre Markierungen zu erstellen. Iterieren Sie dazu mit einer for...in-Schleife durch das locations-Objekt, erstellen Sie eine Reihe von Optionen für die Darstellung der einzelnen Markierungen und erstellen Sie dann für jeden Ort eine Instanz von google.maps.Marker.

Beachten Sie das Attribut icon von markerOptions. Erinnern Sie sich noch an die Standard-Kartenmarkierung von vorhin? Wusstest du, dass du die Markierung auch durch ein beliebiges Bild ersetzen kannst? Genau das ist ab sofort möglich.

Mit der Eigenschaft icon können Sie den Pfad zu einer beliebigen Bilddatei angeben, die Sie als benutzerdefinierte Markierung verwenden möchten. Wenn Sie dieses Codelab mit unserer Projektvorlage begonnen haben, ist bereits ein Bild in /src/images enthalten.

Beachten Sie außerdem, dass Sie Ihre Markerinstanzen in einem Array speichern und aus der Funktion zurückgeben müssen, damit sie später verwendet werden können.
```
 const markers = [];
 for (const location in locations) {
   const markerOptions = {
     map: map,
     position: locations[location],
     icon: './img/custom_pin.png'
   }
   const marker = new google.maps.Marker(markerOptions);
   markers.push(marker);
 }
 return markers;
```
Marker anzeigen

Die Maps JavaScript API erstellt und zeigt automatisch eine Markierung an, wenn eine neue Instanz von google.maps.Marker erstellt wird. Sie müssen also nur noch Ihren JS API-Promise-Handler aktualisieren, um addMarkers() aufzurufen und Ihre Map-Instanz zu übergeben:
```
 loader.then(() => {
   console.log('Maps JS API loaded');
   const map = displayMap();
   const markers = addMarkers(map);
 });
```

Auf der Karte sollten jetzt benutzerdefinierte Markierungen zu sehen sein:

Zusammenfassend haben Sie in diesem Schritt eine Reihe von Markierungspositionen definiert und für jede Position eine Instanz von google.maps.Marker mit einem benutzerdefinierten Markierungssymbol erstellt.

Ihre addMarkers()-Funktion sollte in etwa so aussehen:

    function addMarkers(map) {
      const locations = {
        operaHouse: { lat: -33.8567844, lng: 151.213108 },
        tarongaZoo: { lat: -33.8472767, lng: 151.2188164 },
        manlyBeach: { lat: -33.8209738, lng: 151.2563253 },
        hyderPark: { lat: -33.8690081, lng: 151.2052393 },
        theRocks: { lat: -33.8587568, lng: 151.2058246 },
        circularQuay: { lat: -33.858761, lng: 151.2055688 },
        harbourBridge: { lat: -33.852228, lng: 151.2038374 },
        kingsCross: { lat: -33.8737375, lng: 151.222569 },
        botanicGardens: { lat: -33.864167, lng: 151.216387 },
        museumOfSydney: { lat: -33.8636005, lng: 151.2092542 },
        maritimeMuseum: { lat: -33.869395, lng: 151.198648 },
        kingStreetWharf: { lat: -33.8665445, lng: 151.1989808 },
        aquarium: { lat: -33.869627, lng: 151.202146 },
        darlingHarbour: { lat: -33.87488, lng: 151.1987113 },
        barangaroo: { lat: - 33.8605523, lng: 151.1972205 }
      }
      const markers = [];
      for (const location in locations) {
        const markerOptions = {
          map: map,
          position: locations[location],
          icon: './img/custom_pin.png'
        }
        const marker = new google.maps.Marker(markerOptions);
        markers.push(marker);
      }
      return markers;
    }

Im nächsten Schritt erfahren Sie, wie Sie die Nutzerfreundlichkeit von Markierungen mithilfe von Markierungsclustern verbessern können.

8. Marker-Clustering aktivieren

Wenn Sie viele Markierungen oder Markierungen verwenden, die sich in unmittelbarer Nähe zueinander befinden, kann es vorkommen, dass sie sich überlappen oder zu dicht beieinander angezeigt werden. Das kann die Nutzerfreundlichkeit beeinträchtigen. Nachdem Sie die Markierungen im letzten Schritt erstellt haben, ist Ihnen möglicherweise Folgendes aufgefallen:

Hier kommt das Markierungsclustering ins Spiel. Das Markierungs-Clustering ist eine weitere häufig implementierte Funktion, bei der nahe beieinander liegende Markierungen in einem einzelnen Symbol gruppiert werden, das sich je nach Zoomstufe ändert.

Beim Algorithmus für das Markierungs-Clustering wird der sichtbare Bereich der Karte in ein Raster unterteilt. Anschließend werden Symbole, die sich in derselben Zelle befinden, gruppiert. Glücklicherweise müssen Sie sich darum nicht kümmern, da das Google Maps Platform-Team eine hilfreiche Open-Source-Utility-Bibliothek namens MarkerClustererPlus erstellt hat, die alles automatisch für Sie erledigt. Den Quellcode für MarkerClustererPlus finden Sie auf GitHub.

Importieren Sie die MarkerCluster.

Für das Vorlagenprojekt für dieses Codelab ist die MarkerClustererPlus-Hilfsbibliothek bereits in den Abhängigkeiten enthalten, die in der Datei package.json deklariert sind. Sie haben sie also bereits installiert, als Sie zu Beginn dieses Codelabs npm install ausgeführt haben.

Fügen Sie oben in der Datei app.js Folgendes hinzu, um die Bibliothek zu importieren:
```
 import MarkerClusterer from '@google/markerclustererplus';
```
Erstellen Sie eine neue Instanz von MarkerClusterer.

Um Markierungs-Cluster zu erstellen, müssen Sie zwei Dinge tun: die Symbole für Ihre Markierungs-Cluster bereitstellen und eine neue Instanz von MarkerClusterer erstellen.

Deklarieren Sie zuerst ein Objekt, das den Pfad zu den Symbolen angibt, die Sie verwenden möchten. Im Vorlagenprojekt sind bereits einige Bilder in ./img/m gespeichert. Die Bilddateinamen sind fortlaufend nummeriert und haben dasselbe Präfix: m1.png, m2.png, m3.png usw.

Wenn Sie die Eigenschaft imagePath in den Optionen für den Marker-Clusterer festlegen, geben Sie einfach den Pfad und das Dateipräfix an. Der Marker-Clusterer verwendet dann automatisch alle Dateien mit diesem Präfix und hängt eine Nummer an.

Erstellen Sie als Nächstes eine neue Instanz von MarkerClusterer und übergeben Sie ihr die Instanz von Map, in der die Markierungscluster angezeigt werden sollen, sowie ein Array von Marker-Instanzen, die gruppiert werden sollen.
```
 function clusterMarkers(map, markers) {
   const clustererOptions = { imagePath: './img/m' }
   const markerCluster = new MarkerClusterer(map, markers, clustererOptions);
 }
```
Markierungs-Cluster anzeigen

Rufen Sie clusterMarkers() über den JS API-Promise-Handler auf. Die Markergruppen werden der Karte automatisch hinzugefügt, wenn die MarkerClusterer-Instanz im Funktionsaufruf erstellt wird.
```
 loader.then(() => {
   console.log('Maps JS API loaded');
   const map = displayMap();
   const markers = addMarkers(map);
   clusterMarkers(map, markers);
 });
```

Auf der Karte sollten jetzt einige Markierungscluster zu sehen sein.

Wenn Sie die Karte vergrößern oder verkleinern, werden die Cluster automatisch neu nummeriert und ihre Größe angepasst. Sie können auch auf ein beliebiges Markierungsclustersymbol klicken, um die Karte zu vergrößern und alle Markierungen in diesem Cluster zu sehen.

Zusammenfassend haben Sie in diesem Schritt die Open-Source-Utility-Bibliothek MarkerClustererPlus importiert und damit eine Instanz von MarkerClusterer erstellt, die die im vorherigen Schritt erstellten Markierungen automatisch gruppiert hat.

Ihre clusterMarkers()-Funktion sollte in etwa so aussehen:

    function clusterMarkers(map, markers) {
      const clustererOptions = { imagePath: './img/m' }
      const markerCluster = new MarkerClusterer(map, markers, clustererOptions);
    }

Als Nächstes erfahren Sie, wie Sie Nutzerinteraktionen verarbeiten.

9. Nutzerinteraktion hinzufügen

Sie haben jetzt eine ansprechende Karte mit einigen der beliebtesten Touristenattraktionen von Sydney. In diesem Schritt fügen Sie mithilfe des Ereignissystems der Maps JavaScript API zusätzliche Funktionen für die Verarbeitung von Nutzerinteraktionen hinzu, um die Nutzerfreundlichkeit Ihrer Karte weiter zu verbessern.

Die Maps JavaScript API bietet ein umfassendes Ereignissystem, in dem JavaScript-Ereignishandler verwendet werden, damit Sie verschiedene Nutzerinteraktionen im Code verarbeiten können. Sie können beispielsweise Event-Listener erstellen, um die Ausführung von Code für Interaktionen wie das Klicken des Nutzers auf die Karte und Markierungen, das Schwenken der Kartenansicht und das Ein- und Auszoomen auszulösen.

In diesem Schritt fügen Sie Ihren Markierungen einen Klick-Listener hinzu und lassen die Karte dann programmatisch so schwenken, dass die Markierung, auf die der Nutzer geklickt hat, in der Mitte der Karte angezeigt wird.

Richten Sie einen Klick-Listener für Ihre Markierungen ein.

Alle Objekte in der Maps JavaScript API, die das Ereignissystem unterstützen, implementieren eine Reihe von Standardfunktionen für die Verarbeitung von Nutzerinteraktionen, z. B. addListener, removeListener usw.

Wenn Sie jeder Markierung einen Click-Event-Listener hinzufügen möchten, iterieren Sie das markers-Array und rufen Sie addListener für die Markierungsinstanz auf, um einen Listener für das click-Ereignis anzuhängen:
```
 function addPanToMarker(map, markers) {
   markers.map(marker => {
     marker.addListener('click', event => {

     });
   });
 }
```
Die Karte wird verschoben, sodass die Markierung zu sehen ist, wenn darauf geklickt wird.

Das click-Ereignis wird immer dann ausgelöst, wenn ein Nutzer auf eine Markierung klickt oder tippt. Es gibt ein Ereignis als JSON-Objekt mit Informationen zum angeklickten UI-Element zurück. Um die Nutzerfreundlichkeit der Karte zu verbessern, können Sie das click-Ereignis verarbeiten und mit dem zugehörigen LatLng-Objekt den Breiten- und Längengrad der Markierung abrufen, auf die geklickt wurde.

Sobald Sie das haben, übergeben Sie es einfach an die integrierte panTo()-Funktion der Map-Instanz, damit die Karte sanft geschwenkt wird, um die angeklickte Markierung zu zentrieren. Fügen Sie dazu Folgendes in die Callback-Funktion des Event-Handlers ein:
```
 const location = { lat: event.latLng.lat(), lng: event.latLng.lng() };
 map.panTo(location);
```

Weisen Sie die Click-Listener zu. Rufen Sie

addPanToMarker() im Promise-Handler der JS API auf und übergeben Sie die Karte und die Markierungen, um den Code auszuführen und die Click-Listener zuzuweisen.

 loader.then(() => {
   console.log('Maps JS API loaded');
   const map = displayMap();
   const markers = addMarkers(map);
   clusterMarkers(map, markers);
   addPanToMarker(map, markers);
 });

Klicken Sie nun im Browser auf die Markierungen. Wenn Sie auf eine Markierung klicken, sollte die Karte automatisch neu zentriert werden.

In diesem Schritt haben Sie das Ereignissystem der Maps JavaScript API verwendet, um allen Markierungen auf der Karte einen Click-Listener zuzuweisen. Außerdem haben Sie die Breiten- und Längengrade der Markierung aus dem ausgelösten Click-Ereignis abgerufen und damit die Karte neu zentriert, wenn auf eine Markierung geklickt wurde.

Ihre addPanToMarker()-Funktion sollte in etwa so aussehen:

    function addPanToMarker(map, markers) {
      markers = markers.map(marker => {
        marker.addListener('click', event => {
          const location = { lat: event.latLng.lat(), lng: event.latLng.lng() };
          map.panTo(location);
        });
      });
      return markers;
    }

Nur noch ein Schritt! Als Nächstes verbessern Sie die Nutzerfreundlichkeit der Karte mithilfe der Zeichenfunktionen der Maps JavaScript API.

10. Auf Karten zeichnen

Bisher haben Sie eine Karte von Sydney erstellt, auf der Markierungen für beliebte Touristenziele zu sehen sind und die Nutzerinteraktionen verarbeitet. Im letzten Schritt dieses Codelabs verwenden Sie die Zeichenfunktionen der Maps JavaScript API, um Ihrer Karte eine zusätzliche nützliche Funktion hinzuzufügen.

Stellen Sie sich vor, diese Karte wird von Nutzern verwendet, die die Stadt Sydney erkunden möchten. Eine nützliche Funktion wäre, einen Radius um eine Markierung zu visualisieren, wenn darauf geklickt wird. So kann der Nutzer leicht erkennen, welche anderen Ziele sich in unmittelbarer Nähe der angeklickten Markierung befinden.

Die Maps JavaScript API enthält eine Reihe von Funktionen zum Zeichnen von Formen auf der Karte, z. B. Quadrate, Polygone, Linien und Kreise. Als Nächstes rendern Sie einen Kreis mit einem Radius von 800 Metern (ca. 0,8 km) um eine Markierung, wenn darauf geklickt wird.

Zeichnen Sie mit google.maps.Circle einen Kreis.

Die Zeichenfunktionen in der Maps JavaScript API bieten Ihnen eine Vielzahl von Optionen für die Darstellung eines gezeichneten Objekts auf der Karte. Um einen kreisförmigen Radius zu rendern, deklarieren Sie eine Reihe von Optionen für einen Kreis, z. B. Farbe, Strichstärke, Mittelpunkt und Radius. Erstellen Sie dann eine neue Instanz von google.maps.Circle, um einen neuen Kreis zu erstellen:
```
 function drawCircle(map, location) {
   const circleOptions = {
     strokeColor: '#FF0000',
     strokeOpacity: 0.8,
     strokeWeight: 1,
     map: map,
     center: location,
     radius: 800
   }
   const circle = new google.maps.Circle(circleOptions);
   return circle;
 }
```
Zeichnen Sie den Kreis, wenn auf eine Markierung geklickt wird.

Wenn der Kreis gezeichnet werden soll, wenn der Nutzer auf eine Markierung klickt, müssen Sie nur die oben geschriebene Funktion drawCircle() aus dem Callback des Klick-Listeners in addPanToMarker() aufrufen und ihr die Karte und den Standort der Markierung übergeben.

Beachten Sie, dass auch eine bedingte Anweisung hinzugefügt wird, die circle.setMap(null) aufruft. Dadurch wird der zuvor gerenderte Kreis von der Karte entfernt, wenn der Nutzer auf eine andere Markierung klickt. So wird verhindert, dass die Karte mit Kreisen überladen wird, während der Nutzer sie erkundet.

Ihre addPanToMarker()-Funktion sollte in etwa so aussehen:
```
 function addPanToMarker(map, markers) {
   let circle;
   markers.map(marker => {
     marker.addListener('click', event => {
       const location = { lat: event.latLng.lat(), lng: event.latLng.lng() };
       map.panTo(location);
       if (circle) {
         circle.setMap(null);
       }
       circle = drawCircle(map, location);
     });
   });
 }
```

Fertig! Klicken Sie in Ihrem Browser auf einen der Marker. Sie sollten einen kreisförmigen Radius sehen:

11. Glückwunsch

Sie haben Ihre erste Web-App mit der Google Maps Platform erstellt. Dazu haben Sie die Maps JavaScript API geladen, eine Karte geladen, mit Markierungen gearbeitet, die Karte gesteuert und darauf gezeichnet sowie Nutzerinteraktionen hinzugefügt.

Den vollständigen Code finden Sie im fertigen Projekt im Verzeichnis /solutions.

Nächste Schritte

In diesem Codelab haben Sie die Grundlagen der Maps JavaScript API kennengelernt. Fügen Sie der Karte nun einige dieser Elemente hinzu:

Ändern Sie den Kartentyp, um Satelliten-, Hybrid- und Geländekarten anzuzeigen.
Aktivieren Sie die Lokalisierung, um die Karte in verschiedenen Sprachen zu laden.
Nutzerinteraktionen wie Zoomen und Kartensteuerelemente anpassen
Fügen Sie Infofenster hinzu, um Informationen anzuzeigen, wenn auf Markierungen geklickt wird.
Sehen Sie sich die zusätzlichen Bibliotheken für die Maps JavaScript API an, die zusätzliche Funktionen wie Orte, Zeichnen und Visualisierung ermöglichen.

Weitere Informationen zur Verwendung der Google Maps Platform im Web finden Sie unter den folgenden Links: