Stand: 12. November 2019
Lesezeit: 7-10 Minuten
Umsetzungszeit: ca. 30 Minuten

Früher war die Einbindung einer Google Map in eine Website ziemlich einfach. In den meisten Content Management System (wie WordPress, Joomla, TYPO3 oder Drupal) musste man lediglich ein Plugin oder eine Extension installieren und die Koordinaten eintragen – schon wurde die Karte mitsamt Marker wenige Sekunden später im Frontend angezeigt.

Seit geraumer Zeit ist dies nicht mehr so einfach möglich, man benötigt nämlich nun einen API Key für Google Maps, um sich eine Karte auf seiner Website anzeigen zu lassen. Ohne diesen API-Schlüssel (API steht übrigens für application programming interface) wird folgende Fehlermeldung angezeigt:

Google Maps Fehler

Öffnest du die Entwicklertools in deinem Browser (Rechtsklick in den Seitenbereich > Untersuchen) dann wirst du in der Konsole einen Fehler dieser Art in roter Schriftfarbe erblicken:

Google Maps JavaScript API error: RefererNotAllowedMapError
https://developers.google.com/maps/documentation/javascript/error-messages#referer-not-allowed-map-error
Your site URL to be authorized: https://example.com/kontakt/

Wie du diesen Fehler beheben kannst, sodass die Karte auf deiner Website korrekt angezeigt wird, erkläre ich dir in dem nachfolgenden Tutorial. Es gibt eine Vielzahl an Fehlermöglichkeiten. In unserem Fall ist die URL nicht für die Verwendung des API Schlüssels autorisiert.

Google Maps API Key anlegen

Schritt 1) Wenn du bereits ein Konto bei Google hast, kannst du diesen Schritt überspringen. Ansonsten musst du einen Account bei Google erstellen.

Schritt 2) Gehe anschließend zur Google Cloud Platform. Diese findest du unter https://cloud.google.com/. Du kannst allerdings auch gleich direkt zur Maps Platform gehen, indem du die Seite https://cloud.google.com/maps-platform/ öffnest.

Google Maps Platform

Schritt 3) Dort wählst du den Typ „Maps“ aus und klickst auf „Weiter“. Im nächsten Schritt musst du ein Projekt anlegen. Dieses nennst du am besten entsprechend deiner Domain „example.com“ und klickst anschließend auf den nächsten Schritt.

google maps projekt anlegen

Schritt 4) Im letzten Schritt musst du ein Rechnungskonto erstellen. Es ist nicht möglich, einen Maps API-Key zu erstellen, ohne deine Kreditkartendaten oder Kontodaten in der Google Cloud Platform zu hinterlegen. Führe die diesbezüglichen Schritte (Landesauswahl, Akzeptieren der Nutzungsbedingungen, Angabe der Kontaktdaten und Zahlungsdaten) durch. Du erhältst von Google auch ein Guthaben über 300 US-Dollar für die ersten 12 Monate. Nach Ablauf des Testzeitraums musst du dein Konto manuell in ein kostenpflichtiges Konto umwandeln.

Es ist übrigens unwahrscheinlich, dass für dich jemals echte Kosten anfallen werden. Denn das Guthaben deckt z.B. den Aufruf von 100.000 statischen Karten ab. Nur falls dein Geschäftsmodell ohne den permanenten Einsatz einer Karte nicht auskommen sollte, musst du dir über diese Begrenzungen zu einem späteren Zeitpunkt Gedanken machen, es kann sonst bei der Kreditkartenabrechnung zu unliebsamen Überraschungen kommen. Eine Übersicht über alle Preise findest du unter https://cloud.google.com/maps-platform/pricing/sheet/.

Verwaltung deines Projekts in der Maps Platform

Sobald du dein Konto angelegt hast, kannst du dein Projekt unter https://console.cloud.google.com/google/maps-apis/overview verwalten. Du kannst auch ein weiteres Projekt anlegen, beispielsweise wenn du mehrere (unterschiedliche) Seiten verwaltest oder deine Keys separat verwalten und auswerten willst.

API Schlüssel anlegen

Klicke dazu auf das Hamburger-Icon auf der linken Seite und navigiere anschließend über APIs & Dienste zum Punkt „Anmeldedaten“.

APIs & Dienste, Anmeldedaten

Dort klickst du anschließend auf „Anmeldedaten erstellen“ und wählst den ersten Punkt „API Schlüssel“ aus. Sobald du auf „API Schlüssel“ klickst, wird dieser erstellt und angezeigt. Diesen Key kannst du in die Zwischenablage (am besten in Texteditor-File) kopieren, weil du ihn später für das Hinterlegen auf deiner Website brauchst.

API Schlüssel einschränken

Um den Schlüssel einzuschränken (das solltest du unbedingt machen, weil dein Key ansonsten missbraucht werden kann) klickst du auf „SCHLÜSSEL EINSCHRÄNKEN“. Anschließend gelangst du zur Übersichtsseite deines API Schlüssels (nachfolgender Screenshot):

Google API Key einschränken

Schritt 1) Zuerst gibst du deinem Key einen Namen (oben links). Verwende hier am besten wieder die Domain deiner Website, wo du den API Key verwenden wirst. So behältst du die Übersicht, falls du verschiedene Projekte und/oder verschiedene API Keys einsetzt.

Schritt 2) Anschließend kannst du bei ANWENDUNGSEINSCHRÄNKUNGEN einen HTTP-Verweis oder eine IP-Adresse hinterlegen. Damit stellst du sicher, dass der API Key nur auf deiner Seite verwendet werden kann. Bei der Auswahlmöglichkeit HTTP-Verweis-URLs (Websites) kannst du darunter durch Klick auf HINZUFÜGEN deine Domain eingeben. Das empfohlene Format findest du auf der rechten Seite. Gib dazu einfach deine Domain im Format *.example.com/* ein, wenn du willst dass der Key auf allen Unterseiten deiner Website verwendet werden kann.

Ich würde dir nicht empfehlen, eine absolute URL (z.B. https://www.example.com/kontakt) einzugeben, weil du dich damit zu sehr einschränkt. In meinem Beispiel würde der API Key beispielsweise nicht funktionieren, wenn jemand auf https://www.example.com/kontakt/ gelangt (dies verhindert der „/“ am Ende der URL).

Schritt 2a) Wenn du die IP deines Servers kennst (beispielsweise kannst du diese mit der Chrome-Erweiterung von DNSlytics erfahren), kannst du auch die Auswahlmöglichkeit IP-Adressen verwenden. Achtung: solltest du deinen Serveranbieter zu irgendeinem Zeitpunkt wechseln, dann hast du eine neue Server-IP und musst diese IP-Einstellung dementsprechend aktualisieren.

Sobald du alle Einstellungen getätigt hast, kannst du links unten auf SPEICHERN klicken. There you go: dein API-Key mit HTTP- oder IP-Einschränkung ist angelegt.

API Schlüssel in der Website hinterlegen

Du hast deinen API Key hoffentlich noch bei der Hand. Wenn du ihn vorher nicht gespeichert hast, kannst du ihn auch jederzeit aus der Projekt-Übersicht kopieren. Anschließend navigierst du ins Backend deiner Website. Wenn du eine WordPress-Seite hast, bindest du deine Karte am besten mit einem Plugin oder direkt über deine Theme ein.

Im beliebten Divi Builder kannst du dies etwa unter Divi > Theme-Optionen und dann bei „Google-API-Schlüssel“ hinterlegen. Einfach den Key reinkopieren, abspeichern, fertig.

Divi Builder API Key

Über ein generisches Plugin (wie etwa WP Google Maps) ist es genau so einfach, einfach nach dem Eintrag für „Google Maps API Schlüssel“ oder „Google Maps API Key“ suchen und deinen Key einfügen. Anschließend kann es 5-15 Minuten dauern, bis die Verbindung zwischen Website und der Google Cloud Platform hergestellt ist und Google die Info erhält, dass der Key gültig ist. Ab diesem Zeitpunkt wird die Karte korrekt in deinem Frontend angezeigt und etawaige Fehler sollten aus der Konsole verschwunden sein.

DSGVO bzw. Cookie-Richtlinie und Google Maps 

Sobald du eine Google Map in deiner Website eingebunden hast, kommuniziert dein Browser jedes Mal direkt mit dem Google-Server, sobald du die betreffende Seite öffnest. Daher ist es dringend empfohlen, einen Hinweis über die Verwendung von Google Maps in die Datenschutzerklärung einzubinden. Gemäß Datenschutzgrundverordnung (DSGVO) ist dies immer dann notwendig, wenn der Browser eine Verbindung zu einem Drittanbieter (in diesem Fall Google Maps) herstellt. Einen kostenlosen Datenschutzgenerator für den betreffenden Text findest du etwa auf der Website des bekannten Datenschutzexperten Dr. Schwenke aus Berlin.

Außerdem solltest du deine Karte erst dann laden/anzeigen (lassen), sobald diese jemand aktiv „entsperrt“. Eine technische Lösung dazu findest du direkt per Mausklick in vielen bekannten Themes (wie etwa Enfold) oder aber auch über ein (kostenpflichtiges) Cookie-Plugin wie etwa Borlabs Cookie oder GDPR Cookie Consent Plugin. Diese enthalten im Funktionsumfang auch einen Content-Blocker. Dieser blockiert (auf Wunsch) beim Öffnen der Seite alle Cookies von Drittanbietern. Neben Google Maps ist zum Beispiel auch YouTube ein beliebter Anwendungsfall. Erst wenn der Nutzer sein aktives OK gibt, wird der entsprechende Content geladen.

Zusammenfassung

Es war schon einmal (viel) einfacher, eine Landkarte in die eigene Website einzubinden. Doch mit der oben stehenden Anleitung schaffst du es hoffentlich auch ohne technischen Support, einen Google Maps API Key anzulegen und in deine Website einzubinden. Wenn du aber doch weitere Fragen hinsichtlich der DSGVO-optimierten Einbindung von Google Maps auf deiner Website hast, dann kontaktiere uns am besten noch heute. Wir beraten dich gerne, wie du Content von Drittanbietern (Google Maps, YouTube, Vimeo usw.) gesetzeskonform einbindest und teure Abmahnungen vermeiden kannst.


Quelle Titelbild: pexels.com

0 Kommentare

Dein Kommentar

An Diskussion beteiligen?
Hinterlasse uns Deinen Kommentar!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.