Auf der Google Maps Platform ist bald eine neue Version der Funktionen für das cloudbasierte Gestalten von Karteninhalten verfügbar. Die Aktualisierung umfasst eine neue Standardfarbvorlage und Optimierungen in Bezug auf die Nutzerfreundlichkeit der Karten. Alle Kartenstile werden im März 2025 automatisch aktualisiert. Weitere Informationen zur Verfügbarkeit und Aktivierung sind unter Neuer Kartenstil für die Google Maps Platform verfügbar.

Mithilfe von HTML eine Google-Karte mit Markierungen hinzufügen

Einleitung

In diesem Tutorial erfahren Sie, wie Sie mithilfe von HTML eine Google-Karte mit einer Markierung auf einer Webseite einfügen. Hier sehen Sie die Karte, die Sie mit dieser Anleitung erstellen. Eine Markierung ist im kalifornischen Mountain View platziert, die andere in Seattle im US-Bundesstaat Washington.

Erste Schritte

Um mithilfe von HTML eine Google-Karte mit einer Markierung zu erstellen, sind diese Schritte erforderlich, die im Folgenden näher beschrieben werden:

API-Schlüssel anfordern
HTML, CSS und JS erstellen
Karte hinzufügen
Markierung hinzufügen

Sie benötigen einen Webbrowser. Wählen Sie aus der Liste der unterstützten Browser einen gängigen Browser wie Google Chrome (empfohlen), Firefox, Safari oder Edge für Ihre Plattform aus.

Schritt 1: API-Schlüssel anfordern

In diesem Abschnitt wird erläutert, wie Sie Ihre Anwendung mit Ihrem eigenen API-Schlüssel bei der Maps JavaScript API authentifizieren können.

So fordern Sie einen API-Schlüssel an:

Rufen Sie die Google Cloud Console auf.
Erstellen Sie ein neues Projekt oder wählen Sie ein vorhandenes Projekt aus.
Klicken Sie auf Weiter, um die API und die zugehörigen Dienste zu aktivieren.
Fordern Sie auf der Seite Anmeldedaten einen API-Schlüssel an und legen Sie die Einschränkungen für den API-Schlüssel fest. Wenn Sie bereits einen API-Schlüssel ohne Einschränkungen oder einen Schlüssel mit Browsereinschränkungen haben, können Sie auch diesen verwenden.
Informationen zum Verhindern von Kontingentdiebstahl und zum Sichern Ihres API-Schlüssels finden Sie unter Mit API-Schlüsseln authentifizieren.
Aktivieren Sie die Abrechnung. Weitere Informationen finden Sie unter Nutzung und Abrechnung.
Nachdem Sie einen API-Schlüssel erhalten haben, klicken Sie auf „YOUR_API_KEY“, um ihn in das folgende Snippet einzufügen. Kopieren Sie das Bootstrap-Script-Tag, das Sie auf Ihrer eigenen Webseite verwenden möchten, und fügen Sie es ein.
```
<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&callback=initMap">
</script>
```

Schritt 2: HTML, CSS und JS erstellen

Hier ist der Code für eine einfache HTML-Webseite:

<html>
  <head>
    <title>Add a Map with Markers using HTML</title>

    <!-- TODO: Add bootstrap script tag. -->
  </head>
  <body>
    <!-- TODO: Add a map with markers. -->
  </body>
</html>

Zum Laden einer Karte muss ein script-Tag mit dem Bootstrap-Ladeprogramm für die Maps JavaScript API eingefügt werden. Ein Beispiel dafür sehen Sie im folgenden Snippet (verwenden Sie Ihren eigenen API-Schlüssel):

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

Spoiler-Warnung: Ein fertiges Beispiel steht auf JSFiddle für Tests bereit.

Schritt 3: Karte hinzufügen

Um eine Google-Karte auf der Seite einzufügen, kopieren Sie das gmp-map-HTML-Element und fügen es dann zwischen den body-Tags der HTML-Seite ein:

<gmp-map center="37.4220656,-122.0840897" zoom="10" map-id="DEMO_MAP_ID" style="height: 400px"></gmp-map>

Dadurch erhalten Sie die folgende Karte:

Die neu erstellte Karte ist auf die Metropolregion San José (Kalifornien) zentriert.

Schritt 4: Markierung hinzufügen

Zum Platzieren einer Markierung auf der Karte verwenden Sie das gmp-advanced-marker-HTML-Element. Kopieren Sie das folgende Snippet und fügen Sie es so ein, dass es den gesamten gmp-map-Code überschreibt, den Sie im vorherigen Schritt hinzugefügt haben.

<gmp-map
  center="43.4142989,-124.2301242"
  zoom="4"
  map-id="DEMO_MAP_ID"
  style="height: 400px"
>
  <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>index.html

Mit dem Code oben werden zwei Markierungen eingefügt und die Parameter zoom und center im gmp-map-Code geändert, damit diese Markierungen besser sichtbar sind. Zur Verwendung von erweiterten Markierungen ist eine Karten-ID erforderlich (DEMO_MAP_ID kann genutzt werden).

Tipps und Fehlerbehebung

Sie können die Karte mit einem personalisierten Stil individualisieren.
Verwenden Sie die Entwicklertools in Ihrem Webbrowser, um Ihren Code zu testen und auszuführen, Fehlerberichte zu lesen und Probleme mit dem Code zu beheben.
Mit den folgenden Tastenkombinationen können Sie die Konsole in Chrome aufrufen:
Befehlstaste + Optionstaste + J (Mac) oder Strg + Umschalttaste + J (Windows).
So rufen Sie die Breiten- und Längengrade für einen Ort in Google Maps ab:
1. Öffnen Sie Google Maps in einem Browser.
2. Klicken Sie mit der rechten Maustaste auf die genaue Position auf der Karte, für die Sie Koordinaten benötigen.
3. Wählen Sie im Kontextmenü, das eingeblendet wird, Was ist hier? aus. Unten auf dem Bildschirm wird eine Infokarte eingeblendet. Die Breiten- und Längengrade finden Sie in der letzten Zeile der Infokarte.
Mit dem Geocoding-Dienst können Sie eine Adresse in Breiten- und Längengrade umwandeln. Ausführliche Informationen zu den ersten Schritten mit dem Geocoding-Dienst finden Sie in den Entwicklerleitfäden.

Vollständiges Codebeispiel

Unten sehen Sie die finale Karte und das vollständige Codebeispiel, das für dieses Tutorial genutzt wurde.

<html>
  <head>
    <title>Add a Map with Markers using HTML</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <gmp-map
      center="43.4142989,-124.2301242"
      zoom="4"
      map-id="DEMO_MAP_ID"
      style="height: 400px"
    >
      <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>

    <!-- 
      The `defer` attribute causes the callback to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises.
      See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&libraries=marker&v=beta"
      defer
    ></script>
  </body>
</html>index.html