Contentbär rankt Top-5 für GEO Freelancer, SEO Freelancer, SEO Experte & SEO Berater – diese Ergebnisse schaffen wir auch für Ihr Unternehmen
Contentbär rankt Top-5 für GEO Freelancer, SEO Freelancer, SEO Experte & SEO Berater – diese Ergebnisse schaffen wir auch für Ihr Unternehmen
  • kostenlose Analyse
  • ab 1.000 € pro Monat
  • monatlich kündbar
Kostenloses Local-SEO-Tool

Google-Maps-Einbettung

Erzeugen Sie Einbettungscode, der die Google-Karte erst lädt, wenn jemand darauf klickt. Mit eigenem Platzhalter, Farben, anpassbaren Hinweistexten und einem Link als Alternative ganz ohne Einbettung.

3 Kartenquellen1 Datei, ohne Plugin0 Daten an Server
Bis zum Klick0 Anfragenan Google beim Seitenaufruf
Ort
Beispieldaten
Kartenansicht
15
Größe

Die Breite passt sich immer dem Platz an. Die Mindesthöhe verhindert auf schmalen Bildschirmen eine zu flache Karte.

Gestaltung
Texte
Optionen
Vorschau

Hier lädt keine Karte von selbst. Erst ein Klick auf die Schaltfläche in der Vorschau verbindet mit Google, genau wie später auf Ihrer Website.

Ihr Code

          
Prüfung Ihrer Einstellungen
So bauen Sie den Code ein
  1. Code einfügenIn WordPress einen Block „Individuelles HTML“ anlegen und den Code hineinkopieren. In anderen Systemen ein HTML- oder Code-Element verwenden.
  2. Skript prüfenFehlt nach dem Speichern der Teil zwischen <script> und </script>, darf Ihr Konto kein ungefiltertes HTML speichern. Dann den Code über ein Snippet-Plugin oder das Theme einbinden.
  3. Consent-Tool abstimmenBorlabs Cookie, Complianz und ähnliche Tools blockieren eingebettete Google-Karten oft selbst und zeigen einen eigenen Platzhalter. Nutzen Sie dann die Ausgabe „Nur iframe“ und überlassen Sie das Blockieren dem Tool. Zwei Sperren hintereinander bedeuten zwei Klicks für Ihre Besucher.
  4. Datenschutzerklärung ergänzenBeschreiben Sie die Einbindung von Google Maps und verlinken Sie diese Stelle im Hinweistext. Den Inhalt sollte Ihre Datenschutzberatung prüfen.
  5. TestenSeite in einem privaten Fenster öffnen, Entwicklertools öffnen, Reiter „Netzwerk“ wählen. Vor dem Klick darf keine Anfrage an google.com oder gstatic.com auftauchen.

Drei Wege, Google Maps einzubinden, und wann ein API-Schlüssel nötig ist

Mit diesem Tool können Sie Google Maps einbinden, ohne dass Ihre Seite schon beim Aufruf eine Verbindung zu Google aufbaut. Drei Kartenquellen stehen zur Wahl.

01 Adresse als Quelle

Quelle Adresse

Die Quelle „Adresse“ kommt ohne API-Schlüssel aus, Google sucht die eingetragene Anschrift selbst und setzt eine Markierung. Diese Adress-URL beschreibt Google in seiner Entwicklerdokumentation nicht und kann sie jederzeit ändern.

02 Code aus Google Maps

Code aus Google Maps

Genauer arbeitet der „Code aus Google Maps“: Sie öffnen Ihren Eintrag, wählen „Teilen“ und „Karte einbetten“ und kopieren das HTML ins Tool. So erscheint auf der Karte genau der Eintrag aus Ihrem Google Unternehmensprofil mit Namen und Bewertungen.

03 Maps Embed API

Maps Embed API mit Schlüssel

Für die dritte Quelle, die Maps Embed API, legen Sie in der Google Cloud Console einen eigenen Schlüssel an. Laut Google sind Anfragen an diese Schnittstelle kostenlos. Weil der Schlüssel im Quelltext sichtbar bleibt, beschränken Sie ihn auf Ihre Domain (HTTP-Referrer) und auf die Maps Embed API.

Auf Standortseiten, die Sie für Local SEO anlegen, ergänzt die Karte Anschrift und Anfahrtsbeschreibung im Text, ersetzt sie aber nicht, denn vor dem Klick sehen Besucher nur den Platzhalter.

Wie die Zwei-Klick-Lösung Google Maps erst nach Zustimmung lädt

Bis zum Klick enthält Ihre Seite kein iframe und stellt keine Anfrage an Google. Die Ziel-URL steht nur als Text im Attribut data-zkm-src. Besucher sehen stattdessen einen Platzhalter mit Überschrift, Hinweistext, Link zur Datenschutzerklärung und der Schaltfläche „Karte anzeigen“. Nach diesem Klick erzeugt ein kleines Skript das iframe, und der Browser verbindet sich mit Google. Dabei erhält Google unter anderem die IP-Adresse des Geräts.

Der Code besteht aus einem Block HTML, CSS und rund 40 Zeilen JavaScript, ganz ohne Plugin. Auch mehrere Karten auf einer Seite sind möglich. Mit der Option „Auswahl merken“ erscheint im Platzhalter ein Kästchen, über das Besucher Google-Karten auf Ihrer Website künftig direkt laden. Deren Browser legt dafür einen Eintrag ohne Kennung im localStorage ab. Unter der Karte steht dann eine Schaltfläche, die das automatische Laden wieder beendet. Für Besucher, die gar keine Karte laden möchten, setzt das Tool den Link „In Google Maps öffnen“ darunter, auf Wunsch direkt mit Routenplanung.

Vor dem Klick zeigt die Seite nur einen Platzhalter ohne iframe und ohne Anfrage an Google, nach dem Klick auf Karte anz
Consent-Tool und Zwei-Klick-Code zusammen ergeben eine doppelte Sperre mit zwei Klicks. Weg A: Zwei-Klick-Code mit Platz

Consent-Tool und Datenschutzerklärung bei Google Maps nach DSGVO abstimmen

Verbreitete Consent-Tools für WordPress blockieren eingebettete Google-Karten oft selbst und zeigen einen eigenen Platzhalter. Läuft auf Ihrer Website so ein Tool, entsteht mit dem Zwei-Klick-Code eine doppelte Sperre, und Besucher müssen zweimal klicken. Entscheiden Sie sich in diesem Fall für einen Weg. Die Ausgabe „Nur iframe“ liefert das klassische iframe ohne Platzhalter und überlässt das Blockieren dem Consent-Tool. Nutzen Sie sie nur, wenn Ihr Consent-Tool Google Maps zuverlässig zurückhält, bis eine Einwilligung vorliegt, sonst lädt die Karte sofort beim Seitenaufruf.

In der Datenschutzerklärung beschreiben Sie die Einbindung von Google Maps und verlinken diese Stelle im Hinweistext des Platzhalters. Fehlt der Link, meldet die Prüfung im Tool „Kein Link zur Datenschutzerklärung“. Auf die Frage, ob sich Google Maps DSGVO konform einbinden lässt, gibt der Code allein keine Antwort.

Keine Rechtsberatung: Das Tool erzeugt technischen Code. Inwieweit Ihre Einbindung von Google Maps den Anforderungen von DSGVO und TDDDG genügt, hängt von Ihrer gesamten Website ab, etwa vom Consent-Tool, von der Datenschutzerklärung und von weiteren eingebundenen Diensten. Lassen Sie das im Zweifel von Ihrer Datenschutzberatung prüfen. Stand: Oktober 2026.

Platzhalter und Kartenhöhe, wenn Sie Google Maps einbetten

Farben, Ecken und Kontrast

Farben, Ecken und Texte des Platzhalters passen Sie an Ihre Website an, bevor Sie Google Maps einbetten. Zur Wahl stehen helle, dunkle oder eigene Farben, drei Eckenformen und ein dezentes Kartenraster. Die Schriftfarbe wählt das Tool selbst. Anschließend prüft es den Kontrast nach WCAG 2.2: Liegt Text auf Hintergrund oder Schrift auf der Schaltfläche unter 4,5:1, erscheint „Kontrast zu gering“, bei weniger als 3:1 zwischen Schaltfläche und Hintergrund ein Hinweis.

Seitenverhältnis und Höhe

Bei der Größe wählen Sie ein Seitenverhältnis wie 16:9, 4:3 oder 1:1 oder eine feste Höhe. Immer passt sich die Breite dem verfügbaren Platz an, eine Mindesthöhe verhindert auf schmalen Bildschirmen eine zu flache Karte. Stellen Sie eine feste Höhe über 600 px ein, warnt das Tool: Auf dem Smartphone füllt die Karte dann fast den ganzen Bildschirm, und beim Wischen bleibt der Finger leicht darin hängen.

Sprache, Zoom und Vorschau

Sprache, Zoomstufe und Kartentyp legen Sie für die Quellen „Adresse“ und „Embed API“ fest, wobei die Embed API nur Straßenkarte und Satellit kennt. In der Vorschau sehen Sie den Platzhalter in voller Breite, als Tablet und als Smartphone.

In WordPress Google Maps einbinden und vor dem Klick testen

Im Block-Editor von WordPress legen Sie einen Block „Individuelles HTML“ an und fügen den kopierten Code dort ein. Prüfen Sie nach dem Speichern, ob der Teil zwischen <script> und </script> noch vorhanden ist. Fehlt er, darf Ihr Benutzerkonto kein ungefiltertes HTML speichern. Binden Sie den Code dann über ein Snippet-Plugin oder das Theme ein.

01 Privates Fenster öffnen

Privates Fenster öffnen

Danach folgt der Test. Öffnen Sie die Seite in einem privaten Fenster, starten Sie die Entwicklertools und wählen Sie den Reiter „Netzwerk“.

02 Anfragen vor dem Klick prüfen

Anfragen vor dem Klick prüfen

Vor dem Klick darf dort keine Anfrage an google.com oder gstatic.com auftauchen. Taucht trotzdem eine auf, lädt ein anderer Teil der Seite Inhalte von Google, zum Beispiel ein Plugin, das Theme oder eine zweite Karte.

03 Markierung kontrollieren

Markierung kontrollieren

Klicken Sie anschließend auf „Karte anzeigen“ und kontrollieren Sie, ob die Markierung am richtigen Ort sitzt.

04 Bewertungen auf der Standortseite

Sterne auf der Standortseite

Zeigt die Standortseite neben der Karte auch Ihre Sterne aus Google, plant der Google Bewertungsrechner, wann ein Wunschwert bei gleichbleibendem Tempo erscheint.

Philipp Nessmann
  • LinkedIn
  • YouTube
Experte für SEO, GEO, LLMO & AIO - wir machen Sie sichtbar bei Google, ChatGPT & Perplexity.

Philipp Nessmann ist SEO-Berater mit über 20 Jahren Erfahrung und Gründer der Nessmann GmbH (Marken: Contentbär und SEO Agents). Er hat mehr als 1.100 Projekte betreut und mit Jurawelt.com sowie trauringspezialisten.de eigene Plattformen aufgebaut. Sein Schwerpunkt liegt auf technischem SEO und der Sichtbarkeit in KI-Systemen wie ChatGPT, Gemini und Perplexity (GEO). Als Gastautor veröffentlicht er regelmäßig u. a. bei OMR, RTL, GoDaddy, HostEurope, Mittwald und DomainFactory.

SEO verändert sich. Sind Sie bereit für KI?

Werden Sie in Google, ChatGPT, Perplexity und mehr gefunden. Wir kombinieren klassisches SEO mit KI-optimierten Strategien.

Ihre Website sichtbar in Google, ChatGPT und Perplexity – klassisches SEO und KI-Optimierung von Contentbär
cta-bear