Maps JavaScript API einrichten

In diesem Dokument wird beschrieben, welche Schritte erforderlich sind, um die Maps JavaScript API zu verwenden.

Prüfen Sie, ob Sie die Voraussetzungen erfüllen.

Aktivieren Sie die API in Ihrem Google Cloud-Projekt.

API-Schlüssel für eine authentifizierte API-Anfrage konfigurieren

Google Maps Platform-Produkte sind vor unbefugter Nutzung geschützt, da API-Aufrufe nur mit einem API-Schlüssel möglich sind.

API-Schlüssel für die Verwendung mit der Maps JavaScript API abrufen

Ein API-Schlüssel ist ein eindeutiger alphanumerischer String, über den Ihr Cloud-Rechnungskonto und Ihr Google Cloud-Projekt mit der Anfrage verknüpft werden, die Ihre Anwendung an eine Google Maps Platform API oder ein Google Maps Platform SDK sendet.

So fügen Sie einem API-Schlüssel die Maps JavaScript API hinzu:

Console

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

    Zur Seite „Schlüssel und Anmeldedaten“

  2. Wählen Sie ein vorhandenes Projekt aus, wenn Sie dazu aufgefordert werden.

  3. Die Liste der verfügbaren Schlüssel wird unter API-Schlüssel angezeigt.

    Wenn Sie keinen API-Schlüssel haben oder einen API-Schlüssel für die Verwendung mit der Maps JavaScript API erstellen möchten, gehen Sie so vor:

    1. Klicken Sie auf der Seite Schlüssel und Anmeldedaten auf + Anmeldedaten erstellen > API-Schlüssel.

      Im Dialogfeld API-Schlüssel erstellt wird der neu erstellte API-Schlüssel angezeigt.

  4. Klicken Sie auf den Namen eines API-Schlüssels, um ihn zu bearbeiten.

  5. Gehen Sie auf der Bearbeitungsseite unter Schlüsseleinschränkungen so vor:

    • Wenn unter Anwendungseinschränkungen eine andere Option als Keine ausgewählt ist, sind nur Anfragen aus diesen Quellen zulässig. Weitere Informationen finden Sie unter API-Schlüssel einschränken.

    • Gehen Sie unter API-Einschränkungen so vor:

      • Wenn Schlüssel einschränken ausgewählt ist, wählen Sie das Drop-down-Menü aus, um dem API-Schlüssel die Maps JavaScript API hinzuzufügen.
      • Wenn Schlüssel nicht einschränken ausgewählt ist, können Sie den API-Schlüssel verwenden, um Anfragen an die Maps JavaScript API zu senden.

      Denken Sie daran, den API-Schlüssel einzuschränken, bevor Sie ihn in der Produktionsumgebung verwenden.

  6. Klicken Sie auf Speichern.
  7. Klicken Sie für den bearbeiteten Schlüssel auf Schlüssel anzeigen, um den alphanumerischen String des Schlüssels aufzurufen. Übergeben Sie diesen String an die Beispielanfrage im nächsten Abschnitt.

gcloud

  1. Rufen Sie die ID des Schlüssels ab, den Sie aktualisieren möchten.

    Die ID ist nicht mit dem Anzeigenamen oder dem Schlüsselstring identisch. Sie können die ID abrufen, indem Sie mit dem folgenden gcloud-Befehl die Schlüssel in Ihrem Projekt auflisten.

    gcloud services api-keys list

    Die ID ist für jeden Schlüssel Teil des Felds name der Antwort:

    name: projects/PROJECT_ID/locations/global/keys/KEY_ID

  2. Wenn Sie keinen API-Schlüssel haben oder einen API-Schlüssel für die Verwendung mit der Maps JavaScript API erstellen möchten, gehen Sie so vor:

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

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

  3. Geben Sie mit dem gcloud services api-keys update-Befehl an, für welche Dienste ein API-Schlüssel zur Authentifizierung verwendet werden kann.

    Ersetzen Sie die folgenden Werte:

    • KEY_ID: Die ID des Schlüssels, den Sie einschränken möchten.

    • SERVICE_1, SERVICE_2…:

      Die Dienstnamen der APIs, auf die mit dem Schlüssel zugegriffen werden kann. Sie müssen alle Dienstnamen mit dem Befehl „update“ angeben. Ersetzen Sie durch die bereitgestellten Dienstnamen alle vorhandenen Dienste für den Schlüssel.

    Sie finden den Dienstnamen, indem Sie im API-Dashboard nach der API suchen. Für die Maps JavaScript API lauten die Dienstnamen maps-backend.googleapis.com.

    gcloud services api-keys update KEY_ID \
--api-target=service=maps-backend.googleapis.com \
--api-target=service=SERVICE_1 --api-target=service=SERVICE_2

API-Anfrage stellen

Eine Maps JavaScript API-Anfrage zum Anzeigen einer Karte der USA stellen Sie müssen in jeder Anfrage den alphanumerischen String Ihres API-Schlüssels angeben und HTTPS für Anfragen verwenden, die den API-Schlüssel enthalten.

  1. Öffnen Sie Ihren Standardtexteditor.
  2. Erstellen Sie eine HTML-Datei mit dem Namen index.html.
  3. Fügen Sie den folgenden Code in die Datei ein: 
    <html>
  <head>
    <title>Add a Map using HTML</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <gmp-map
      center="38.7946,-106.5348"
      zoom="4"
      map-id="DEMO_MAP_ID"
      style="height: 400px"
    >
    </gmp-map>

    <!--
      The `defer` attribute causes the script to execute after the full HTML
      document has been parsed. -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=maps"
      defer
    ></script>
  </body>
</html>
  4. Ersetzen Sie API_KEY im Code, um den alphanumerischen String des Schlüssels einzufügen.
  5. Speichern Sie die HTML-Datei index.html.
  6. 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.

Einschränkungen für API-Schlüssel anwenden

Google empfiehlt dringend, die API-Schlüssel einzuschränken, indem Sie ihre Nutzung auf die APIs beschränken, die für Ihre App erforderlich sind. Wenn Sie Ihre API-Schlüssel einschränken, wird Ihre App sicherer und es wird dafür gesorgt, dass nur autorisierte Anfragen gesendet werden. Sie sind finanziell für Kosten verantwortlich, die durch den Missbrauch uneingeschränkter API-Schlüssel entstehen. Weitere Informationen finden Sie in der Sicherheitsanleitung für die Google Maps Platform.

API-Schlüssel unterstützen zwei Arten von Einschränkungen:

Weitere Informationen zum Anwenden von Einschränkungen finden Sie unter API-Schlüssel einschränken.

Nachdem Sie die Maps JavaScript API aktiviert und eine erfolgreiche Anfrage gesendet haben, finden Sie hier weitere Informationen zur Verwendung der Maps JavaScript API: