Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

Maps JavaScript API einrichten

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

Wenn Sie die Maps JavaScript API verwenden möchten, können Sie entweder einen Maps-Demoschlüssel anfordern oder ein Konto einrichten und die Abrechnung aktivieren.

Demoschlüssel für Google Maps anfordern

Der Maps-Demoschlüssel ist eine kostenlose Funktion, mit der Sie mit dem Prototyping mit ausgewählten Funktionen der Maps JavaScript API beginnen können, ohne Zahlungsinformationen eingeben zu müssen. Der Maps-Demoschlüssel ist nur für Test- und Prototypingzwecke vorgesehen und nicht für die Produktion geeignet. Weitere Informationen finden Sie unter Maps-Demoschlüssel anfordern und mit der Maps JavaScript API verwenden

Standard-API-Schlüssel anfordern

Wenn Sie Ihren Code in die Produktion übertragen möchten, führen Sie die folgenden Schritte aus, um einen API-Schlüssel zu erstellen und die Abrechnung zu aktivieren.

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

Aktivieren Sie die API in Ihrem Google Cloud-Projekt.

Konfigurieren Sie einen API-Schlüssel, um eine authentifizierte API-Anfrage zu senden.

Google Maps Platform-Produkte sind vor unbefugter Nutzung geschützt, da API-Aufrufe einen API-Schlüssel enthalten müssen.

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

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

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

Console

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

Zur Seite „Schlüssel und Anmeldedaten“
Wählen Sie ein vorhandenes Projekt aus, wenn Sie dazu aufgefordert werden.
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, erstellen Sie einen neuen API-Schlüssel:
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.
Klicken Sie auf den Namen eines API-Schlüssels, um den Schlüssel zu bearbeiten.
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 von 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-Feld aus, um die Maps JavaScript API dem API-Schlüssel 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.
  Sie müssen den API-Schlüssel einschränken, bevor Sie ihn in der Produktionsumgebung verwenden.
Klicken Sie auf Speichern.
Wählen Sie für den bearbeiteten Schlüssel Schlüssel anzeigen aus, um den alphanumerischen String des Schlüssels anzuzeigen. Übergeben Sie diesen String an die Beispielanfrage im nächsten Abschnitt.

gcloud

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 Teil des Felds name der Antwort für jeden Schlüssel:
```
name: projects/PROJECT_ID/locations/global/keys/KEY_ID
```
Wenn Sie keinen API-Schlüssel haben oder einen API-Schlüssel für die Verwendung mit der Maps JavaScript API erstellen möchten, erstellen Sie einen neuen API-Schlüssel:
```
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:
- gcloud services api-keys create
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 Dienst namen 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 senden

Senden Sie eine Maps JavaScript API-Anfrage, um eine Karte der USA anzuzeigen. Sie müssen in jeder Anfrage den alphanumerischen String Ihres API-Schlüssels angeben und für Anfragen, die den API-Schlüssel enthalten, HTTPS verwenden.

Öffnen Sie Ihren Standardtexteditor.
Erstellen Sie eine HTML-Datei mit dem Namen index.html.

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>

Ersetzen Sie API_KEY im Code, um den alphanumerischen String des Schlüssels einzufügen.
Speichern Sie die HTML-Datei index.html.
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 Anwendung erforderlich sind. Wenn Sie Ihre API-Schlüssel einschränken, wird Ihre Anwendung sicherer und es wird dafür gesorgt, dass nur autorisierte Anfragen gesendet werden. Sie sind finanziell für Gebühren verantwortlich, die durch den Missbrauch uneingeschränkter API-Schlüssel entstehen. Weitere Informationen finden Sie in den Sicherheitsrichtlinien für die Google Maps Platform.

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

API-Einschränkungen geben an, welche SDKs und APIs mit dem API-Schlüssel aufgerufen werden können.
Anwendungseinschränkungen geben an, welche Websites, IP-Adressen oder Anwendungen einen API-Schlüssel verwenden dürfen.

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:

Maps JavaScript API einrichten Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.