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.
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.
- Schritt 2: Wählen Sie Ihre Google Maps-Produkte. Im Normalfall sollte die Auswahl „Maps“ genügen.
- Schritt 3: Erstellen Sie ein Projekt
- 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.
Schritt 5: Bestätigen oder ändern Sie das Land Ihrer Rechnungsadresse
- Schritt 6: Tragen Sie Adress-, Kontakt- und Zahlungsdaten ein
- Schritt 7: Tragen Sie Adress-, Kontakt- und Zahlungsdaten ein
- Schritt 8: API-Schlüssel kopieren
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
- Schritt 9: Klicken Sie in der Ansicht „APIs & Dienste“ (Bild 2.1) auf das Schlüsselsymbol
- Schritt 9: Klicken Sie rechts neben Ihrem API-Schlüssel auf das Stiftsymbol, um Ihren API-Schlüssel einzuschränken (Bild 2.2)
- 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
- 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.
- 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.
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.
