Blog · Grundlagen

Google Maps in die Webseite einbinden

Link, eingebettete Karte oder Klick-zum-Laden? Welche Variante für Restaurants, Handwerker und lokale Betriebe passt und was dabei zu beachten ist.

Sascha Heyer · 14. Juli 2026 · 5 Min. Lesezeit

Viele Besucher einer lokalen Webseite wollen nur eine einzige Sache wissen: Wo genau ist das? Eine Karte beantwortet diese Frage schneller als jede Adresszeile. Wer die Karte gleich auf der Webseite hat, hält Besucher auf der eigenen Seite, statt sie zu Google weiterzuschicken. Das ist ein kleiner, aber spürbarer Unterschied.

Es gibt drei Wege, Google Maps in eine Webseite einzubinden. Jeder hat andere Vor- und Nachteile. Welcher passt, hängt davon ab, wie viel Aufwand Sie wollen und wie wichtig Ihnen die DSGVO-Konformität ist.

Methode 1: Ein einfacher Link zur Karte

Einfachste Variante

Route-planen-Link

Sie verlinken auf Ihre Adresse in Google Maps. Der Besucher klickt, die Google-Maps-App oder der Browser öffnet sich, und er bekommt direkt die Routenplanung. Keine iFrames, keine Einbettung, keine Datenschutzprobleme.

So geht es: Suchen Sie Ihren Betrieb in Google Maps. Klicken Sie oben links auf "Teilen", dann auf "Link kopieren". Diesen Link fügen Sie als normalen Hyperlink in Ihre Webseite ein, zum Beispiel als Button "Route planen".

Diese Variante ist die sauberste für alle, die sich keine weiteren Gedanken machen wollen. Ein gut beschrifteter Button ("Route planen" oder "In Google Maps öffnen") ist für viele lokale Betriebe mehr als genug.

Methode 2: Eingebettete Karte (iFrame)

Klassische Variante

iFrame direkt auf der Seite

Die interaktive Karte erscheint direkt auf Ihrer Webseite. Besucher können zoomen und die Umgebung erkunden, ohne die Seite zu verlassen. Das sieht professionell aus und gibt sofort Orientierung.

So geht es: Suchen Sie Ihren Betrieb in Google Maps. Klicken Sie auf "Teilen", dann auf "Karte einbetten". Kopieren Sie den HTML-Code und fügen Sie ihn in den Quellcode Ihrer Webseite ein. Wer einen Baukasten nutzt, fügt stattdessen einen "Karten"- oder "HTML-Widget"-Block ein.

So sieht der Einbetten-Code aus

<iframe
  src="https://www.google.com/maps/embed?pb=..."
  width="600" height="450"
  style="border:0" allowfullscreen=""
  loading="lazy"
  referrerpolicy="no-referrer-when-downgrade"></iframe>

Diesen Block liefert Google fertig aus. Sie müssen nichts selbst tippen: Der lange pb=...-Wert enthält Ihren Standort und wird von Google automatisch eingesetzt, wenn Sie auf "Karte einbetten" klicken. In einem Baukasten fügen Sie den Code in einen HTML- oder Einbetten-Block ein, in WordPress in einen "Custom HTML"-Block.

Der iFrame ist die am weitesten verbreitete Lösung. Für viele Betriebe ist sie pragmatisch genug, solange die Datenschutzerklärung Google Maps als eingesetztes Tool nennt.

Methode 3: Klick-zum-Laden (DSGVO-freundlich)

DSGVO-sichere Variante

Karte erst nach Bestätigung laden

Auf der Webseite erscheint zunächst nur ein Vorschaubild des Kartenausschnitts oder ein grauer Platzhalter mit einem Hinweis. Ein Klick auf "Karte laden" oder "Mit Google Maps öffnen" lädt erst dann die echte Karte. Das gilt als aktive Einwilligung des Besuchers.

So geht es: Dieses Muster lässt sich mit einem einfachen CSS- und JavaScript-Schnipsel umsetzen: Platzhalter anzeigen, bei Klick den iFrame-Code einsetzen. Wer einen Baukasten oder ein CMS wie WordPress nutzt, findet Plugins, die das übernehmen (zum Beispiel "Borlabs Cache" oder ähnliche Consent-Manager).

Minimalbeispiel: Karte erst auf Klick laden

<div id="karte">
  <p>Beim Laden der Karte werden Daten an Google übertragen.</p>
  <button onclick="karteLaden()">Karte laden</button>
</div>

<script>
function karteLaden() {
  document.getElementById('karte').innerHTML =
    '<iframe src="https://www.google.com/maps/embed?pb=..." ' +
    'width="600" height="450" style="border:0" loading="lazy"></iframe>';
}
</script>

Vor dem Klick lädt der Browser nichts von Google, es fließen also keine Daten. Erst der Klick auf "Karte laden" setzt den echten iFrame ein. Das gilt als aktive Einwilligung. Den pb=...-Wert übernehmen Sie aus dem Einbetten-Code von Methode 2.

Was noch auf die Kontaktseite gehört

Eine Karte allein reicht nicht. Damit Kunden Sie sicher finden, sollten diese Informationen direkt daneben stehen, als lesbarer Text und nicht nur in der Karte:

Wer seinen Betrieb bereits in einem Google Unternehmensprofil eingetragen hat, sollte dieselben Angaben dort und auf der Webseite übereinstimmend halten. Widersprüchliche Öffnungszeiten verwirren sowohl Kunden als auch Google.

DSGVO und Google Maps

Beim Laden einer Google-Karte werden Daten an Google-Server übertragen: Die IP-Adresse des Besuchers, Geräteinformationen und möglicherweise Cookies. Das reicht laut deutschen Datenschutzbehörden, um eine Einwilligung zu erfordern, wenn die Daten ohne Zustimmung weitergegeben werden.

Drei Punkte, die Sie in jedem Fall beachten sollten:

Wer ganz auf der sicheren Seite sein will, nutzt Methode 3. Wer pragmatisch vorgeht, ergänzt zumindest die Datenschutzerklärung um einen Hinweis zu Google Maps. Beides ist besser als nichts.

Meine Empfehlung für lokale Betriebe

Für die meisten Restaurants, Gasthäuser und Handwerksbetriebe reicht ein Route-planen-Link kombiniert mit der vollständigen Adresse als Text. Das ist in zehn Minuten erledigt, verursacht keine Datenschutzprobleme und funktioniert auf jedem Gerät.

Wer mehr will, baut den iFrame ein und ergänzt die Datenschutzerklärung. Wer auf Nummer sicher gehen will, setzt auf Klick-zum-Laden.

Wichtig: Die schönste Karte hilft wenig, wenn Ihr Betrieb in Google Maps gar nicht oder mit falscher Adresse auftaucht. Prüfen Sie zuerst Ihr Google Unternehmensprofil und stellen Sie sicher, dass Name, Adresse und Öffnungszeiten korrekt sind. Erst dann lohnt es sich, die Karte auf der Webseite einzubinden.

Mehr dazu, was auf einer guten Startseite und Kontaktseite nicht fehlen darf, und wie Sie Besucher am besten zu einer Anfrage oder einem Anruf bewegen, erklärt unser Ratgeber. Und wer wissen möchte, warum Google seinen Betrieb trotz Unternehmensprofil kaum zeigt, findet die Antwort in unserem Beitrag zur lokalen SEO.

Häufige Fragen

Kostet das Einbetten von Google Maps auf einer Webseite etwas?

Die einfache Einbettung einer Google-Karte per iFrame oder Link ist kostenlos und bleibt es auch. Kosten entstehen nur bei der Google Maps Platform API, die für individuelle Kartenanwendungen in Apps eingesetzt wird. Für eine normale Standortkarte auf einer Firmenwebseite ist das nicht nötig.

Brauche ich Google Maps auf der Webseite, wenn ich schon ein Google Unternehmensprofil habe?

Beide ergänzen sich. Das Unternehmensprofil sorgt dafür, dass Ihr Betrieb in der Google-Suche und in der Maps-App erscheint. Eine Karte auf der eigenen Webseite gibt Besuchern sofort Orientierung, ohne die Seite verlassen zu müssen. Das erleichtert den letzten Schritt vor dem Besuch.

Ist das Einbetten von Google Maps DSGVO-konform?

Beim normalen iFrame überträgt der Browser des Besuchers sofort Daten an Google. Das ist ohne ausdrückliche Einwilligung in Deutschland rechtlich umstritten. Sicherer ist die Klick-zum-Laden-Variante: Die echte Karte lädt erst, wenn der Besucher aktiv auf eine Schaltfläche klickt. Mindestens sollte Google Maps in der Datenschutzerklärung genannt sein.

Was tun, wenn mein Betrieb nicht in Google Maps auftaucht?

Das liegt am Google Unternehmensprofil (früher Google My Business). Erstellen oder beanspruchen Sie Ihren Eintrag unter business.google.com und bestätigen Sie ihn. Erst danach erscheint Ihr Betrieb zuverlässig in der Kartensuche. Unser Ratgeber zum Google Unternehmensprofil erklärt die Schritte.

Wie sieht der HTML-Code zum Einbinden von Google Maps aus?

Es ist ein iFrame-Element, das Google fertig ausliefert. Es beginnt mit <iframe src="https://www.google.com/maps/embed?pb=..."> und enthält Breite, Höhe und loading="lazy". Den langen pb=...-Wert setzt Google automatisch ein, sobald Sie auf "Karte einbetten" klicken. Sie kopieren den Block nur noch in den Quellcode oder in einen HTML-Block Ihres Baukastens. Das vollständige Muster steht oben unter Methode 2.

Wo finde ich bei Google Maps den Code zum Einbinden?

Öffnen Sie Ihren Standort in Google Maps, klicken Sie auf "Teilen" und wechseln Sie im Fenster auf den Reiter "Karte einbetten". Dort erscheint der fertige iFrame-Code mit einer Schaltfläche "HTML kopieren". Diesen Code fügen Sie an der Stelle Ihrer Webseite ein, an der die Karte erscheinen soll. In einem Baukasten oder in WordPress nutzen Sie dafür einen HTML- oder Einbetten-Block.

Webseite mit Karte, Kontaktformular und allem drum herum?

Wir gestalten Ihnen eine fertige, schnelle Webseite für lokale Betriebe. Kostenlose Vorschau, keine Einrichtungsgebühr. Ab 49 Euro im Monat, monatlich kündbar.

Kostenlose Vorschau anfordern

Passende Ratgeber (Bei Google gefunden werden): Warum findet Google mich nicht? · Neue Webseite bei Google · Besucherzahlen messen · Von KI empfohlen werden

Weitere Ratgeber