Web Components in der Maps JavaScript API (Vorschau)

Webkomponenten sind ein beliebter W3C-Standard, der HTML, CSS und JS in benutzerdefinierten und wiederverwendbaren HTML-Elementen vereint. Zu diesen wiederverwendbaren Komponenten gehören sowohl einzelne Funktionen wie die Darstellung der Bewertung für einen Ort als auch komplexere Geschäftslogik. In diesem Leitfaden werden die Webkomponenten beschrieben, die in der Maps JavaScript API verfügbar sind.

Weitere Informationen zum Standard finden Sie unter Webkomponenten.

Zielgruppe

Diese Dokumentation soll Ihnen einen schnellen Einstieg in die Verwendung und Entwicklung von Anwendungen mit Webkomponenten ermöglichen. Sie sollten bereits mit den Konzepten der HTML- und CSS-Programmierung vertraut sein.

Karte anzeigen

Mit einem Beispiel gelingt der Einstieg in die Webkomponenten am leichtesten. Im folgenden Beispiel wird eine Karte der Region San Jose angezeigt.

Karte der Region San Jose

HTML

<html>
  <head>
    <title>Simple Map</title>
    <link rel="stylesheet" type="text/css" href="style.css" />

    <script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=maps,marker&v=beta">
    </script>

    <script>
      function initMap() {
        console.log('Maps JavaScript API loaded.');
      }
    </script>

  </head>
  <body>
    <gmp-map center="37.4220656,-122.0840897" zoom="10" map-id="DEMO_MAP_ID"></gmp-map>
  </body>
</html>

CSS

    gmp-map {
      height: 500px;
    }

Bei diesem Beispiel sind einige Dinge zu beachten:

  1. Die Maps JavaScript API wird asynchron aufgerufen. Die Callback-Funktion wird verwendet, um zu erfahren, wann die API geladen wurde.
  2. Die Präsentation der Karte wird mit dem benutzerdefinierten Element <gmp-map> definiert.
  3. Die Eigenschaften einer Karte werden durch Angeben von Attributen im benutzerdefinierten Element <gmp-map> definiert.
  4. Der Stil kann inline auf benutzerdefinierte Elemente angewandt oder in einer separaten CSS-Datei deklariert werden.

Stil der Basiskarte festlegen

Eine Karten-ID ist eine Kennung, die einem bestimmten Kartenstil oder -element zugeordnet ist. Ersetzen Sie DEMO_MAP_ID zum cloudbasierten Gestalten von Karteninhalten durch Ihre eigene Karten-ID. Unter Cloudbasiertes Gestalten von Karteninhalten erfahren Sie, wie Sie eine Karten-ID erstellen und einen benutzerdefinierten Stil konfigurieren.

Markierungen zur Karte hinzufügen

Genauso wie integrierte HTML-Tags verschachtelt werden können, um komplexe Inhaltshierarchien zu erstellen, kann auch <gmp-advanced-marker> innerhalb eines Elements verschachtelt werden, um eine oder mehrere Kartenmarkierungen zu präsentieren.

Karte mit Markierungen

HTML

<html>
  <head>
    <title>Simple Map with Markers</title>
    <link rel="stylesheet" type="text/css" href="style.css" />

    <script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&callback=initMap&libraries=maps,marker&v=beta">
    </script>

    <script>
      function initMap() {
        console.log('Maps JavaScript API loaded.');
      }
    </script>

  </head>
  <body>
    <gmp-map center="43.4142989,-124.2301242" zoom="4" map-id="DEMO_MAP_ID">
      <gmp-advanced-marker position="37.4220656,-122.0840897" title="Mountain View, CA"></gmp-advanced-marker>
      <gmp-advanced-marker position="47.648994,-122.3503845" title="Seattle, WA"></gmp-advanced-marker>
    </gmp-map>
  </body>
</html>

CSS

    gmp-map {
      height: 500px;
    }

Hier wurden zwei <gmp-advanced-marker>-Elemente innerhalb des benutzerdefinierten <gmp-map>-Elements hinzugefügt. Der Text für title liefert einen zusätzlichen Hover-Text und ein Bedienungshilfen-Label für das angegebene Element.

JavaScript-Ereignisse

Ein großer Vorteil der Webkomponenten ist die Benutzerfreundlichkeit. So können Nutzer mit wenigen Codezeilen eine Karte einblenden, auch wenn sie nur über begrenzte Kenntnisse von JavaScript oder fortgeschrittener Programmierung verfügen. Nach der Implementierung folgt der Code den bekannten Mustern der anderen HTML-Elemente. Zum Beispiel kann das native Browser-Ereignissystem verwendet werden, um auf Aktionen für Karten oder erweiterte Markierungen zu reagieren, z. B. das Anklicken einer Markierung.

Markierungsklickereignis

HTML

<html>
<head>
  <title>Google Maps - Marker Click Example</title>
  <link rel="stylesheet" href="style.css" type="text/css">

  <script async
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&callback=initMap&libraries=maps,marker&v=beta">
  </script>

  <script>
    function initMap() {
      console.log('Maps JavaScript API loaded.');

      const advancedMarkers = document.querySelectorAll("#marker-click-event-example gmp-advanced-marker");
      for (const advancedMarker of advancedMarkers) {
        customElements.whenDefined(advancedMarker.localName).then(async () => {
          advancedMarker.addEventListener('gmp-click', async () => {
            const {InfoWindow} = await google.maps.importLibrary("maps");
            const infoWindow = new InfoWindow({
              content: advancedMarker.title
            });
            infoWindow.open({
              anchor: advancedMarker
            });
          });
        });
      }
    }
  </script>
</head>
<body>

<gmp-map id="marker-click-event-example" center="43.4142989,-124.2301242" zoom="4" map-id="DEMO_MAP_ID">
  <gmp-advanced-marker position="37.4220656,-122.0840897" title="Mountain View, CA"></gmp-advanced-marker>
  <gmp-advanced-marker position="47.648994,-122.3503845" title="Seattle, WA"></gmp-advanced-marker>
</gmp-map>

</body>
</html>

CSS

    gmp-map {
      height: 500px;
    }

In diesem Beispiel steht initMap für die Callback-Funktion, die erforderlich ist, wenn die Maps JavaScript API vollständig geladen wurde. Mit dem Code werden Listener für die einzelnen Markierungen definiert und ein Infofenster eingeblendet, wenn eine Markierung angeklickt wird.

Nächste Schritte