osm map bild
Quelle: OpenStreetMap

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.

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 statt des Links 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. Höhe und Breite lassen sich auch später noch modifizieren, zum Beispiel wie nachfolgend, mit width="100%".


Größere Karte anzeigen

Ein auf dem eigenen Server zu speicherndes Bild der Map bekommt man durch Klicken auf Ausschnitt festlegen unterhalb von Bild.

osm bildausschnitt

Den Ausschnitt auf gewünschte Größe und Seitenverhältnis ziehen, anschließend herunterladen und wie jedes andere Bild verwenden. Da OSM ein nicht-kommerzielles Projekt ist, unterstützt jede Spende die Weiterentwicklung des Projekts.

Über Gabriele Lässer

WordPress Sorgen? - Nicht mit mir! Ich freue mich auf spannende Herausforderungen

Kommentar schreiben

E-Mail-Adresse wird nicht veröffentlicht.

Overlay background for modal content