Maps Embed API – Kurzanleitung

Mit einer HTTP-Anfrage können Sie eine interaktive Karte oder ein Street View-Panorama auf Ihrer Webseite platzieren. Es ist kein benutzerdefiniertes JavaScript erforderlich.

Kosten

Alle „Maps Embed API“-Anfragen sind unbegrenzt kostenlos. Für alle Anfragen ist jedoch weiterhin ein gültiger Google Cloud API-Schlüssel erforderlich. Weitere Informationen finden Sie unter Nutzung und Abrechnung.

Hinweis

Führen Sie die folgenden erforderlichen Einrichtungsschritte aus, um eine eingebettete Karte auf Ihrer Webseite zu erstellen:

Schritt 1: Projekt einrichten

Console

  1. Klicken Sie in der Google Cloud Console auf der Seite für die Projektauswahl auf Projekt erstellen, um ein neues Cloud-Projekt einzurichten.

    Zur Projektauswahl

  2. Die Abrechnung für das Cloud-Projekt muss aktiviert sein. Das können Sie hier überprüfen.

    Google Cloud bietet einen kostenlosen Testzeitraum. Dieser endet entweder nach 90 Tagen oder wenn im Konto Kosten in Höhe von 300 $ angefallen sind – je nachdem, welcher Fall zuerst eintritt. Eine Kündigung ist jederzeit möglich. Weitere Informationen finden Sie unter Guthaben auf dem Rechnungskonto und Abrechnung.

Cloud SDK

gcloud projects create "PROJECT"

Weitere Informationen zum Google Cloud SDK, zur Cloud SDK-Installation und zu folgenden Befehlen:

Schritt 2: APIs oder SDKs aktivieren

Damit Sie die Google Maps Platform verwenden können, müssen Sie die APIs und SDKs aktivieren, die Sie in Ihrem Projekt nutzen möchten.

Console

Maps Embed API aktivieren

Cloud SDK

gcloud services enable \
    --project "PROJECT" \
    "maps-embed-backend.googleapis.com"

Weitere Informationen zum Google Cloud SDK, zur Cloud SDK-Installation und zu folgenden Befehlen:

Schritt 3: API-Schlüssel anfordern

Dieser Schritt behandelt nur die Erstellung des API-Schlüssels. Wenn Sie Ihren API-Schlüssel in der Produktionsumgebung verwenden, sollten Sie ihn außerdem unbedingt einschränken. Weitere Informationen zur Vorgehensweise finden Sie auf der Seite API-Schlüssel verwenden.

Der API-Schlüssel ist eine eindeutige Kennung. Damit werden die mit Ihrem Projekt verknüpften Anfragen zu Nutzungs- und Abrechnungszwecken authentifiziert. Mit Ihrem Projekt muss mindestens ein API-Schlüssel verknüpft sein. Folgen Sie dieser Anleitung, um einen neuen Schlüssel zu erstellen oder eine API oder ein SDK zu einem vorhandenen Schlüssel hinzuzufügen.

Console

  1. Rufen Sie die Seite Google Maps Platform > Schlüssel und Anmeldedaten auf.

    Zur Seite „Schlüssel und Anmeldedaten“

  2. Wählen Sie bei Aufforderung Ihr Projekt aus.

  3. Führen Sie einen der folgenden Schritte aus:

    • Neuen Schlüssel erstellen:

      1. Klicken Sie auf Anmeldedaten erstellen > API-Schlüssel.
      2. Öffnen Sie im Bereich API-Schlüssel erstellen die Liste API-Einschränkungen auswählen.
      3. Entfernen Sie alle APIs, die für diesen Schlüssel nicht erforderlich sind, und achten Sie darauf, dass die Maps Embed API ausgewählt bleibt.
      4. Klicken Sie auf Erstellen. Im Bereich wird der neue API-Schlüssel angezeigt.

    • Vorhandenen Schlüssel verwenden:

      1. Klicken Sie auf den Namen des Schlüssels.
      2. Wählen Sie in der Liste API-Einschränkungen auswählen die Option Maps Embed API aus.
      3. Klicken Sie auf Speichern.

    Wenn Sie hier eine API auswählen, wird sie nicht aktiviert. Prüfen Sie, ob die Maps Embed API auf der Seite „API-Bibliothek“ aktiviert ist.

  4. Wenn Sie den Schlüsselstring später sehen möchten, rufen Sie die Seite Schlüssel und Anmeldedaten auf und klicken Sie für den Schlüssel auf Schlüssel anzeigen.

Wenn die Console anders aussieht als in diesen Schritten, finden Sie weitere Informationen in der Google Cloud-Dokumentation unter API-Schlüssel erstellen und API-Einschränkungen hinzufügen.

Cloud SDK

Ersetzen Sie in den folgenden Befehlen PROJECT_ID durch Ihre Projekt-ID.

  • Neuen Schlüssel erstellen: Führen Sie den folgenden Befehl aus und ersetzen Sie DISPLAY_NAME durch einen Namen für den Schlüssel. 

    gcloud services api-keys create \
    --project="PROJECT_ID" \
    --display-name="DISPLAY_NAME" \
    --api-target=service=maps-embed-backend.googleapis.com

    Weitere Informationen zum Google Cloud SDK, zur Cloud SDK-Installation und zu folgenden Befehlen:

  • Vorhandenen Schlüssel verwenden: Führen Sie den folgenden Befehl aus und ersetzen Sie KEY_ID durch die ID des Schlüssels. Mit dem Flag --append werden die APIs beibehalten, die der Schlüssel bereits zulässt. Ohne diesen Parameter werden sie durch den Befehl ersetzt.

    gcloud services api-keys update KEY_ID \
    --project="PROJECT_ID" \
    --append \
    --api-target=service=maps-embed-backend.googleapis.com

    Weitere Informationen zum Google Cloud SDK, zur Cloud SDK-Installation und zu folgenden Befehlen:

    Die Schlüssel-ID ist nicht der Schlüsselstring oder der Anzeigename. Führen Sie gcloud services api-keys list --project="PROJECT_ID" aus, um sie zu finden. Die ID ist der letzte Teil des Felds name: projects/PROJECT_NUMBER/locations/global/keys/KEY_ID.

Führen Sie gcloud services api-keys get-key-string KEY_ID --project="PROJECT_ID" aus, um den Schlüsselstring aufzurufen.

Iframe generieren

Klicken Sie sich durch die folgenden Optionen und fügen Sie einen Ort und einen API-Schlüssel hinzu, um einen iFrame für Ihre Webseite zu generieren. Weitere Parameter und Optionen finden Sie unter Karte einbetten.

Iframe testen

So rufen Sie den iFrame in einem HTML-Browserfenster auf:

  1. Öffnen Sie Ihren Standard-Texteditor. Auf Ihrem Gerät sollten standardmäßig Texteditoren wie TextEdit oder Microsoft Windows Editor installiert sein.
  2. Erstellen Sie eine HTML-Datei und nennen Sie sie index.html.

  3. Fügen Sie den folgenden Code mit dem oben generierten iFrame hinzu:

    <html>
  <!-- Replace this code comment with your iframe. -->
</html>

  4. Speichern Sie die HTML-Datei index.html.

  5. Laden Sie die HTML-Datei in einen Webbrowser. Ziehen Sie sie dazu von Ihrem Desktop in Ihren Browser. Bei den meisten Betriebssystemen können Sie auch doppelt auf die Datei klicken.

Das wars! Sie haben gerade eine Karte mit der Maps Embed API eingerichtet und erstellt.

Bereinigen

Sie können Ihr Google Cloud-Projekt löschen, um die Abrechnung für alle in diesem Projekt verwendeten Ressourcen zu beenden.

  1. Wechseln Sie in der Google Cloud Console zur Seite Ressourcen verwalten.

    Zur Seite "Ressourcen verwalten"

  2. Wenn das Projekt, das Sie löschen möchten, an eine Organisation geknüpft ist, wählen Sie oben auf der Seite die Liste der Organisationen aus und maximieren Sie sie.
  3. Wählen Sie in der Projektliste das Projekt aus, das Sie löschen möchten, und klicken Sie auf Löschen.
  4. Geben Sie im Dialogfeld die Projekt-ID ein und klicken Sie auf Beenden, um das Projekt zu löschen.

Nächste Schritte

  • Richten Sie Ihr Google Cloud-Projekt ein, um mit der Entwicklung mit der Maps Embed API zu beginnen:

    In der Cloud Console einrichten

  • Eine Liste mit zusätzlichen Parametern und Optionen, die Sie Ihrem iFrame hinzufügen können, finden Sie hier:

    Karte einbetten

  • Erweitern Sie Ihr Maps-Projekt mit der JavaScript API:

    Maps JavaScript API