Hilfe

Google Maps-Fehler:

Google Maps kann auf dieser Seite nicht richtig geladen werden

Wie sieht der Fehler Aus?

Wenn auf Ihrer Webseite die Google Map aussieht, wie auf dem folgenden Bild, sind sie betroffen. 

Google-Maps-Fehler
Anzeigefehler Google Maps

Was ist die ursache?

Für die Verwendung von Google Maps braucht man seit Mitte 2018 einen gültigen API-Schlüssel. Wer ihn nicht eingebunden hat, ist vom Service ausgeschlossen.

 

Wie kann ich das Problem beheben?

Da eine unbrauchbare Karte auf Webseiten sowohl Reputation als auch Funktion mindert, möchten wir Ihnen hier 2 Lösungsansätze aufzeigen, damit Sie schnell wieder ansehnliches Kartenmaterial auf Ihrer Webseite präsentieren können.

1. Google Maps-API-schlüssel einbinden

Der API-Schlüssel lässt sich relativ einfach einbinden. Sie brauchen einen Google Business-Account und ein Rechnungskonto. Wenn Sie noch keinen Google-Account haben, können Sie ihn hier erstellen.

Rechnungskonto klingt erstmal nach Kosten. Die können auch tatsächlich entstehen. Aber nur dann, wenn Sie mehr als 100.000 statische Kartenaufrufe pro Monat haben. Rein praktisch sollten die meisten Webseitenbetreiber mit dem monatlichen Guthaben von 200 $ kostenfrei bleiben. Zur offiziellen Preisliste gelangen Sie hier

Unser Tutorial umfasst das Generieren des API-Schlüssels inklusive Erstellen eines Rechnungskontos. Wenn Sie bereits über ein Rechnungskonto verfügen, überspringen Sie die entsprechenden Schritte einfach.

  • Schritt 1: Starten Sie mit der Erstellung des API-Schlüssels auf der Google Maps Platform und klicken Sie dort auf JETZT STARTEN.
Google-Maps-Platform
Bild 1.1 - Google Maps Platform
  • Schritt 2: Wählen Sie Ihre Google Maps-Produkte. Im Normalfall sollte die Auswahl „Maps“ genügen.
Optionen-Google-Maps-API
Bild 1.2 - Auswahl der Google Maps-Produkte
  • Schritt 3: Erstellen Sie ein Projekt
Projekt-erstellen
Bild 1.3 - Google Maps Projekt erstellen
  • Schritt 4: Wenn anschließend der Hinweis aus Bild 1.4 erscheint, fahren Sie mit der Erstellung des Rechnungskontos fort indem Sie einen Namen für Ihr Rechnungskonto vergeben.
Google Maps-Rechnungskonto-Hinweis
Bild 1.4 - Rechnungskonto: Hinweis
Rechnungskonto-erstellen
Bild 1.5 - Rechnungskonto: Name vergeben

Schritt 5: Bestätigen oder ändern Sie das Land Ihrer Rechnungsadresse

Google Maps-Rechnungskonto-Land-Währung
Bild 1.6 - Rechnungskonto: Währung und Land bestätigen
  • Schritt 6: Tragen Sie Adress-, Kontakt- und Zahlungsdaten ein
Google Maps-Rechnungskonto-Angaben
Bild 1.7 - Rechnungskonto: Firmen- und Zahlungsdaten eintragen
  • Schritt 7: Tragen Sie Adress-, Kontakt- und Zahlungsdaten ein
Google Maps-Rechnungskonto-Angaben
Bild 1.8 - Rechnungskonto: Firmen- und Zahlungsdaten eintragen
  • Schritt 8: API-Schlüssel kopieren
Google-Maps-API-Schluessel
Bild 1.9 - API-Schlüssel + Kopierfunktion

Grundsätzlich ist der API-Schlüssel jetzt erstellt und Sie können ihn für Ihre eigenen Google-Karten verwenden. Es ist allerdings sehr wichtig, dass Sie den Schlüssel so einschränken, dass er nur von Ihnen benutzt werden kann.

  • Schritt 9: Wechseln Sie zum Dashboard der Google Cloud Platform (Bild 2.0) und klicken Sie auf APIs & Dienste
Google Cloud Platform
Bild 2.0 - Dashboard der Google Cloud Platform
  • Schritt 9: Klicken Sie in der Ansicht „APIs & Dienste“ (Bild 2.1) auf das Schlüsselsymbol
Google Cloud Platform-APIs-Dienste
Bild 2.1 - Ansicht APIs & Dienste
  • Schritt 9: Klicken Sie rechts neben Ihrem API-Schlüssel auf das Stiftsymbol, um Ihren API-Schlüssel einzuschränken (Bild 2.2)
Google Maps-API-Schluessel-bearbeiten
Bild 2.2- API-Schlüssel bearbeiten
  • Schritt 10: Klicken Sie in der Ansicht „API-Schlüssel einschränken und umbenennen“ (Bild 2.3) unterhalb von Anwendungseinschränkungen auf HTTP-Verweis-URLs (Websites) und anschließend auf HINZUFÜGEN
Google Maps API-Schluessel-einschraenken
Bild 2.3 - API-Schlüssel einschränken
  • Schritt 11: In dem sich jetzt öffnenden Eingabefeld geben Sie Ihre Domain-URL ohne http:// und www eingeschlossen von 2 Sternsymbolen (*.meine-domain.de/*) ein. Damit kann der Google Maps-API-Schlüssel nur von Ihrer Domain verwendet werden und Sie schließen die unautorisierte Nutzung aus. Wenn Sie zusätzliche Domains verwenden möchten wiederholen Sie diesen Vorgang einfach.
Google Maps API-Domain-eintragen
Bild 2.4 - Domain festlegen
  • Schritt 12: Nachdem Sie Ihren Google Maps API-Schlüssel erzeugt und abgesichert haben, müssen Sie ihn noch bei der Karte auf Ihrer Website einbinden. Die Möglichkeit den API-Key einzubinden ist so vielfältig wie die am Markt erhältlichen Websitetools und -themes. Sie sollten aber in gut dokumentierten Systemen schnell herausfinden, wo der API-Key hinterlegt werden muss. Andernfalls kontaktieren Sie einfach Ihren Webmaster, Ihre Internetagentur oder Ihren Webdesigner.
Google Maps API-Schluessel-Website
Bild 2.5 - API-Schlüssel beim WordPress-Theme Avada

2. Anbieter, Tools und Plugins verwenden, die ohne API-Schlüssel auskommmen

Als Alternative zum Google Maps-API-Verfahren kann man sich entweder für einen anderen Kartendienst entscheiden oder auf Lösungen zurückgreifen, die die Verwendung von Google Maps auch ohne API-Key ermöglichen.

2.1. Open Street Map verwenden

Das Open Street Map-Projekt erlaubt die freie Verwendung von Kartendaten auch für die eigene Website. Wie die Einbindung von statten geht, ist in diesem Wiki-Artikel erklärt.

2.2. Tools und Plugins für Google Maps

Allein bei der Suche in der WordPress Plugin-Datenbank erhält man unter dem Stichwort „Google Maps“ über 1.400 Einträge. Daher gehen wir exemplarisch auf 2 Lösungen auf WordPress-Basis ein. 

  • Mit dem WordPress-Plugin WP Google Maps sind Sie auch mit der kostenlosen Version in der Lage, eine statische Google-Karte ohne API auf Ihrer Website einzubinden. 
  • In einigen Website-Buildern, wie zum Beispiel Elementor ist das Google Map-Karten-Element auch ohne API-Schlüssel nutzbar.
Teilen
Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on pinterest

Um unsere Webseite für Sie optimal zu gestalten und fortlaufend verbessern zu können, verwenden wir Cookies.
Durch die weitere Nutzung der Webseite stimmen Sie der Verwendung von Cookies zu.
Weitere Informationen zu Cookies erhalten Sie in unserer Datenschutzerklärung.

eBook-Kommunikation-Resoltat
Salonempire-Google-Ads
Oberwasser-JTBD-Google-Ads
eBook-Pflegeimmobilien-Optimo-Invest
Optimo-Invest-Facebook-Ads
LinkedIn-Ads-Telefon-Service-Business-Center-Hannover
Facebook-Ads-ebook-Gründer