Du brauchst eine Karte für deine Kontaktseite, willst aber weder Google Maps noch einen API-Key mit Verrechnungskonto? OpenStreetMap ist ein freies, nicht-kommerzielles Kartenprojekt und lässt sich ohne Anmeldung einbinden: als interaktive Karte im iframe, als datenschutzfreundliches Bild oder bequem über ein WordPress-Plugin.
In diesem Beitrag zeige ich dir alle drei Wege und worauf du beim Datenschutz achten solltest.
Aktualisiert: Oktober 2026
Map als iFrame einbinden
Das trackingfreie Open Source-Projekt OpenStreeMap steht allen bedingungslos offen. Der erste Schritt zur Map als Bild oder im Iframe besteht darin, über das Eingabefeld links oben nach dem Ort zu suchen, der in der Map dargestellt werden soll.
Je nachdem, welche Zoom-Einstellung gewünscht ist, den entsprechenden Button in der Symbolleiste auf der rechten Seite bedienen. Um einen Marker zu setzen, auf das Teilen-Symbol klicken (im nachfolgenden Bild grün), das ebenfalls in der rechten Symbolleiste zu finden ist.
Es öffnet sich eine Seitenleiste mit weiteren Einstellungen und einem Link auf die Karte. Hier aus den 3 Buttons HTML wählen. Ein Klick auf Kartenmarker setzen fügt einen Marker ein. Den Marker nun mit Drag & Drop an die gewünschte Position setzen. Wenn Zoom-Faktor und Marker-Position passen, den HTML-Code (im Blockeditor den HTML-Block verwenden) kopieren, der in meinem Beispiel so aussieht.
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.openstreetmap.org/export/embed.html?bbox=9.699318408966066%2C47.484177893725764%2C9.729595184326174%2C47.49977861091604&layer=mapnik&marker=47.49197883161885%2C9.714467525482178" style="border: 1px solid black"></iframe><br/><small><a href="https://www.openstreetmap.org/?mlat=47.4920&mlon=9.7145#map=16/47.4920/9.7145">Größere Karte anzeigen</a></small>Höhe und Breite lassen sich auch später noch modifizieren, zum Beispiel wie nachfolgend, mit width="100%".
Kann ich eine Route einbetten?
Nein, die Einbettung von openstreetmap.org zeigt nur einen Kartenausschnitt mit Marker. Eine Route lässt sich nicht als iframe teilen. Verlinke unter der Karte stattdessen den Routenplaner, zum Beispiel mit „Route planen“. Wer die Route braucht, öffnet sie mit einem Klick in einem neuen Tab.
Hinweis: über den Iframe werden Fremdinhalte von externen Servern geladen, was datenschutztechnisch relevant ist. Daher sollte ein Cookie-Blocker verwendet werden, der Besuchern die Wahl lässt, ob sie die Mapfiles laden wollen oder nicht.
Plugin für OpenStreetMaps
Das Plugin Leaflet-Map ist eines der ältesten mir bekannten Plugins für OSM und wird nach wie vor gepflegt. Mittlerweile gibt es auch andere, z.B. auch explizit für den Blockeditor. Mit dem DSGVO snippet for Leaflet Map and its Extensions (einfach nur aktivieren) werden Maps erst nach Zustimmung durch den Besucher geladen.
Access blocked?
Anfragen, die keinen Referrer übertragen, wie z.b. Einbettungen in nicht öffentlichen Sites, oder die OpenStreetMap Server zu stark belasten, werden mithin blockiert („Access blocked“). Solltest du auf einer öffentlichen Websites betroffen sein, nimmst du besser einen eigenen Kartenanbieter, etwa MapTiler mit kostenlosem Schlüssel.
OSM Datenschutzkonform als Bild verwenden
Wer lieber ein Bild verwendet, z.B. weil das Einbinden von iFrames aus Sicherheitsgründen gesperrt ist, oder DSGVO-konform bleiben will, findet auch dafür das Werkzeug direkt auf der Mapseite. Ein frei verwendbares Bild der Map (Hinweis: Bildausschnitte von Google-Maps zu verwenden ist im Gegenzug nicht erlaubt!) bekommt man durch Klicken auf Ausschnitt festlegen unterhalb von Bild.
Den Ausschnitt auf gewünschte Größe und Seitenverhältnis ziehen (Werkzeug dafür ist das Kreuzsymbol, mit dem Finger verschiebt sich hingegen die Karte), Dateiformat auswählen (PNG, JPG, SVG oder PDF) anschließend „Herunterladen“ und wie jede andere entsprechende Datei verwenden.
Ein weiterer Vorteil davon ist, dass das Bild lokal gehostet wird, und die Anzahl der Aufrufe keine Belastung für OSM-Server darstellt, egal, wie oft die Map aufgerufen wird.
Es kann unterhalb des Bildes immer noch auf die Karte oder den OSM Routenplaner verlinkt werden, oder sogar zum Google Routenplaner. Auf diese Weise bleibt die eigene Website datenschutzkonform, und der Besucher hat im Bedarfsfall dennoch schnellen Zugriff auf Map-Werkzeuge, wenn er sie braucht.
Da OSM ein nicht-kommerzielles Projekt ist, ist jede Spende sinnvoll und unterstützt die Weiterentwicklung.
Schreibe einen Kommentar