OpenStreetMap als iFrame oder Bild in Website einbinden

Mit der Umstellung bei Google, die es erfordert, API-Keys für Maps mit einem Verrechnungskonto zu verknüpfen, funktionieren viele Google Maps, die auf Websites eingebunden sind, (bald) nicht mehr. Ähnliches gab es schon mal, als Google beschloss, Maps generell nicht mehr ohne API-Key zur Verwendung auf Websites zuzulassen. Die neue zusätzliche Erschwernis macht Alternativen attraktiver, besonders wenn man nur eine Map für seine Kontaktseite benötigt.

Wenn also plötzlich die Google Map auf der Website nicht mehr dargestellt wird und stattdessen Hoppla! Ein Fehler ist aufgetreten kommt, wird es Zeit zum Handeln.

Das trackingfreie Open Source-Projekt OptenStreeMap 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 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&amp;layer=mapnik&amp;marker=47.49197883161885%2C9.714467525482178" style="border: 1px solid black"></iframe><br/><small><a href="https://www.openstreetmap.org/?mlat=47.4920&amp;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%".

<iframe width="100%" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.openstreetmap.org/directions?engine=fossgis_osrm_car&route=47.503%2C9.747%3B47.489%2C9.692#map=15/47.4970/9.7206" style="border: 1px solid black"></iframe><br/><small><a href="https://www.openstreetmap.org/?mlat=47.4920&amp;mlon=9.7145#map=16/47.4920/9.7145">Größere Karte anzeigen</a></small>

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 Map laden wollen oder nicht.

OSM Datenschutzkonform 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.

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.