Karte auf der Website einbinden
Eine Karte auf der Kontaktseite, deine Filialen, ein Liefergebiet oder eine Wanderroute: Hier stehen die Wege, eine Karte auf die Website zu bringen, vom Google-Einbetten in zwei Minuten bis zur gestalteten Karte mit eigenen Pins. Mit dem, was jeder Weg kann und was nicht.
- Eine Adresse, schnell: Google Maps → Teilen → Karte einbetten → HTML kopieren. Kostenlos, ohne API-Key.
- Mehrere Orte: Google My Maps als iframe, oder ein Karten-Plugin mit Liste und Suche.
- Eigenes Aussehen, ohne Google: eine Karte auf Basis von OpenStreetMap. In WordPress geht das mit Map Studio kostenlos und ohne API-Key.
Weg 1: Google Maps einbetten (eine Adresse)
- Google Maps öffnen und die Adresse oder das Unternehmen suchen.
- Auf Teilen klicken, dann auf den Reiter Karte einbetten.
- Eine Größe wählen und HTML kopieren.
- Den Code dort einfügen, wo deine Website HTML annimmt: in WordPress in einen Block „Individuelles HTML“, in anderen Baukästen in ein Element „Einbetten“ oder „HTML“.
Der Code ist ein <iframe>. Tipp: Ändere width="600" in width="100%", dann füllt die Karte auf dem Handy die Spalte.
- Gut: Es kostet nichts, braucht keinen API-Key und ist in zwei Minuten fertig.
- Grenzen: Du zeigst einen einzigen Ort in Googles Aussehen, ohne Liste und ohne eigene Popups.
- Datenschutz: Die Karte lädt sofort von Google, die IP-Adresse der Besucher geht an Google. In Deutschland fragen die meisten Websites deshalb vorher um Einwilligung. Mehr dazu: Google Maps DSGVO-konform.
Weg 2: Mehrere Orte mit Google My Maps
In Google My Maps setzt du mehrere Pins, Linien und Flächen und bettest das Ergebnis als iframe ein (Menü → Auf meiner Website einbetten; die Karte muss dafür öffentlich geteilt sein).
- Gut: kostenlos und einfach, auch mit mehreren Orten.
- Grenzen: Google-Konto nötig, kaum Einfluss aufs Aussehen, keine Suche und kein „In meiner Nähe“ für Besucher, dieselbe Datenschutzfrage wie oben.
Weg 3: OpenStreetMap einbetten
Auf openstreetmap.org die Stelle suchen, auf Teilen klicken und das HTML kopieren. Das funktioniert wie bei Google, nur ohne Google.
- Gut: kostenlos, ohne Konto, ohne Google.
- Grenzen: ein Marker, kein eigenes Aussehen. Die Kartenserver von openstreetmap.org werden aus Spenden bezahlt, ihre Nutzungsrichtlinie begrenzt die Nutzung durch fremde Websites.
Weg 4: Ein Karten-Plugin (WordPress)
Läuft deine Website mit WordPress, bekommst du mit einem Karten-Plugin eine Karte, die zu deiner Seite gehört: deine Orte, deine Farben, eine Liste mit Suche und Datenschutz-Optionen. Map Studio ist unser Plugin. Es ist kostenlos, braucht keinen API-Key und kein Konto, und du gestaltest die Karte direkt auf der Karte:
- In WordPress unter Plugins → Installieren nach „Devenzi Map Studio“ suchen und aktivieren.
- Map Studio → Neue Karte. Leer starten oder mit einer Vorlage (Filialfinder, Liefergebiet, Wanderroute, Lageplan).
- Adressen eintippen, auf die Karte klicken oder eine Tabelle (CSV), Google My Maps (KML) oder GeoJSON importieren.
- Icons, Farben und Popups mit Text, Fotos und Öffnungszeiten wählen. Flächen und Routen entlang echter Wege zeichnen.
- Per Block, Elementor-Widget oder Shortcode einbinden.
Welcher Weg passt?
| Google einbetten | Google My Maps | OSM einbetten | Map Studio (WordPress) | |
|---|---|---|---|---|
| Kosten | gratis | gratis | gratis | gratis (Pro optional) |
| API-Key | nein | nein | nein | nein |
| Mehrere Orte | nein | ja | nein | ja, mit Liste und Suche |
| Eigenes Aussehen | nein | kaum | nein | Kartenstile, Markenfarbe, 3D |
| Daten an Google | ja | ja | nein | nein |
| Erst nach Zustimmung laden | selbst bauen | selbst bauen | selbst bauen | eingebaut |
Häufige Fragen
Brauche ich einen API-Key, um Google Maps einzubetten?
Für das einfache Einbetten über Teilen → Karte einbetten nicht. Für eine Google-Karte mit eigenen Markern und eigenem Aussehen brauchst du die Maps JavaScript API, einen API-Key und ein Rechnungskonto. Mehr dazu: Google Maps API Alternative.
Wie zeige ich mehrere Standorte auf einer Karte?
Mit Google My Maps als iframe oder mit einem Karten-Plugin. In WordPress zeigt Map Studio beliebig viele Orte mit Icons und Popups, fasst nahe Pins zusammen und bringt eine Liste mit Suche, Kategorie-Filter und „In meiner Nähe“ mit. Siehe Filialfinder.
Die Karte ist auf dem Handy zu klein. Was tun?
Beim iframe die Breite auf 100% setzen. Karten von Map Studio passen sich der Breite von selbst an, die Höhe stellst du je Karte ein.
Macht eine Karte die Seite langsamer?
Ein iframe lädt sofort. Mit loading="lazy" wartet es, bis es ins Bild scrollt. Map Studio wartet darauf von selbst und auf Wunsch sogar auf einen Klick.
Eine Karte, die zu deiner Website gehört – gratis
Map Studio bekommst du kostenlos im WordPress-Verzeichnis, ohne Konto und ohne API-Key.