Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren
WordPress Google Maps Anleitung: In diesem kurzen Beitrag, erfährst Du alles, was Du über WordPress & Google Maps wissen musst. Du bekommst haargenau gezeigt, wie Du eine Google Maps Karte auf Deiner Website einbindest & welche fatalen Fehler man dabei machen kann.
Dir werden mehrere Wege gezeigt: Unter anderem, wie Du Google Maps mit & ohne Plugin einbinden kannst. Du erfährst auch, was ein API Key ist und wieso jede gewerbliche Website einen API Key benötigt, um Google Maps konform nutzen zu können. Das alles bekommst Du jetzt leicht & verständlich erklärt. Los geht’s…
Inhaltsverzeichnis
- Google Maps per iFrame oder API Key einbinden?
- Google Maps per iFrame einbinden
- Google Maps mit API Key einbinden
- Drei WordPress Plugins für Google Maps
a) Google Maps Widget
b) Google Maps Easy
c) WP Google Map Plugin - Wie du Google Maps mit der DSGVO in Einklang bringst
- Clevere Tricks für WordPress Google Maps
a) Google Maps Routenplaner verlinken
b) Google Maps verlinken statt einzubetten - FAQ
a) Was sind Alternativen zu Google Maps?
b) Darf ich einen Screenshot von Google Maps machen und diesen auf der Webseite einbinden?
1. Google Maps per iFrame oder API Key einbinden?
Um auf deiner WordPress Webseite Google Maps einzubinden, sind verschiedene Wege möglich. Am häufigsten kommt dabei die Einbettung über einen iFrame oder die Verwendung eines API Keys in Frage.
Ein iFrame musst du dir vorstellen wie ein Schaufenster zu einer anderen Webseite. Dieses „Schaufenster“ wird als HTML-Code an einer beliebigen Stelle auf deiner Webseite eingefügt.
Wieviel Platz der iFrame auf einer Seite einnimmt, kannst du über den Code selbst definieren. Anschließend wird noch der Ziel-Link in den iFrame geschrieben – nun kannst du innerhalb des iFrames mit der externen Seite interagieren. Auch wenn sich das vielleicht kompliziert anhört, ist es am Ende wirklich einfach, wie Du gleich sehen wirst.
Wichtig: Die Einbettung eines iFrame von Google Maps in WordPress ist nur für den privaten Gebrauch zulässig. Wenn du Google Maps auf einer gewerblichen Seite einsetzen willst, ist ein sogenannter API Key notwendig.
Der API Key setzt eine direkte Datenschnittstelle zu Google Maps. Um auf diese Schnittstelle zugreifen zu können, ist eine Registrierung bei der Google Cloud Plattform erforderlich.
Beide Wege – die Einbettung per API Key und per iFrame werden Dir jetzt ganz genau erklärt…
2. Google Maps per iFrame einbinden
Schritt 1: Erstelle in WordPress einen neuen „Beiträge“ oder eine neue „Seiten“. Alternativ wählst du einen bestehenden Beitrag / Seite aus, in den Google Maps eingebettet werden soll. Stelle sicher, dass der Beitrag / die Seite bereits veröffentlicht ist.
Schritt 2: Nun öffnest du Google Maps und gibst im Suchfeld die gewünschte Adresse ein, die nachher auf der Google Maps Karte auf Deiner Website zu sehen sein soll.
Anschließend klickst du in der linken Spalte auf den Eintrag „Teilen“.
Schritt 3: Ein neues Fenster öffnet sich mit den entsprechenden Kartendaten. Wechsle zunächst zum Reiter „Karten einbetten“ und kopiere den darunterliegenden iFrame Code mit dem Button „HTML kopieren“.
Schritt 4: Wechsle nun zurück auf deine WordPress Seite und erstelle im Gutenberg Editor einen neuen Block vom Typ „HTML“. In diesen fügst du den soeben kopierten iFrame Code ein. Mit dem Wechsel von „HTML“ auf „Vorschau“ solltest du dann auch die eingebettete Karte von Google Maps sehen können.
Nutzt Du noch den klassischen WordPress Editor, musst Du den Code folgendermaßen einfügen: Wechsle vom visuellen Bearbeitungsmodus, in den Text-Bearbeitungsmodus und füge dort den Code ein. wechsle nun zurück in den Visuellen-Modus und speichere die Änderungen. Wenn Du Dir nun Deine Seite / Beitrag ansiehst, findest Du dort die Google Maps Karte vor.
3. Google Maps mit API Key einbinden
Google schreibt in seinen Nutzungsbedingungen vor, dass bei gewerblichen Webseiten die Einbindung von Google Maps über einen sogenannten API Key erfolgen muss.
Schritt 1: Besuche die Webseite der Google Maps Plattform und klicke auf den Button „Jetzt starten“. Nun öffnet sich der Registrierungsprozess für die Google Cloud Plattform, für den ein eigenes Google-Konto erforderlich ist.
Bestätige die Nutzungsbedingungen mit der Checkbox und klicke auf „Weiter“.
Schritt 2: Um die Registrierung zu vervollständigen, musst du weitere Angaben zu Wohnort und Bezahlmethode eingeben. Die Nutzung der Google Cloud Plattform ist zunächst per kostenfreier Testphase möglich – ein kostenpflichtiges Konto entsteht erst bei einem manuellen Update. Andernfalls läuft die Testphase einfach aus.
Du kannst bei den Angaben differenzieren, ob du die Testphase als Unternehmen oder Privatperson starten willst.
Schritt 3: Deine Registrierung ist nun abgeschlossen. Nun kannst du die kostenlose Aktivierung der API-Schnittstellen durchführen. Wähle dazu die Einträge „Maps“, „Routen“ und „Orte“ aus und klicke auf „Aktivieren“.
Die Nutzung der Schnittstellen durch deine Besucher, erzeugt nach der Testphase unter Umständen Gebühren, die du einberechnen solltest. Google schenkt dir für die ersten 90 Tage ein Nutzungsguthaben von 300 Dollar, um alle Funktionen des API Key testen zu können.
Schritt 4: Nun bekommst du deinen API-Code angezeigt, den du daraufhin mit STRG + C oder dem entsprechenden Symbol kopieren kannst. Klicke anschließend auf „Fertig“.
Solltest du deinen API Key zu einem späteren Zeitpunkt noch einmal brauchen, öffne einfach in der Google Cloud Plattform im linken Menü den Punkt „Anmeldedaten“ und suche nach dem Eintrag „Maps API Key“.
Schritt 5: In den meisten Fällen benötigst du ein WordPress Plugin für Google Maps, um die Funktionen des API Key zu nutzen. Dafür hast du verschiedene Optionen, die wir im nächsten Kapitel zeigen.
Solltest du PageBuilder Plugins wie Elementor, Thrive Architect & Co nutzen, ist kein zusätzliches Plugin erforderlich. Hier ist Google Maps bereits im Funktionsumfang enthalten und du musst lediglich deinen API Key ergänzen.
4. Drei WordPress Plugins für Google Maps
a) Google Maps Widget
Dieses Plugin ermöglicht die Einbindung von Google Maps über ein WordPress Widget. Nach der Installation und Aktivierung musst du zunächst im Menüpunkt „Einstellungen“ den Eintrag „Maps Widget for Google Maps“ auswählen und dort deinen API Key hinterlegen.
Anschließend erreichst du über das Menü „Design“ > „Widgets“ eine Übersicht mit dem neuen Google Maps Widget. Sobald du dieses aufklappst, kannst du detaillierte Einstellungen zur Darstellung vornehmen, unter anderem die Location, Kartengröße und Kartentyp.
b) Google Maps Easy
„Google Maps Easy“ ist ein Plugin, mit dem du über eine separate Benutzeroberfläche in WordPress neue Karten generieren kannst. Zu Beginn ist innerhalb der Plugin-Einstellungen wieder der API Key zu hinterlegen. Anschließend lassen sich mehrere Google Maps Karten mit verschiedenen Individualisierungen anlegen.
Die Einbindung erfolgt nach dem Speichern mittels eines generierten Shortcodes, der nur noch auf der Seite eingefügt werden muss und in der Live-Vorschau sichtbar wird.
c) WP Google Map Plugin
Das gleiche Prinzip einer gesonderten Verwaltungsoberfläche bietet das Plugin „WP Google Map Plugin“. Hier verfügst du allerdings über einen komplett neuen Menüeintrag „Google Maps“ in WordPress, über den du alle Einstellungen vornehmen kannst.
Über den Bereich „Settings“ bindest du zunächst wieder den API Key ein. Im Bereich „Add Locations“ legst du als Nächstes die Orte an, die später in Google Maps angezeigt werden sollen. Im dritten Schritt legst du über „Add Map“ die Rahmenbedingungen der Karte fest und wählst dann die vorab erstellte Location aus.
Zu guter Letzt wählst du nach dem Speichern der Karte den Menüpunkt „Manage Maps“ aus und kopierst den generierten Shortcode. Auf deiner WordPress Seite wieder einfügen – fertig!
5. Wie du Google Maps mit der DSGVO in Einklang bringst
Hinweis: Dieser Artikel ersetzt keine Rechtsberatung und nicht die anwaltliche Prüfung. Wir sind keine Rechtsanwälte und übernehmen keine Haftung für die Richtigkeit der Inhalte.
Es ist bei der Einbettung von Google Maps Karten aus Datenschutzgründen grundsätzlich empfehlenswert, wenn die Karten nicht automatisch geladen werden. Der Nutzer muss vor dem Laden von Google Maps informiert werden, dass seine Daten (z.B. IP-Adresse) dann an Google weitergegeben werden.
Daher sollte es für deine Besucher eine Möglichkeit geben, das Laden der Google Maps Karten zu deaktivieren.
Die beste Lösung ist hierbei aus unserer Sicht das Plugin Borlabs Cookie*. Mit Borlabs Cookie kannst du das Laden von eingebetteten Inhalten für den Besucher zunächst stoppen. Wie das genau funktioniert, was das Plugin sonst alles kann und wie du es installierst, findest du in einem weiteren Video auf unserem YouTube Kanal heraus:
Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren
6. Clevere Tricks für WordPress Google Maps
a) Google Maps Routenplaner verlinken
Dank diesem Trick, kann Dein Besucher sofort die Route zu Deinem Standort angezeigt bekommen, indem Du auf den Google Maps Routenplaner verlinkst.
Dazu wählst du in Google Maps zunächst den gewünschten Ort aus und klickst dann auf den Button „Routenplaner“.
Nachdem du auf den Routenplaner geklickt hast, kopierst du die nun entstandene URL aus der Adresszeile Deines Browsers. Nun fügst Du den Link in WordPress an einer passenden Stelle ein – also beispielsweise verlinkst Du einen Text oder Button, den Du „Route berechnen“ nennst. Dieser Text / Button sollte natürlich in der Nähe der entsprechenden Karte platziert sein. Achte am besten gleich bei den Linkeinstellungen darauf, dass sich der Link in einem neuen Tab öffnet.
Wenn dein Besucher nun diesen Link öffnet, kann er in Google Maps seinen Standort eingeben und direkt seine persönliche Route berechnen. In unserem Video zum Thema WordPress Google Maps findest du ab Minute 4:10 auch nochmal eine Schritt-für-Schritt Darstellung.
b) Google Maps verlinken anstatt einzubetten
Du kannst die datenschutzrechtliche Problematik mit Google Maps auch insoweit umgehen, indem du die Karte nicht einbettest, sondern verlinkst. Dazu wählst du einfach das gleiche Vorgehen wie beim Routenplaner, indem du die URL aus Google Maps kopierst und über einen Text oder ein anderes Element verlinkst.
Dadurch stellst du sicher, dass sich Besucher nur dann Google Maps aufrufen, wenn sie auch damit einverstanden sind. Auch einen API Key benötigst Du hier natürlich nicht.
7. FAQ
a) Was sind Alternativen zu Google Maps?
OpenStreetMap ist ein kostenfreies OpenSource-Projekt, das ähnlich wie Google Maps eine Weltkarte mit mehreren Informationen bietet. Insgesamt ist die OpenStreetMap nicht ganz so professionell und ausgeprägt wie Google Maps, kann aber für deine Webseite bereits den notwendigen Zweck erfüllen.
Wenn du mehr darüber erfahren möchtest wie du die API-Schnittstelle von OpenStreetMap nutzen kannst, empfehlen wir dir Nutzung des entsprechenden Wiki-Dokumentation.
b) Darf ich einen Screenshot von Google Maps machen und diesen auf der Webseite einbinden?
Nein, das ist seitens Google nicht erlaubt. Wenn du einfach einen Screenshot aus Google Maps in deine Webseite integrierst, besteht Abmahngefahr.