Karte zu einer Website hinzufügen (JavaScript)

1. Vorbereitung

In diesem Codelab lernen Sie alles, was Sie brauchen, um die Google Maps Platform für das Web zu verwenden. Sie beginnen mit der Einrichtung, dem Laden der Maps JavaScript API, dem Anzeigen Ihrer ersten Karte, dem Arbeiten mit Markierungen und Markierungsclustern, dem Zeichnen auf der Karte sowie der Nutzerinteraktion.

Aufgaben

e52623cb8578d625.png

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

  • Lädt die Maps JavaScript API
  • Zeigt eine Karte in der Mitte von Sydney, Australien
  • Zeigt benutzerdefinierte Markierungen für beliebte Attraktionen in Sydney an
  • Implementiert Markierungscluster
  • Aktiviert die Interaktion mit dem Nutzer, die vor Kurzem gezogen und einen Kreis auf der Karte gezeichnet hat, wenn eine Markierung angeklickt 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
  • Arbeiten mit dem Maps JavaScript API-Ereignissystem für die Nutzerinteraktion
  • Karte dynamisch steuern
  • Auf der Karte zeichnen

2. Vorbereitung

Sie müssen sich mit den unten beschriebenen Elementen vertraut machen, um dieses Codelab abzuschließen. Wenn Sie bereits mit der Google Maps Platform vertraut sind, fahren Sie mit dem Codelab fort.

Erforderliche Google Maps Platform-Produkte

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

Sonstige Anforderungen für dieses Codelab

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

  • Google Cloud Platform-Konto mit aktivierter Abrechnung
  • Ein Google Maps Platform API-Schlüssel mit aktivierter Maps JavaScript API
  • Grundkenntnisse in JavaScript, HTML und CSS
  • Node.js auf Ihrem Computer installiert
  • Texteditor oder IDE deiner Wahl

Einführung in Google Maps Platform

Wenn du die Google Maps Platform noch nicht verwendet hast, folge der Einführung in die Google Maps Platform oder folge der Anleitung unter Erste Schritte mit der Google Maps Platform-Playlist.

  1. Erstellen Sie ein Rechnungskonto.
  2. Projekt erstellen
  3. Aktivieren Sie die im vorherigen Abschnitt aufgeführten Google Maps Platform APIs und SDKs.
  4. Generieren Sie den API-Schlüssel.

3. Einrichten

Google Maps Platform einrichten

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

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

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

Node.js-Einrichtung

Wenn Sie die Node.js-Laufzeit nicht auf Ihrem Computer herunterladen und installieren möchten, rufen Sie https://searchads.org/ auf.

Node.js enthält den npm-Paketmanager, den Sie zum Installieren von Abhängigkeiten für dieses Codelab benötigen.

Projektstartvorlage einrichten

Bevor Sie mit diesem Codelab beginnen, müssen Sie Folgendes tun, um die Startprojektvorlage sowie den vollständigen Lösungscode herunterzuladen:

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

Das Starter-Projekt befindet sich im Verzeichnis /starter und enthält die grundlegende Dateistruktur, die Sie für das Codelab benötigen. Alles, was du brauchst, findest du im Verzeichnis /starter/src. 2. Führen Sie nach dem Herunterladen des Starter-Projekts 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 Starter-Projekt wurde so eingerichtet, dass Sie webpack-dev-server verwenden, der den von Ihnen lokal geschriebenen Code kompiliert und ausführt. Wenn Sie Codeänderungen vornehmen, wird Ihre App von webpack-dev-server automatisch im Browser neu geladen.

Wenn Sie möchten, dass der vollständige Lösungscode ausgeführt wird, führen Sie die oben genannten Einrichtungsschritte im Verzeichnis /solution aus.

4. Maps JavaScript API laden

Führen Sie zuerst die Schritte unter Einrichten aus. Fertig? Zeit, deine erste Webanwendung mit der Google Maps Platform zu erstellen.

Die Verwendung der Google Maps Platform für das Web bildet die Maps JavaScript API. Mit dieser API kannst du alle Funktionen der Google Maps Platform wie etwa Karte, Markierungen, Zeichentools und andere Google Maps Platform-Dienste wie Places nutzen.

Wenn du bereits Erfahrung mit der Maps JavaScript API hast, solltest du sie eventuell laden, indem du ein script-Tag in eine HTML-Datei einfügst:

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

Das ist eine absolut gültige Methode zum Laden der API, in modernen JavaScript-Abhängigkeiten sind sie jedoch normalerweise dynamisch aus Code enthalten. Um die Entsprechung des Tags script aus dem Code zu erstellen, verwenden Sie das @googlemaps/js-api-loader-Modul. Die JS API-Ladefunktion ist bereits in den Abhängigkeiten der package.json-Datei des Projekts enthalten, die installiert wurde, als du npm install zuvor ausgeführt hast.

So verwenden Sie das JS API Loader:

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

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

    Für die Klasse Loader ist ein JSON-Objekt erforderlich, das verschiedene Optionen zum Laden der Maps JavaScript API angibt, z. B. den Google Maps Platform API-Schlüssel, die zu ladende Version der API und alle weiteren Bibliotheken, die von der Maps JS API geladen werden sollen. 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"
 }
  4. Erstelle eine Instanz von Loader und übergib ihr apiOptions.
     const loader = new Loader(apiOptions);
  5. Rufe die Maps JS API auf.

    Rufe die load() in der Instanz Loader auf, um die API zu laden. Das JS API Loader gibt ein Promise zurück, das aufgelöst wird, sobald die API geladen und einsatzbereit ist. Füge den folgenden Stub hinzu, um die API zu laden und das Versprechen zu verarbeiten:
     loader.load().then(() => {
   console.log('Maps JS API loaded');
 });

Wenn alles funktioniert hat, sollte die Anweisung console.log in der Browserkonsole angezeigt werden:

4fa88d1618cc7fd

Kurz gesagt: Du hast die Maps JavaScript API jetzt dynamisch aus Code geladen und die Callback-Funktion definiert, die ausgeführt wird, sobald die Maps JavaScript API vollständig geladen wurde.

Die 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.then(() => {
      console.log('Maps JS API Loaded');
    });

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

5. Karte anzeigen

Zeit, deine erste Karte anzuzeigen!

Der häufigste Bestandteil der Maps JavaScript API ist google.maps.Map. Mit dieser Klasse können Karteninstanzen erstellt und bearbeitet werden. Sehen Sie sich an, wie diese neue Funktion namens displayMap() erstellt wird.

  1. Definieren Sie Ihre Karteneinstellungen.

    Die Maps JavaScript API unterstützt eine Vielzahl verschiedener Einstellungen für die Karte. Es sind jedoch nur zwei erforderlich:
    • center: Gibt den Breiten- und Längengrad für die Mitte der Karte an.
    • zoom: Legt die anfängliche Zoomstufe der Karte fest.
    Mit dem folgenden Code können Sie die Karte in Sydney, Australien, zentrieren und mit einer Zoomstufe von 14 den richtigen Zoomfaktor für das Zentrum anzeigen.
     function displayMap() {
   const mapOptions = {
     center: { lat: -33.860664, lng: 151.208138 },
     zoom: 14
   };
 }
  2. Rufe die div ab, in die die Karte in das DOM eingefügt werden soll.

    Bevor du die Karte anzeigen kannst, musst du der Maps JavaScript API mitteilen, wo sie auf der Seite erscheinen soll. Wenn Sie einen kurzen Blick auf index.html werfen, sehen Sie, dass es bereits einen div gibt, der so aussieht:
     <div id="map"></div>
    Wenn Sie der Maps JavaScript API mitteilen möchten, wo die Karte eingeschleust werden soll, verwenden Sie document.getElementById für den DOM-Verweis:
     const mapDiv = document.getElementById('map');
  3. Erstelle eine Instanz von google.maps.Map.

    Wenn du die Maps JavaScript API bitten möchtest, eine neue Karte zu erstellen, die angezeigt werden kann, erstelle eine Instanz von google.maps.Map und übergib die Spalten mapDiv und mapOptions. Sie können auch die Map-Instanz aus dieser Funktion zurückgeben, um später mehr zu erledigen:
     const map = new google.maps.Map(mapDiv, mapOptions);
 return map;
  4. Karte anzeigen!

    Nachdem du die gesamte Logik zum Erstellen der Karteninstanz definiert hast, müssen nur noch displayMap() über den JS API-Promise-Handler aufgerufen werden, sodass die API nach dem Laden der Maps JavaScript API aufgerufen wird:
     loader.then(() => {
   console.log('Maps JS API loaded');
   const map = displayMap();
 });

Sie sollten nun eine wunderschöne Karte von Sydney in Ihrem Browser sehen:

fb0cd6bc38532780.png

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

Die 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. Cloudbasierter Kartenstil (optional)

Sie können den Stil Ihrer Karte mit cloudbasierten Kartenstilen anpassen.

Karten-ID erstellen

Wenn Sie noch keine Karten-ID mit einem zugehörigen Kartenstil erstellt haben, finden Sie im Leitfaden zu Karten-IDs folgende Schritte:

  1. Erstellen Sie eine Karten-ID.
  2. Kartenkarte mit einem Kartenstil verknüpfen

Karten-ID zur App hinzufügen

Wenn du die von dir erstellte Karten-ID verwenden möchtest, ändere die Funktion displayMap in der Datei app.js und übergibst deine Karten-ID in der Property mapId des mapOptions-Objekts.

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

Sobald der Vorgang abgeschlossen ist, sollte der ausgewählte Stil auf der Karte zu sehen sein.

7. Der Karte Markierungen hinzufügen

Es gibt viele Dinge, die Entwickler mit der Maps JavaScript API machen. Die Platzierung von Markierungen auf der Karte ist jedoch am beliebtesten. Mit Markierungen können Sie bestimmte Punkte auf der Karte anzeigen. Sie sind ein gängiges UI-Element für die Interaktion mit Nutzern. Wenn Sie Google Maps bereits verwendet haben, kennen Sie wahrscheinlich die Standardmarkierung, die so aussieht:

590815267846f166

In diesem Schritt fügen Sie mit google.maps.Marker Markierungen auf der Karte ein.

  1. Definieren Sie ein Objekt für Ihre Markierungenpositionen.

    Erstellen Sie zuerst eine neue addMarkers()-Funktion und deklarieren Sie ein locations-Objekt, das die folgenden Breiten- und Längengrade für beliebte Touristenattraktionen in Sydney enthält.

    Außerdem muss die Map-Instanz an die Funktion übergeben werden. Sie benötigen es später, wenn Sie Ihre Markierungsinstanzen 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 }
   }
 }
  2. Erstelle für jede Markierung, die angezeigt werden soll, eine google.maps.Marker-Instanz.

    Verwende zum Erstellen dieser Markierungen den Code unten, um mit einer for...in-Schleife das Objekt locations zu durchlaufen. Erstelle außerdem eine Reihe von Optionen für die Darstellung der einzelnen Markierungen und erstelle dann für jeden Standort eine Instanz von google.maps.Marker.

    Sieh dir die Property icon von markerOptions an. Erinnern Sie sich noch an die Standardmarkierung für Karten von früher? Wusstest du auch, dass du die Markierung für jedes beliebige Bild anpassen kannst? Ja, das geht.

    Mit der icon-Property kannst du den Pfad zu einer Bilddatei angeben, die du als benutzerdefinierte Markierung verwenden möchtest. Wenn Sie dieses Codelab mit unserer Projektvorlage begonnen haben, ist für Sie bereits ein Bild in /src/images enthalten.

    Außerdem müssen Sie die Markierungsinstanzen in einem Array speichern und von der Funktion zurückgeben, 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;
  3. Markierungen anzeigen

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

Jetzt sollten Sie benutzerdefinierte Markierungen auf der Karte sehen:

1e4a55de15215480.png

Zur Erinnerung: In diesem Schritt haben Sie einen Satz an Markierungspositionen definiert und eine Instanz von google.maps.Marker mit einem benutzerdefinierten Markierungssymbol für jeden Standort erstellt.

Die 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 Markierungs-Clustering-Funktion verbessern können.

8. Markierungscluster aktivieren

Wenn Sie eine große Anzahl von Markierungen verwenden oder sich sehr dicht beieinander befinden, kann es zu Überschneidungen kommen oder die Markierungen zu überfüllt erscheinen. Dies beeinträchtigt die Nutzererfahrung. Nachdem Sie die Markierungen im letzten Schritt erstellt haben, könnten Sie beispielsweise Folgendes bemerken:

6e39736160c6bce4

Hier kommen Markierungscluster zum Einsatz. Markierungscluster sind eine weitere häufig implementierte Funktion, mit der Markierungen in der Nähe in einem einzigen Symbol gruppiert werden, das sich je nach Zoomstufe so verändert:

4f372caab95d7499

Der Algorithmus für das Markierungs-Clustering teilt den sichtbaren Bereich der Karte in ein Raster auf und anschließend Cluster-Symbole, die sich in derselben Zelle befinden. Da sich durch die Google Maps Platform eine hilfreiche Open-Source-Bibliothek mit dem Namen MarkerClustererPlus entwickelt, die Ihnen alles automatisch erledigt, brauchen Sie sich darüber keine Sorgen zu machen. Sie können sich die Quelle für MarkerClustererPluson-GitHub ansehen.

  1. Importieren Sie den MarkerCluster.

    Beim Vorlagenprojekt für dieses Codelab ist die MarkerClustererPlus-Dienstprogrammbibliothek bereits in den Abhängigkeiten enthalten, die in der package.json-Datei deklariert sind. Daher hast du sie bereits installiert, als du npm install am Anfang dieses Codelabs ausgeführt hast.

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

    Zum Erstellen von Markierungsclustern sind zwei Schritte erforderlich: Geben Sie die Symbole an, die für die Markierungscluster verwendet werden sollen, und erstellen Sie eine neue Instanz von MarkerClusterer.

    Zuerst deklarieren Sie ein Objekt, das den Pfad zu den gewünschten Symbolen angibt. Im Vorlagenprojekt sind bereits in ./img/m gespeicherte Bilder vorhanden. Die Bilddateinamen sind sequenziell mit demselben Präfix nummeriert: m1.png, m2.png, m3.png usw.

    Wenn Sie die Eigenschaft imagePath in den Optionen für den Markierungs-Cluster festlegen, geben Sie einfach den Pfad und das Dateipräfix an. Der Markierungs-Cluster verwendet automatisch alle Dateien mit diesem Präfix und fügt am Ende eine Zahl hinzu.

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

    Rufen Sie clusterMarkers() aus dem Programmiersprache-Handler JS auf. Die Markierungscluster 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 nun einige Markierungs-Cluster zu sehen sein.

e52623cb8578d625.png

Wenn Sie heran- oder herauszoomen, werden die Cluster von MarkerClustererPlus automatisch neu nummeriert und ihre Größe angepasst. Sie können auch auf ein Symbol für Markierungscluster klicken, um heranzuzoomen und alle in diesem Cluster enthaltenen Markierungen zu sehen.

d572fa11aca13eeb.PNG

Zur Zusammenfassung: In diesem Schritt haben Sie die MarkerClustererPlus-Open-Source-Bibliothek importiert und daraus eine Instanz von MarkerClusterer erstellt, die automatisch die Markierungen aus dem vorherigen Schritt erstellt.

Die 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 mit Nutzerinteraktionen umgehen.

9. Nutzerinteraktion hinzufügen

Du hast jetzt eine tolle Karte, auf der einige der beliebtesten Touristenziele in Sydney angezeigt werden. In diesem Schritt fügen Sie über das Ereignissystem der Maps JavaScript API eine weitere Verarbeitung von Nutzerinteraktionen hinzu, um die Nutzerfreundlichkeit Ihrer Karte zu verbessern.

Die Maps JavaScript API bietet ein umfassendes Ereignissystem, in dem JavaScript-Event-Handler verwendet werden, um verschiedene Nutzerinteraktionen im Code zu verarbeiten. Beispielsweise können Sie Ereignis-Listener erstellen, um die Ausführung von Code für Interaktionen wie Klicks auf Karten und Markierungen, das Schwenken der Karte und das Heran- und Herauszoomen auszulösen.

In diesem Schritt fügen Sie den Markierungen einen Klick-Listener hinzu. Anschließend blenden Sie programmatisch den Kartenschwingpunkt ein, damit die Markierung, auf die der Nutzer geklickt hat, in der Mitte der Karte angezeigt wird.

  1. Klick-Listener für Markierungen festlegen

    Für alle Objekte in der Maps JavaScript API, die das Ereignissystem unterstützen, sind bestimmte Standardfunktionen zur Verarbeitung von Nutzerinteraktionen verfügbar, z. B. addListener und removeListener.

    Wenn du jeder Markierung einen Klickereignis-Listener hinzufügen möchtest, iteriere das markers-Array und rufe 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 => {

     });
   });
 }
  2. Schwenke zu einer Markierung, wenn darauf geklickt wird.

    Das Ereignis click wird ausgelöst, wenn ein Nutzer auf eine Markierung klickt oder tippt, und gibt ein Ereignis als JSON-Objekt mit Informationen zum angeklickten UI-Element zurück. Um die Nutzerfreundlichkeit der Karte zu verbessern, kannst du das click-Ereignis verwenden und sein LatLng-Objekt verwenden, um den Breiten- und Längengrad der angeklickten Markierung zu erhalten.

    Überschreibe sie dann an die integrierte Funktion panTo() der Map-Instanz, um die Karte gleichmäßig auf den aktuellen Punkt der Markierung zu schwenken. Füge dazu Folgendes in die Callback-Funktion des Ereignis-Handlers ein:
     const location = { lat: event.latLng.lat(), lng: event.latLng.lng() };
 map.panTo(location);
  3. Weisen Sie die Klick-Listener zu.

    Rufen Sie addPanToMarker() über den JS API Promise-Handler auf und übergeben Sie Ihre Karte und die Markierungen, um den Code auszuführen und Ihre Klick-Listener zuzuweisen.
     loader.then(() => {
   console.log('Maps JS API loaded');
   const map = displayMap();
   const markers = addMarkers(map);
   clusterMarkers(map, markers);
   addPanToMarker(map, markers);
 });

Gehen Sie nun zum Browser und klicken Sie auf Ihre Markierungen. Sie sollten die Karte automatisch auf den neuesten Punkt schwenken, wenn auf eine Markierung geklickt wird.

Kurz gesagt: In diesem Schritt haben Sie das Ereignissystem der Maps JavaScript API verwendet, um allen Markierungen auf der Karte einen Klick-Listener zuzuweisen, den Breiten- und Längengrad der Markierung aus dem ausgelösten Klickereignis abzurufen und damit die Karte neu zu zentrieren, wenn auf eine Markierung geklickt wird.

Die 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 wird die Karte mithilfe der Zeichenfunktionen der Maps JavaScript API weiter verbessert.

10. Auf der Karte zeichnen

Bis jetzt hast du eine Karte von Sydney erstellt, auf der Markierungen für beliebte Reiseziele angezeigt werden und die Nutzerinteraktionen ausführen. Im letzten Schritt dieses Codelabs verwenden Sie die Zeichenfunktionen der Maps JavaScript API, um Ihrer Karte ein zusätzliches nützliches Merkmal hinzuzufügen.

Stellen Sie sich vor, diese Karte wird von Nutzern verwendet, die die Stadt Sydney erkunden möchten. Eine nützliche Funktion ist die Visualisierung eines Umkreises um eine Markierung herum, wenn darauf geklickt wird. So kann der Nutzer auf einfache Weise erkennen, welche anderen Zielanwendungen sich in Gehminuten von der angeklickten Markierung befinden.

Die Maps JavaScript API umfasst eine Reihe von Funktionen zum Zeichnen von Formen auf der Karte, z. B. Quadrate, Polygone, Linien und Kreise. Als Nächstes renderst du einen Kreis, sodass ein 800-Meter-Radius um eine Markierung herum angezeigt wird, wenn darauf geklickt wird.

  1. Zeichnen Sie mit google.maps.Circle einen Kreis.

    Mit den Zeichenfunktionen in der Maps JavaScript API hast du viele Möglichkeiten, wie ein gezeichnetes Objekt auf der Karte angezeigt wird.
  2. Zeichnen Sie den Kreis, wenn auf eine Markierung geklickt wird.

    Wenn du den Kreis zeichnen möchtest, wenn der Nutzer auf eine Markierung klickt, musst du nur die oben beschriebene Funktion drawCircle() aus dem Klick-Listener-Callback in addPanToMarker() aufrufen und die Karte und die Position der Markierung übergeben.

    Beachten Sie, dass auch eine bedingte Anweisung hinzugefügt wird, die circle.setMap(null) aufruft. Dadurch wird der zuvor gerenderte Kreis aus der Karte entfernt, wenn der Nutzer auf eine andere Markierung klickt. Sie gelangen schließlich zu einer Karte mit Kreisen, die angezeigt wird, wenn der Nutzer die Karte 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 im Browser auf eine der Markierungen. Es sollte ein kreisförmiger Radius angezeigt werden:

254baef70c3ab4d5_png

11. Glückwunsch

Sie haben erfolgreich Ihre erste Webanwendung mit der Google Maps Platform erstellt. Dazu gehörten das Laden der Maps JavaScript API, das Laden einer Karte, das Arbeiten mit Markierungen, das Steuern von bzw. Zeichnen auf der Karte und das Hinzufügen von Nutzerinteraktionen.

Sehen Sie sich das abgeschlossene Projekt im Verzeichnis /solutions an, um den abgeschlossenen Code zu sehen.

Nächste Schritte

In diesem Codelab wurden die Grundlagen der Maps JavaScript API behandelt. Versuchen Sie anschließend, der Karte einige dieser Funktionen hinzuzufügen:

  • Ändern Sie den Kartentyp, sodass Satelliten-, Hybrid- und Geländekarten angezeigt werden.
  • Aktivieren Sie lokalisieren, um die Karte in verschiedenen Sprachen zu laden.
  • Passen Sie andere Nutzerinteraktionen wie Zoomen und Kartensteuerelemente an.
  • Fügen Sie Infofenster hinzu, damit Informationen angezeigt werden, wenn auf Markierungen geklickt wird.
  • Sehen Sie sich die zusätzlichen Bibliotheken für die Maps JavaScript API an, die zusätzliche Funktionen wie Places, Zeichnen und Visualisierungen ermöglichen.

Weitere Informationen zum Arbeiten mit der Google Maps Platform im Web finden Sie unter den folgenden Links: