OpenStreetMap als iFrame oder Bild in Website einbinden

osm map bild

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>
Code-Sprache: HTML, XML (xml)

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/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>
Code-Sprache: HTML, XML (xml)
OpenStreetMap

Mit dem Laden der Karte akzeptieren Sie die Datenschutzerklärung von OpenStreetMap Foundation.
Mehr erfahren

Karte laden


Größere Karte anzeigen

Wer lieber ein Bild verwendet, z.B. weil das Einbinden von iFrames aus Sicherheitsgründen gesperrt ist, 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.

Da OSM ein nicht-kommerzielles Projekt ist, ist jede Spende sinnvoll und unterstützt die Weiterentwicklung.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.