So bindest du Google Maps auf deiner Website ein

Google-Karte einbinden

Google Maps auf der Website einbinden (responsiv, lazy, datenschutzfreundlich) | We.Inc

Binde eine Google-Karte in drei Schritten ein oder erzeuge den Code hier: ein responsives iframe, das verzögert lädt, eine optionale Klick-zum-Laden-Variante für den Datenschutz und die offizielle Option über die Maps Embed API.

Um eine Google-Karte einzubinden, öffne den Ort in Google Maps, wähle Teilen, dann Karte einbetten, und kopiere den HTML-Code. Füge ihn dort ein, wo die Karte erscheinen soll. Für ein besseres Ergebnis umschließt du das iframe so, dass es sich auf Smartphones anpasst, ergänzt loading="lazy" und überlegst dir eine Klick-zum-Laden-Variante, damit Google erst kontaktiert wird, wenn ein Besucher die Karte anfordert.

Drei Wege zum Einbettungscode

Weg
API-Schlüssel
Hinweise

Teilen, Karte einbetten in Google Maps
Nein
Offiziell und am einfachsten; kopiere das iframe, das du erhältst

Maps Embed API (place mode)
Ja, auf deine Website beschränkt
Offiziell, per Adresse oder Ort konfigurierbar, laut Google kostenlos

q= Adress-URL mit output=embed
Nein
Verbreitet und praktisch, aber von Google nicht dokumentiert, kann sich also ändern

Der Generator unten schreibt den Code für dich, aus einer Adresse, mit deinem eigenen Maps-Embed-API-Schlüssel oder aus dem Code, den Google dir gibt. Er ergänzt immer einen responsiven Wrapper und einen Titel und kann die Karte hinter einen Klick-zum-Laden-Button legen.

Öffne Google Maps am Computer und suche nach deinem Unternehmen oder deiner Adresse.
Klicke auf Teilen, dann auf den Tab Karte einbetten, wähle eine Größe und klicke auf HTML kopieren.
Füge den Code in den Generator unten ein oder tippe einfach deine Adresse ein und wähle Form und Optionen.
Kopiere das Ergebnis in den HTML-Block oder die Seitenvorlage deiner Website.
Prüfe es auf einem Smartphone. Die Karte sollte die Breite ausfüllen, ohne seitlich überzulaufen.

Schreibe die Adresse zusätzlich als Text neben die Karte. Screenreader, Suchmaschinen und Menschen mit langsamer Verbindung sind darauf angewiesen.
Gib dem iframe einen Titel wie Karte mit unserem Laden in der King Street. Ohne Titel kündigen Hilfstechnologien es als unbenannten Frame an.
Setze keine Karte in den ersten Bildschirm einer Seite, außer sie ist der Zweck der Seite. Sie ist schwer und verlangsamt die erste Ansicht.
Wenn du mehrere Standorte hast, binde eine Karte pro Standortseite ein statt einer überfüllten Karte auf der Kontaktseite.

Häufige Fragen

Ist das Einbinden von Google Maps kostenlos?

Ja, für den Code über Teilen, Karte einbetten. Die Maps Embed API, die einen Schlüssel braucht, ist bei Google als kostenlos aufgeführt. Andere Maps-Produkte, etwa die JavaScript-Karte mit eigenen Markierungen, werden nach einem monatlichen Freikontingent nach Nutzung abgerechnet. Prüfe also die aktuellen Preise, bevor du sie verwendest.

Warum sieht meine eingebettete Karte auf Smartphones winzig aus?

Der kopierte Code legt eine feste Breite und Höhe fest, etwa 600 mal 450 Pixel. Entferne diese und umschließe das iframe mit einer Box, die CSS aspect-ratio nutzt, wie in der Ausgabe des Generators, damit es mit dem Bildschirm skaliert.

Hat eine eingebettete Google-Karte Auswirkungen auf Datenschutz oder DSGVO?

Beim Laden der Karte werden die IP-Adresse und Browserdaten des Besuchers an Google gesendet, und Google kann Cookies setzen. In Regionen mit strengen Einwilligungsregeln zeigen viele Websites einen Platzhalter mit einem Button Karte anzeigen und laden die Karte erst nach diesem Klick. Genau das macht die Klick-zum-Laden-Option. Erwähne die Karte in jedem Fall in deiner Datenschutzerklärung.

Kann ich eine Routenbeschreibung oder eine eigene Karte mit mehreren Markierungen einbinden?

Routen: Nutze den Tab Route in Google Maps, bevor du Teilen wählst, oder den Routenmodus der Maps Embed API. Mehrere Markierungen: Erstelle eine Karte in Google My Maps, stelle sie auf öffentlich und nutze dann deren Option Auf meiner Website einbetten.

Hilft eine eingebettete Karte meiner lokalen SEO?

Nicht direkt. Für die lokale Suche zählen ein vollständiges Google Business Profile sowie einheitlicher Name, Adresse und Telefonnummer im ganzen Web. Die Karte hilft Besuchern, dich zu finden, und das ist Grund genug.

Standardmäßig responsiv und lazy

Ein Karten-iframe ist eine komplette Web-App, die in deiner Seite lädt. loading="lazy" sagt dem Browser, dass er warten soll, bis der Besucher in die Nähe scrollt. Das beschleunigt die erste Ansicht für alle, die nie so weit scrollen.
Die CSS-Eigenschaft aspect-ratio hält die Form der Karte bei jeder Breite, sodass du den alten padding-bottom-Trick nicht mehr brauchst. 4 zu 3 passt gut für Smartphones, 16 zu 9 für breite Desktop-Layouts.

Klick zum Laden

Die Klick-zum-Laden-Variante zeigt einen leichten Platzhalter mit einem Button. Erst wenn jemand ihn drückt, erzeugt die Seite das iframe und kontaktiert Google. Das ist schneller und schont den Datenschutz, und der Link darunter öffnet weiterhin die vollständige Karte für alle, die lieber die App nutzen.

Responsiver Wrapper für von Google kopierten Code

Wenn du das iframe von Google schon kopiert hast, füge es in diesen Wrapper ein und lösche seine Attribute width, height und style.

Responsiver Karten-Wrapper mit Lazy Loading

Die Box behält bei jeder Breite das Format 4 zu 3. Ersetze das src durch das aus deinem kopierten Code.

Generator für Google-Maps-Einbettungscode

Quelle

Aus einer Adresse

Google-Code einfügen

Maps-Embed-API-Schlüssel

Code oder URL aus Teilen, Karte einbetten

Adresse oder Ort

Zoom: {n}

API-Schlüssel (auf deine Domain beschränken)

Dies nutzt die Adressform q=, die Google nicht dokumentiert. Für eine offizielle Option nutze deinen kopierten Code oder einen API-Schlüssel.

Form

Titel für Screenreader

Karte mit unserem Standort

Klick zum Laden (Datenschutz)

Vorschau des erzeugten Kartencodes

Einbettungscode kopieren

Gib eine Adresse ein oder füge aus Google Maps kopierten Code ein.

Kostenlos starten · Keine Kreditkarte nötig

Verwandt: Ratgeber

Produkt

Für wen

Funktionen

Ressourcen

Unternehmen

Sitemap