Falls auf eurer Website auf einmal die eingebettete Google Map nicht mehr funktioniert könnte das daran liegen, dass Google am 22. Juni 2016 die Bedingungen des Google Maps API Standard Plans geändert hat. Mit dieser Änderung ist es nun nicht mehr möglich eine Google Map ohne einen registrierten API Key zu verwenden. Als Resultat bekommt man an der Stelle, an der eigentlich die Map erscheinen sollte, nur noch einen grauen Kasten mit einer Fehlermeldung zu sehen und in der Javascript Konsole beschwert sich der Maps Code über einen fehlenden API Key.

Und so bekommt ihr einen API Key

Dieser Vorgang besteht aus drei Schritten.

  1. In der Google API Console ein Projekt erstellen oder auswählen
  2. Die Google Maps JavaScript API aktivieren
  3. Den API Key erzeugen

Das Projekt wählen

Dazu müsst ihr zunächst auf die Seite der Google API Console gehen und euch dort einen Account registrieren, oder euch mit einem bestehenden Google Account anmelden. Durch Klick auf das Burger Menu links oben wechselt ihr nun in den Bereich „API Manager“. Über das Dropdown oben links neben dem Google Logo könnt ihr nun ein „Projekt erstellen“. Ich lege grundsätzlich ein Projekt pro Website an, da das Kontingent, welches man für die Maps Aufrufe von Google bekommt jeweils pro Projekt zählt und man so auch sehen kann welches Projekt wie viel Kontingent verwendet.

Die API aktivieren

Damit das neu erstellte Projekt die Maps API nun auch benutzen darf müsst ihr in der „Bibliothek“ zunächst die „Google Maps JavaScript API“ suchen und anklicken. Auf der API Seite findet ihr oben neben der Überschrift nun den Button zum „Aktivieren“ der API. Sollte euer Script weitere API Dienste nutzen wie zum Beispiel die Geocoding API, die mir zu einer Adresse die passenden Geokoordinaten liefert, so müsste ihr diese APIs separat aktivieren.

Den Key erstellen

Nun fehlt euch nur noch der eigentliche Key. Dazu wechselt ihr in der linken Navigation zu den „Zugangsdaten“. Dort findet ihr im Reiter „Anmeldedaten“ den Button „Anmeldedaten erstellen“. Nach dem Klick auf den Button wählt ihr nun den Punkt „API-Schlüssel“ und danach den Punkt „Browserschlüssel“, denn der Key wird schlussendlich von dem Client-Browser verwendet.

Auf der folgenden Seite könnt ihr den neu erzeugten Schlüssel noch benennen und – ganz wichtig – die Websites/HTTP-Referer eintragen, die diesen Schlüssel verwenden dürfen, denn sonst könnte jeder euren Key von einer Website kopieren und in seiner eigenen verwenden und somit euer Kontingent verbrauchen.

Damit ihr nicht jeder Unterseite einzeln eintragen müsst verwendet ihr am besten die von Google vorgeschlagene Notation für die URLs. Sofern eure Seite sowohl mit als auch ohne „www.“ erreichbar ist müsst ihr allerdings zwei Einträge vornehmen, einmal mit dem „*.“ am Anfang und einmal ohne.

HINWEIS: dieser Schritt wurde von Google leicht verändert. Nun muss man sich nicht mehr zwischen Browser- oder Serverschlüssel entscheiden. Es gibt nur noch „einen“ Schlüssel. Außerdem kann man nun auswählen mit welcher Methode man den Schlüssel vor Fremdzugriff schützen möchte.

Nach einem Klick auf „Erstellen“ bekommt ihr nun endlich den API Key angezeigt. Diesen könnt ihr als Parameter im script-Tag des Google Map Scripts in eurer Website einbinden. Das sieht dann so aus:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY" async defer></script>

Wichtiger Hinweis: Es kann bis zu 5 Minuten dauern, bis sich Änderungen auswirken, die ihr in der API Console vorgenommen habt. Es könnte also ein paar Minuten dauern, bis eure Map den frisch erstellten API Key akzeptiert.

Der API Key und ein CMS

Solltet ihr ein CMS wie Typo3 oder ein Blog-System wie WordPress verwenden gestaltet sich der Einbau des API Key je nach System etwas trickreicher. Hier ist die Hauptfrage: wie genau ist die Google Map eingebunden? Als Plugin? Dann schaut in den Plugin Einstellungen, ob es dort ein Feld für den API Key gibt. Wurde die Map mit einem Theme mitgeliefert? Dann schaut in den Theme Options nach ob es dort ein entsprechenden Feld gibt. Eventuell müsst ihr auch das Plugin oder den Theme zunächst aktualisieren. Viele Theme- und Plugin-Entwickler haben dieses Feld bisher nämlich nicht berücksichtigt, da es bis dato gar nicht notwendig war.

Viel Erfolg!