Maps Embed API – Kurzanleitung

Sie können eine interaktive Karte oder ein Street View-Panorama mit einer einfachen HTTP-Anfrage auf Ihrer Webseite einfügen – ohne JavaScript.

Kosten

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

Vorbereitung

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

Schritt 1

Cloud 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. Außerdem erhalten Sie jeden Monat ein Guthaben von 200 $ für die Google Maps Platform. 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

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

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 ID. 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.

So erstellen Sie einen API-Schlüssel:

Cloud Console

  1. Rufen Sie die Seite Google Maps Platform > Anmeldedaten auf.

    Zur Seite „Anmeldedaten“

  2. Klicken Sie auf der Seite Anmeldedaten auf Anmeldedaten erstellen > API-Schlüssel.
    Im Dialogfeld API-Schlüssel erstellt wird der neu erstellte API-Schlüssel angezeigt.
  3. Klicken Sie auf Schließen.
    Der neue API-Schlüssel wird auf der Seite Anmeldedaten unter API-Schlüssel aufgeführt.
    Es empfiehlt sich, den API-Schlüssel einzuschränken, bevor Sie ihn in der Produktionsumgebung verwenden.

Cloud SDK

gcloud alpha services api-keys create \
    --project "PROJECT" \
    --display-name "DISPLAY_NAME"

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

iFrame generieren

Klicken Sie sich durch die folgenden Optionen und fügen Sie einen Standort und einen API-Schlüssel zum Generieren hinzu. iFrame für Ihre Webseite. Weitere Parameter und Optionen finden Sie unter Karte einbetten.

IFrame testen

So zeigen Sie Ihren iFrame in einem HTML-Browserfenster an:

  1. Öffnen Sie Ihren Standard-Texteditor. Sie benötigen Texteditoren wie TextEdit oder Microsoft Windows Notepad standardmäßig auf Ihrem Gerät installiert ist.
  2. Erstellen Sie eine HTML-Datei und nennen Sie sie index.html.

  3. Fügen Sie den folgenden Code in den oben generierten iFrame ein:

    <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.

Glückwunsch! Sie haben gerade eine Karte mithilfe des Maps Embed API.

Bereinigen

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

  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 das Organisationsliste oben auf der Seite.
  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

  • Beginnen Sie mit der Entwicklung mit der Maps Embed API, indem Sie Ihr Google Cloud-Projekt:

    In der Cloud Console einrichten

  • Hier finden Sie eine Liste mit zusätzlichen Parametern und Optionen, die Sie in Ihren IFrame einfügen können:

    Karten einbetten

  • Google Maps-Projekt mit der JavaScript API erweitern:

    Maps JavaScript API