Fehlerbehebung bei Google Maps auf Ihrer Website

Sie sehen anstelle der Karte den Hinweis „Google Maps wurde auf der Seite nicht richtig geladen“? Dies hat meist einen recht simplen Grund, denn seit dem 22.06.2016 benötigt man einen API-Schlüssel um den Kartendienst Google Maps auf der eigenen Website zu verwenden. Die betrifft vorerst zwar nur Webseiten die bis zum 22.06.2016 noch keine Google Karte verwendet haben, aber auch nach einem Update des verwendeten Scripts kann einen API-Schlüssel erforderlich machen.

Einen API-Schlüssel zu erhalten ist nicht besonders schwer und Google hat eine entsprechende Plattform eingerichtet über die Sie die kostenlosen Schlüssel einfach erstellen und verwalten können.

Was besagt die Fehlermeldung denn aber nun genau?

Grundlegend kann diese Fehlermeldung mehrere Ursachen haben also lassen Sie uns erst einmal genau herausfinden wo der Fehler liegt. Für die Fehleranalyse müssen Sie sich ein wenig mit Ihrem Browser und der entsprechenden Entwicklungsumgebung auskennen, denn zur Anzeige der eigentlichen Fehlermeldung benötigt man eine JavaScript-Konsole.

Hoppla! Etwas ist schief gelaufen. Auf dieser Seite wurde Google Maps nicht richtig geladen. Sehen Sie sich die JavaScript-Konsole für technische Details an.

Wie Sie die JavaScript-Konsole in Ihrem Browser öffnen können finden Sie auf Stackoverflow gut beschrieben, oder Sie kontaktieren Ihren Webmaster oder auch uns um den Fehler beheben zu lassen.

Google Maps Console Fehler

Die vier folgenden Fehlermeldungen sind die häufigsten Meldungen die uns in der Jahrelangen Tätigkeit über den Weg gelaufen sind und wahrscheinlich wird auch Ihr Problem eines der vier sein:

  1. MissingKeyMapError - Der API-Schlüssel fehlt
  2. RefererNotAllowedMapError – Der API-Schlüssel ist für diese URL nicht erlaubt
  3. ApiNotActivatedMapError – Der API-Schlüssel ist nicht aktiviert
  4. InvalidKeyMapError - Die verwendete API-Schlüssel ist falsch

Wie Fixt man MissingKeyMapError

Dieser Fehler besagt das Sie noch keinen API-Schlüssel verwenden und der Schlüssel nachgetragen werden muss.

Erstellen Sie eine Google Maps-API-Key

Führen Sie die folgenden Schritte zum Erstellen und eines kostenlosen Google Maps API Key durch.

  1. Besuchen Sie folgenden Seite: https://developers.google.com/maps/documentation/javascript/get-api-key
  2. Klicken Sie auf den Button „Schlüssel anfordern“, ab hier müssen Sie sich mit ihrem vorhandenen Google Konto anmelden.
  3. Als nächstes werden Sie gebeten ein neues Projekt anzulegen, das Projekt stellt in der API Konsole Ihre Website dar und kann alle API Schlüssel die Sie für Ihre Website benötigen aufnehmen.

Google Maps API registrieren

In diesem Schritt erstellen wir nun den eigentlichen API-Schlüssel:

  1. Der Vorgegebene Name kann natürlich angepasst werden
  2. Und Sie müssen auf „HTTP-Verweis-URLs (Websites)“ klicken.
  3. In dem Anfragen von diesem http… tragen Sie die beiden folgenden Optionen ein:
    yourname.com/*
    * .yourname.com / *
  4. Als letztes klicken Sie noch unten auf den Button erstellen.
  5. Nach dem Klick auf den Button erscheint ein PopUp-Fenster aus dem Sie den Schlüssel kopieren können.

Hinweis: Google sagt, dass es bis zu 5 Minuten dauern kann bis ein neuer API-Schlüssel aktiv wird. In Ausnahmefällen hat die Aktivierung aber schon bis zu 30 Minuten gedauert.

Den Fehler RefererNotAllowedMapError Fixen

Der Fehler RefererNotAllowedMapError kommt auch sehr häufig vor und besagt „nur“ das der Schlüssel nicht für Ihre Website freigegeben ist.

  1. Öffnen Sie die folgende Url: https://console.developers.google.com/apis/credentials
  2. Klicken Sie den Namen Ihres API-Schlüssels um die Einstellungen zu bearbeiten.
  3. Sehen Sie nach ob bei der Schlüsseleinschränkung „HTTP-Verweis-URLs (Websites)“ gewählt ist und im Feld „Anfragen von diesem http…“ die Optionen
    yourname.com/*
    * .yourname.com / *
    eingetragen sind.
  4. Klicken Sie auf den Button „Speichern“ um die neuen Einstellungen zu übernehmen.

Tipp: Wenn Sie mehrere Projekte erstellt haben stellen Sie sicher, dass Sie mit dem richtigen arbeiten. Oben links finden Sie ein Dropdownfeld um zwischen den einzelnen Projekten hin und her zu wechseln.

Wie „ApiNotActivatedMapError“ fixen

Google Maps hat zurzeit 16 verschiedene APIs. Der Google Maps JavaScript-API ist dabei nur der beliebteste. Nun kann es vorkommen dass der Schlüssel welchen Sie verwenden einfach in Ihrem Konto noch nicht aktiviert wurde.

  1. Öffne Sie: https://console.developers.google.com/apis/library
  2. Unter "Google Maps API", klicken Sie auf "Mehr" um alle APIs zu sehen.
  3. Klicken Sie auf den Google Maps-APIs den Sie verwenden wollen
  4. Im nächsten Fenster sehen Sie direkt oben ob der Shlüssel aktiv ist und wenn nicht
  5. Klicken Sie einfach auf „Aktivieren“

Tipp: es kann einige Minuten dauern bis die Aktivierung wirklich durchgeführt wurde und der API-Schlüssel dann auch funktioniert.

Was ist „InvalidKeyMapError“?

InvalidKeyMapError bedeutet einfach das der angegeben Schlüssel nicht korrekt ist. In den allermeisten Fällen ist entweder noch ein veralteter Schlüssel im Script eingetragen oder beim Kopieren wurde nicht der gesamte Schlüssel kopiert und eingefügt.

  1. Gehen Sie auf: https://console.developers.google.com/apis/credentials
  2. Öffnen Sie das entsprechende Projekt und kopieren Sie den passenden Schlüssel einfach erneut.
  3. Tragen Sie den Schlüssel in Ihrem Script ein.

Verwandte Themen

Cookies erleichtern die Bereitstellung unserer Dienste. Mit der Nutzung unserer Dienste erklären Sie sich damit einverstanden, dass wir Cookies verwenden.
Weitere Informationen Ok