Google Maps - something went wrong

Oops – Google Maps ladet nicht mehr auf meiner Homepage

In WordPress kann man eine Google Map meist über einen Shortcode einfach auf der Kontaktseite einzubinden. Seit Juli 2016 funktioniert das jedoch für neu erstellte Karten nicht mehr.


Ergänzung 3.1.2017: Seit Anfang 2017 kommt auch bei einigen älteren Webseiten statt der Karte eine Fehlermeldung „Hoppla! Ein Fehler ist aufgetreten.

Statt der Karte wird jetzt dieses Bild angezeigt:

Oops! Something went wrong. This page didn't load Google Maps correctly. See the JavaScript console for technical details.

"hoppla! Ein Fehler ist aufgetreten" bei Google Maps Anzeige

oder die Koordinaten werden nicht angenommen und die Karte zeigt einen Punkt mitten im Meer – auch nicht viel besser.

Die Lösung:

Einen Google Maps API key anfordern und bei den Einstellungen im WordPress Theme eintragen.

Und so geht’s im Detail:

Schritt 1

Beim Gmail-Konto bzw. Google+ anmelden.

Schritt 2 – API Schlüssel anfordern

Auf diese Seite gehen:
 https://developers.google.com/maps/documentation/javascript/get-api-key#key

und über den Button Schlüssel anfordern einen API Schlüssel anfordern.

Schritt 3 – Den Nutzungsbedingungen zustimmen

Google Maps API Key - Nutzungsbedingungen zustimmen

Mit der Zustimmung wird ein Projekt erstellt.

Schritt 4

Das dauert jetzt eine Weile bis man auf dieser Seite landet:

Google Maps API Key - Manager für Zugangsdaten

Die Vorauswahl „Google Maps JavaScript API“ stimmt für das was wir wollen. Einfach auf den blauen Button „Welche Anmeldedaten brauche ich?“ klicken.

Google Maps API Key erstellt

Unter Punkt 2 „Anmeldedaten abrufen“ steht jetzt bereits der Google API Schlüssel, den wir benötigen, damit Google Maps auf der eigenen Website angezeigt wird.

Schlüssel 5 – Einschränken auf die eigene Website (optional)

Empfehlenswert ist es, zusätzlich den Schlüssel auf die eigene Website einzuschränken. Auf „Schlüssel einschränken“ klicken, dann  „HTTP-Verweis-URLs (Websites)“ anklicken und statt „*.example.com/*“ die URL der eigenen Website eintragen – so wie auf der Seite vorgeschlagen, also ohne Anführungszeichen.

Beispiele:

*.webdesign-tashi.at/*

Den Namen „API-Schlüssel 1“ kann man lassen oder – wenn man mehrer Keys generiert (z.B. für jede Website einen eigenen) – auch mit einem sprechenden Projektnamen überschreiben.

Schritt 6 – Schlüssel im WordPress Backend eintragen

Den Schlüssel im Feld „Das ist Ihr API-Schlüssel“ trägt man nun bei seinem Theme in WordPress ein (wo genau ist vom Theme abhängig) – oder man schickt ihn seinem Webmaster.

Falls der Schlüssel nicht funktioniert, also die Google Karte noch immer nicht auf der Homepage angezeigt wird:

  • Die Einschränkung auf die eigene Website in Schritt 4 entfernen.
  • Ist WordPress aktuell? WordPress 4.5.3 ist die Minimum-Version.
  • Ist das eigene Theme aktuell? Da die gesamte Funktionalität erst seit Sommer 2016 bei Google existiert, bieten Themes die Möglichkeit zum Eintrag auch erst in Versionen, die danach herausgegeben wurden.

Sie brauchen Hilfe bei der Umsetzung?