OpenStreetMap als iFrame oder Bild in Website einbinden

osm map bild
Quelle: OpenStreetMap

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.

osm ort suchen

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.

osm html und marker

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>
osm iframe
so sieht eine via iframe eingebundene OpenStreetMap aus

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.

osm bildausschnitt

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.

3 Antworten zu „OpenStreetMap als iFrame oder Bild in Website einbinden“

  1. Joe

    Vielen Dank für den Tipp. Was vielleicht noch zu erwähnen wäre, dass die Funktion erst erscheint, wenn man auf rechten Seite der Karte das Symbol für „Teilen“ anklickt.

    1. webentwicklerinat

      Danke für die Ergänzung, wobei das „Teilen“ durchaus im Beitrag genannt ist, da man sonst keinen Marker bekommt.

  2. dirk

    Funktioniert wunderbar, allerdings schaffe ich es nicht, eine Route als iFrame zu teilen, tips?

Bitte Kommentarfunktion nicht für Supportanfragen nutzen. Dem kann hier nicht entsprochen werden. Die Angabe einer E-Mail-Adresse und eines Namens ist nicht erforderlich. Einen (Spitz)-Namen zu nennen wäre aber doch nett.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Hinweis: Sowohl angegebener Name als auch E-Mail-Adresse (beides ist optional, dafür werden alle Kommentare vor Veröffentlichung geprüft) werden dauerhaft gespeichert. Du kannst jeder Zeit die Löschung Deiner Daten oder / und Kommentare einfordern, direkt über dieses Formular (wird nicht veröffentlicht, und im Anschluss gelöscht), und ich werde das umgehend erledigen. – Mit hinterlassenen Kommentaren hinterlegte IP-Adressen werden nach zwei Monaten automatisch gelöscht

publicly queryable