Google Maps: API-Key erstellen und einrichten

Von: Jonas, Raimund

Wir erklären die notwendigen Schritte für das Einrichten eines API-Schlüssels bei Google Maps, der Voraussetzung für das Einbinden von Google-Karten auf einer Website.

Aktualisiert von 2020 – 2023 17 Kommentare

Für das erfolgreiche Einbinden von Google Maps auf einer Website muss ein sog. API-Key eingerichtet werden. Google macht das Vorhandensein des Schlüssels zur Voraussetzung, da Google Maps – je nach Art der Einbindung – ab einer bestimmten Anzahl an Aufrufen kostenpflichtig wird. Die Einrichtung des Maps API-Keys stellt vor allem für diejenigen eine Herausforderung dar, die das nicht sehr regelmäßig tun. Wir haben die notwendigen Informationen zusammengetragen.

APIs aktivieren

Um Programmierschnittstellen, sogenannte APIs, zwischen Google Maps und eurer Website anzulegen, müsst ihr einen API-Schlüssel erzeugen. Dazu müssen zunächst die benötigten APIs aktiviert werden. Google generiert dann daraus einen API-Key, den ihr bei der Einbindung von Google Maps angeben müsst.

Google Cloud Plattform

Öffnet zunächst die »Bibliothek« der Google Cloud Platform. Ihr müsst dort angemeldet sein.

Es gibt mehrere Wege, zur Bibliothek zu gelangen. Wir klicken den Menü-Button und wählen »APIs & Dienste > Bibliothek«.

In der Bibliothek befinden sich alle benötigten APIs. Welche davon aktiviert werden müssen, hängt vom Nutzungsszenario ab. Im Fall von Google Maps handelt es sich in der Regel um diese:

• Geolocation API = damit der Standort des Besuchers bestimmt werden kann.
• Maps Embed API = damit eine Standard-Karte als eingebetteter <iframe> eingefügt wird.
• Maps JavaScript API = damit die Karte per JavaScript eingebunden wird, um volle Kontrolle über die Ausgabe zu haben.
• Maps Static API = damit die Karte als statisches Bild eingebunden wird.
• Places API = damit die Karte anhand von Adressen oder Namen Standorte findet und darstellt.

Teils werden euch die APIs schon in der Übersicht angezeigt, teils müsst ihr sie über die Suchfunktion finden.

Nachdem ihr die jeweilige API ausgewählt habt, aktiviert ihr sie in der Detail-Ansicht.

API-Schlüssel erstellen

Voraussetzungen

• Bevor ihr einen API-Schlüssel generieren könnt, muss auf der Google Maps Platform ein Rechnungskonto angelegt sein. Auch wenn ihr in den meisten Fällen Google Maps kostenlos einsetzen könnt, ist das Rechnungskonto Pflicht.
• Ihr müsst mindestens einen API-Schlüssel mit dem Projekt verknüpfen.

Vorgehen

Geht zur Google Cloud Platform-Konsole, klickt auf das Projekt-Dropdown und wählt das Projekt aus bzw. legt das Projekt an, für das der API-Schlüssel verwendet werden soll. Klickt anschließend den Menü-Button und wählt »APIs & Dienste > Anmeldedaten«.

Auf der Anmeldedaten-Seite klickt auf »Anmeldedaten erstellen« > »API-Schlüssel«. Der »API-Schlüssel erstellt«-Dialog zeigt den neu erstellten API-Schlüssel.

Der neue API-Schlüssel wird auf der Anmeldedaten-Seite unter API-Schlüssel aufgelistet. Ihr benötigt ihn später im HTML-Code oder in den Einstellungen von Plugins oder Content Management Systemen.

API-Schlüssel einschränken

Die Einschränkung des API Keys wird dringend empfohlen. Die Funktion erhöht die Sicherheit und verringert das Risiko, dass euch Kosten entstehen, indem Fremde euren API-Key nutzen.

Wenn ihr gerade einen neuen API-Schlüssel erstellt und im »Bestätigen-Dialog« direkt auf »Schlüssel einschränken« geklickt habt, überspringt den nächsten Absatz.

Wenn ihr zu einem späteren Zeitpunkt den API-Schlüssel einschränken möchtet, wählt folgenden Weg:

1. Google Cloud Platform Console
2. Projekt-Auswahl
3. »APIs & Dienste > Anmeldedaten«
4. »Anmeldedaten«-Seite
5. API-Schlüssel anklicken, den ihr absichern wollt

Anwendungseinschränkungen

Wählt in diesem Bereich »HTTP-Verweis-URLs (Websites)«.

Website-Einschränkungen

Fügt eure Website-Adresse (URL) hinzu. Behaltet dabei das vorgegebene Schema mit Sternchen und Slash bei (*.example.com/*), damit alle Unterordner, -seiten und Subdomains berücksichtigt werden.

API-Einschränkungen

Erinnerung: Die APIs müssen vorher aktiviert sein. Aktiviert »Schlüssel einschränken« und wählt im folgenden Auswahlfeld die von euch benötigten APIs aus. Im abgebildeten Beispiel nutzen wir alle fünf:

• Geolocation API
• Maps Embed API
• Maps JavaScript API
• Maps Static API
• Places API

Abhängig von euren Anforderungen kann noch eine API hinzukommen oder ihr benötigt weniger als in unserem Beispiel. Jedenfalls solltet ihr die API-Auswahl möglichst restriktiv anlegen.Abschließend das speichern nicht vergessen!

API-Schlüssel verwenden

Wenn ihr ein CMS oder ein Plugin verwendet, dass den API-Key erforderlich macht, kopiert den Key einfach in das entsprechende Eingabefeld.

Wenn ihr Google Maps per Code-Snippet einbindet, ersetzt YOUR_API_KEY mit eurem API-Schlüssel.

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
  type="text/javascript"></script>

Geschrieben von:

Jonas Hellwig

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Raimund Büchner

Raimund ist oft die erste Ansprechperson bei kulturbanause. Er kümmert sich hauptsächlich um die Betreuung und Beratung unserer bestehenden als auch künftigen Kundschaft. Ein weiterer Schwerpunkt seiner Tätigkeit liegt im Design nicht unmittelbar sichtbarer Dinge: Struktur und Inhalte. Projekte unterstützt er daher vor allem in der Anfangsphase in Bereichen wie Informationsarchitektur, UX-Design und Content Strategy.