Was ist ein Google-Maps-Einbettungscode?
Ein Google-Maps-Einbettungscode ist ein HTML-Element vom Typ <iframe>, das eine interaktive Karte direkt auf einer Webseite anzeigt. Besucher können die Karte verschieben, zoomen, Ortsdetails öffnen und die Umgebung erkunden, ohne deine Website zu verlassen.
Im Gegensatz zu einem statischen Bild lädt der Iframe eine bedienbare Karte. Das eignet sich für Kontaktseiten, lokale Unternehmen, Immobilienangebote, Veranstaltungen, Hotels, Restaurants und alle Websites, die einen Standort verständlich darstellen möchten.
So erstellst du einen Google-Maps-Iframe
Der Generator erzeugt den Einbettungscode, ohne dass du HTML schreiben musst. Gib eine Adresse oder Koordinaten ein, wähle den Kartentyp, stelle den Zoom ein und lege die Größe fest. In der Vorschau kannst du das Ergebnis vor dem Kopieren prüfen.
- Gib eine Adresse, ein Unternehmen, Koordinaten oder eine öffentliche My-Maps-Karte ein.
- Passe Zoom, Kartentyp, Breite und Höhe an.
- Aktiviere bei Bedarf responsive Darstellung, Lazy Loading und Vollbild.
- Klicke auf „Code erstellen“ und füge den Iframe in das HTML deiner Seite ein.
Responsive Google Maps in voller Breite
Eine responsive Karte passt sich auf Desktop-PCs, Tablets und Smartphones an den verfügbaren Platz an. Die responsive Option des Generators legt den Iframe in einen Container mit festem Seitenverhältnis und verhindert horizontales Scrollen.
Für eine Karte über die gesamte Breite wählst du 100 %. Prüfe anschließend die mobile Vorschau und verwende eine Höhe, bei der die Kartensteuerung gut bedienbar bleibt, ohne den gesamten Bildschirm zu belegen.
Google Maps ohne API-Schlüssel einbetten
Eine über einen Iframe geteilte Standardkarte lässt sich normalerweise ohne eigenen Schlüssel für die Google Maps Platform einbetten. Diese Methode passt, wenn du einen Standort, einen Kartenausschnitt, eine Route oder eine öffentliche My-Maps-Karte anzeigen möchtest.
Für programmierte JavaScript-Integrationen, dynamische Daten, per Code erzeugte Marker oder weitere Funktionen der Google Maps Platform ist dagegen ein API-Schlüssel erforderlich. Für eine einfache Einbettung spart der Iframe Konfiguration und zusätzliches JavaScript.
Routen, Koordinaten und eigene Marker
Im Routenmodus erzeugst du eine Karte mit Start und Ziel. Breiten- und Längengrad sind hilfreich, wenn eine Postadresse den Ort nicht genau beschreibt, etwa bei Aussichtspunkten, Wanderwegen, Grundstücken oder Treffpunkten.
Für mehrere Marker, Farben oder Ebenen erstellst du eine öffentliche Karte in Google My Maps und fügst deren Einbettungs-URL oder Iframe in den Generator ein. Die Anpassungen aus My Maps bleiben dabei im fertigen Code erhalten.
Google Maps in WordPress, Shopify, Wix und andere Systeme einfügen
In WordPress fügst du einen Block „Individuelles HTML“ hinzu. In Shopify verwendest du einen benutzerdefinierten Liquid-Abschnitt oder den HTML-Editor einer Seite. Bei Wix, Webflow und Squarespace eignet sich der jeweilige Code- oder Einbettungsblock.
Kontrolliere die veröffentlichte Seite anschließend auf Smartphone und Desktop. Der Iframe gehört in ein Feld, das HTML erlaubt, nicht in ein reines Textfeld. Lazy Loading verhindert, dass die Karte beim ersten Laden mit den sichtbaren Inhalten konkurriert.