Google Maps einbinden klingt nach einer Kleinigkeit: Code kopieren, einfügen, fertig. Doch dann ruft ein Kunde an und fragt, wo genau der Eingang ist, weil die Karte am Handy nur grau bleibt.
Hier erfahren Sie, wie Sie eine Karte sauber einbetten, warum sie erst nach einer Einwilligung laden sollte und wann ein einfaches Bild mit Link die bessere Wahl ist.
Inhaltsverzeichnis
Wozu eine Karte auf der Website?
Eine Karte beantwortet eine einzige Frage: Wie komme ich zu Ihnen? Das lohnt sich für Betriebe mit Kundenverkehr, etwa Werkstätten, Praxen, Hofläden oder Ausflugsziele. Ein reiner Onlinedienst braucht meist keine Karte.
Fiktives Beispiel: Ein Höhlenführer in den Alpen merkt, dass Gäste regelmäßig am falschen Parkplatz landen. Eine Karte mit dem Treffpunkt und ein Satz zur Anfahrt lösen das Problem besser als jede lange Beschreibung.
Google Maps einbinden: der Einbettungscode
- Öffnen Sie Google Maps und suchen Sie Ihren Betrieb oder die genaue Adresse.
- Klicken Sie auf „Teilen“ und wählen Sie „Karte einbetten“.
- Wählen Sie eine Größe und kopieren Sie den HTML-Code (ein sogenanntes iframe).
- Fügen Sie ihn in WordPress in einen Block „Individuelles HTML“ ein.
Google beschreibt diese Schritte in der Maps-Hilfe zum Teilen und Einbetten. Wer mehr Kontrolle braucht, etwa über Zoomstufe oder Kartentyp, nutzt die Maps Embed API mit einem eigenen API-Schlüssel.
Ergänzen Sie im Code ein Attribut title, zum Beispiel „Karte: Anfahrt zur Werkstatt“. So wissen auch Menschen mit Screenreader, was der Rahmen enthält.
Datenschutz: Karte erst nach Einwilligung laden
Ein eingebettetes iframe lädt Inhalte direkt von Google-Servern. Dabei werden unter anderem die IP-Adresse und Browserdaten übertragen, sobald die Seite aufgerufen wird. Viele Datenschutzbehörden und Gerichte im DACH-Raum sehen dafür eine Einwilligung als nötig an.
In der Praxis gibt es zwei verbreitete Lösungen:
- Über das Cookie-Banner: Ihr Consent-Tool blockiert die Karte, bis Besucher „Externe Medien“ oder „Google Maps“ zustimmen.
- Zwei-Klick-Lösung: Statt der Karte erscheint ein Platzhalter mit kurzem Hinweis und einem Button „Karte laden“.
Erwähnen Sie Google Maps zudem in Ihrer Datenschutzerklärung. Welche Formulierung für Ihren Betrieb passt, klären Sie am besten mit Ihrer Rechtsberatung.
Die Alternative: Kartenbild mit Link
Oft reicht weniger. Ein Screenshot oder eine selbst erstellte Lageskizze mit Link zu Google Maps überträgt keine Daten, bis jemand klickt. Achten Sie bei Screenshots auf die Nutzungsbedingungen des Kartenanbieters; eine eigene Skizze ist rechtlich die sicherere Variante.
| Variante | Vorteil | Nachteil |
|---|---|---|
| iframe mit Einwilligung | interaktiv, Route direkt planbar | braucht Consent-Tool |
| Zwei-Klick-Platzhalter | klar für Besucher | ein Klick mehr |
| Bild oder Skizze mit Link | schnell, ohne Datenübertragung | nicht interaktiv |
In WordPress: Plugin oder Code?
Für WordPress gibt es zwei Wege. Der einfachste ist der Block „Individuelles HTML“ mit dem kopierten iframe. Er funktioniert ohne zusätzliches Plugin, lädt die Karte aber sofort, solange Ihr Consent-Tool sie nicht blockiert.
Viele Consent-Plugins erkennen Google Maps automatisch und ersetzen die Karte durch einen Platzhalter, bis Besucher zustimmen. Prüfen Sie in den Einstellungen Ihres Tools, ob Google Maps als Dienst eingetragen ist. Page Builder wie Elementor bringen oft ein eigenes Karten-Widget mit; auch dieses muss in die Einwilligung eingebunden werden.
Fügen Sie dem iframe außerdem loading="lazy" hinzu. Dann lädt der Browser die Karte erst, wenn sie in Sichtweite kommt. Das schont die Ladezeit, besonders wenn die Karte weit unten auf der Kontaktseite steht.
Ein kurzer Satz direkt über der Karte hilft zusätzlich, etwa: „Parken Sie am Waldparkplatz, der Eingang liegt 200 Meter bergauf.“ So bleibt die Anfahrt auch dann klar, wenn jemand die Karte nicht lädt.
Checkliste vor dem Livegang
- Adresse steht zusätzlich als Text neben der Karte.
- Die Karte zeigt den richtigen Eingang oder Treffpunkt.
- Ohne Einwilligung lädt nichts von Google (im privaten Browserfenster testen).
- Am Smartphone lässt sich die Seite trotz Karte gut scrollen.
- Ihr Google Unternehmensprofil nennt dieselbe Adresse und dieselben Öffnungszeiten.
Die Karte gehört meist auf die Kontaktseite, direkt neben ein gut funktionierendes Kontaktformular. Wenn Sie Karte, Consent-Tool und Kontaktseite in einem Zug aufsetzen möchten, hilft Ihnen unser Team für Webseiten.