thomaskekeisen.de

Aus dem Leben eines Bildschirmarbyters

Eigenen Google-API-Key erzeugen

Da wir mit Lulububu des Öfteren auch Webseiten entwickeln, auf denen Karten von Google Maps eingebunden sind, hier eine kurze Erklärung, wie die dafür benötigte Berechtigung respektive der sogenannte API-Key erzeugt werden kann. Dieses How-To bezieht sich vor allem auf die Nutzung in Verbindung mit dem CMSbolt und dem Feld-Typ geolocation.

1: Auf Google Cloud Console einloggen

Zugänge und Schlüssel zu fast allen Google-Produkten wie auch Google Maps werden auf console.cloud.google.com verwaltet. Hierzu muss sich entsprechend mit dem passenden Google-Account eingeloggt werden. Anschließend muss im Menü oben neben "Google Cloud Platform" auf "Projekt auswählen" geklickt werden.

Screenshot: Die Startseite der Google-Cloud-Platform

2: Projekt erstellen

Für jede Webseite sollte ein separates Projekt auf der Google Cloud Console erstellt werden. Das hat neben organisatorischen Gründen auch Vorteile, falls die verwendeten Zugänge eines Tages von Dritten zweckentfremdet oder missbraucht werden. Im schlimmsten Fall kann so verhindert werden, dass gleich alle Projekte von Google gesperrt werden. Existiert das gewünschte Projekt noch nicht, muss es mit einem Klick auf "Neues Projekt" angelegt werden.

Screenshot: Ein neues Projekt in der Google Cloud Console anlegen

Zum Erstellen des Projekts wird initial lediglich ein Projektname benötigt. Sobald dieser eingegeben ist, kann auf "Erstellen" geklickt werden.

Screenshot: Ein neues Projekt benötigt nur einen Projektnamen

Nach dem Klick auf "Erstellen" sollte das neue Projekt in der Projektliste auftauchen und kann ausgewählt werden.

Screenshot: Das Projekt erscheint jetzt in der Projektliste

3: APIs und Dienste auswählen

Nun müssen alle benötigten Dienste über den Reiter "APIs und Dienste" und dann auf "Dashboard" ausgewählt werden. Dieser Schritt kann auch übersprungen werden, wenn die gewünschten Dienste direkt über das Suchfeld gesucht werden.

Screenshot: Der Menüpunkt APIs und Dienste

4: Maps Javascript-SDK aktivieren

Damit eine Google Karte auf der eigenen Webseite angezeigt werden kann, wird der Dienst "Maps JavaScript API" benötigt. Mit dessen Key kann die Google Karte vollumfänglich genutzt und verwendet werden. Im gängigen Rahmen sogar kostenlos. Um den Dienst schnell zu finden kann in der Suche einfach Maps eingegeben und anschließend der Dienst "Maps JavaScript API" ausgewählt werden.

Screenshot: Die Suche nach dem Dienst Maps JavaScript API

Nach einem Klick auf die Kachel wird die Detail-Seite des Dienstes "Maps JavaScript API" geöffnet. Hier genügt anschließend ein Klick auf "Aktivieren".

Screenshot: So wird der Dienst Maps JavaScript API aktiviert

Nachdem der Dienst "Maps JavaScript API" aktiviert wurde, sollte das Dashboard respektive die Statistiken zum Dienst geöffnet werden und oben ein neuer Knopf zum Deaktivieren erscheinen. Dieser Knopf ist natürlich nicht zu drücken, bestätigt aber, dass der Dienst erfolgreich aktiviert wurde.

Screenshot: Der Dienst Dienst Maps JavaScript API ist jetzt aktiviert

5: Geocoding-Dienst aktivieren

Da das CMSbolt es auch erlaubt, über den Administrationsbereich gezielt nach Adressen in Textform zu suchen um sie auf der Google Karte anzuzeigen, muss auch noch der Dienst "Geocoding API" aktiviert werden. Dieser Dienst antwortet auf eine Anfrage mit einer Adresssuche im Erfolgsfall mit entsprechenden Geo-Koordinaten. Um den Dienst zu finden reicht auch hier eine Suche nach Geocoding .

Dieser Schritt kann übersprungen werden, falls nur ein Schlüssel für die Einbindung der Google Karte selbst benötigt wird.

Screenshot: Die Suche nach dem Dienst Geocoding API

Auch hier genügt ein Klick auf das Suchergebnis um die Detailseite zu öffnen. Um den Dienst zu aktivieren genügt ebenfalls ein Klick auf "Aktivieren".

Screenshot: Der Dienst Geocoding API wird aktiviert

Und natürlich sollte nach dem Klick auf "Aktivieren" das Dashboard des Dienstes geöffnet werden und im oberen Drittel wieder der "Deaktivieren"-Button als Bestätigung erscheinen.

Screenshot: Der Dienst Geocoding API ist jetzt aktiviert

6: API-Schlüssel generieren

Sind alle benötigten Dienste aktiviert muss jetzt im Menü "APIs und Dienste" auf "Anmeldedaten" geklickt werden.

Screenshot: Der Reiter Anmeldedaten unter APIs und Dienste

Dort muss im Tab Anmeldedaten, der automatisch geöffnet worden und noch leer sein sollte, in der kleinen Infobox auf "Anmeldedaten erstellen" geklickt werden.

Screenshot: Die Box zum Erstellen der Anmeldedaten

Im Falle der Einbindung der Google Karte auf einer Webseite wird entsprechend ein sogenannter API-Schlüssel benötigt. Darum genügt ein Klick auf den ersten Eintrag im Dropdown auf "API-Schlüssel".

Screenshot: Der API-Schlüssel wird erstellt

7: API-Schlüssel kopieren

Jetzt kann der generierte API-Schlüssel kopiert und dem verantwortlichen Entwickler mitgeteilt werden. Wichtig an dieser Stelle: Sowohl für den Dienst "Maps JavaScript API" wie auch den Dienst "Geocoding API" ist der gleiche API-Schlüssel gültig.

Screenshot:

8: Zahlungsdaten hinterlegen

Auch wenn die Nutzung der Karte im Regelfall nichts kosten sollte, so muss eine gültige Zahlungsart in der Google Cloud Console hinterlegt werden, bevor die Google-Karte auf der Webseite angezeigt werden kann. Falls also nach dem Login in der Google Cloud Console am oberen Bildschirm- respektive Browserrand ein entsprechender Hinweis erscheint, sollte diesem Folge geleistet werden.

Teilen

Kommentare