OpenStreetMap in WordPress einbinden: drei Wege im Vergleich
OpenStreetMap ist die freie Alternative zu Google Maps: weltweit, aktuell und ohne Google. In WordPress gibt es drei Wege, eine solche Karte auf die Seite zu bringen. Hier steht, was jeder kann und für wen er passt.
- Nur eine Adresse zeigen: Das iframe von openstreetmap.org reicht, gestalten lässt es sich aber kaum.
- Karten per Shortcode bauen: Leaflet-Plugins sind flexibel und bewährt, eingestellt wird über Shortcodes und Einstellungsseiten.
- Karten gestalten wie in einem Design-Programm: Ein Karten-Editor wie Map Studio, mit Vektorkarte, 3D und eigenem Aussehen.
Was ist OpenStreetMap?
OpenStreetMap (OSM) ist eine Weltkarte, die Millionen Freiwillige pflegen, ähnlich wie Wikipedia. Die Daten sind frei nutzbar. Die einzige Pflicht ist die Namensnennung „© OpenStreetMap-Mitwirkende“. Viele Navigations-Apps und Firmen nutzen OSM-Daten, und in Deutschland ist die Karte oft genauer als kommerzielle Karten, gerade bei Fußwegen, Radwegen und Hausnummern.
Wichtig zu wissen: OSM liefert die Daten. Die Kartenbilder (Kacheln), die Besucher sehen, kommen von einem Kartenserver. Wer diesen Server betreibt, entscheidet über Aussehen, Geschwindigkeit, Nutzungsbedingungen und Datenschutz.
Weg 1: Das iframe von openstreetmap.org
Auf openstreetmap.org die Stelle suchen, rechts auf „Teilen“ klicken und den HTML-Code kopieren. In WordPress kommt er in einen Block „Individuelles HTML“.
- Gut: kostenlos und ohne Plugin in zwei Minuten fertig.
- Grenzen: Es gibt nur einen Marker und kein eigenes Aussehen. Eine Liste oder Popups mit Text oder Bild fehlen ebenfalls.
- Beachten: Die Kartenserver von openstreetmap.org werden aus Spenden bezahlt. Ihre Nutzungsrichtlinie begrenzt, wie stark fremde Websites sie nutzen dürfen. Für eine kleine Kontaktseite ist das meist kein Thema, für eine viel besuchte Website schon. Und die Karte lädt sofort, also ohne vorher zu fragen.
Weg 2: Ein Leaflet-Plugin
Leaflet ist eine bewährte JavaScript-Bibliothek für Karten. Mehrere WordPress-Plugins bauen darauf auf, zum Beispiel „Leaflet Map“ oder „OSM“. Damit gehen mehrere Marker, Formen, GPX-Tracks und verschiedene Kartenserver.
- Gut: kostenlos und flexibel, mit großer Auswahl an Kartenservern und Erweiterungen.
- Grenzen: Eingestellt wird meist über Shortcodes mit Parametern und über Einstellungsseiten, nicht direkt auf der Karte. Die Karten bestehen meist aus Rasterbildern: scharf nur in festen Zoomstufen, ohne 3D und ohne Drehen.
Weg 3: Ein Karten-Editor (Map Studio)
Map Studio ist unser kostenloses Plugin. Statt Formulare auszufüllen, gestaltest du die Karte direkt: Die Karte füllt den Bildschirm, links stehen deine Orte, rechts das Aussehen.
- Vektorkarten: scharf auf jedem Bildschirm, fließender Zoom, Drehen und Neigen, 3D-Gebäude, Licht und Himmel bis zur Sonne, wie sie gerade steht.
- Eigenes Aussehen: sechs Kartenstile und deine Markenfarbe für Karte, Pins und Flächen.
- Orte mit Inhalt: 66 Icons, Fotos, formatierter Text, Öffnungszeiten, Popups.
- Mehr als Punkte: Flächen wie Liefergebiete und Routen entlang echter Straßen und Wege.
- Ohne Key und Konto: Die Kacheln kommen von OpenFreeMap, das für Websites gedacht ist und keine Nutzungsgrenzen für normale Websites hat.
- Datenschutz: Laden nach Klick und die Anbindung an Cookie-Tools sind dabei. Mit Pro kommen die Kartendaten von deinem eigenen Server.
Alle drei Wege im Überblick
| iframe von osm.org | Leaflet-Plugin | Map Studio | |
|---|---|---|---|
| Kosten | gratis | gratis | gratis (Pro optional) |
| Mehrere Orte | nein | ja | ja, mit Liste, Suche und Filter |
| Bedienung | Code kopieren | Shortcodes, Einstellungen | Editor direkt auf der Karte |
| Kartenart | Rasterbilder | Rasterbilder | Vektorkarte, 3D |
| Eigenes Aussehen | nein | über die Wahl des Kartenservers | Stile und Markenfarbe |
| Zwei-Klick / Cookie-Tool | selbst bauen | je nach Plugin | eingebaut |
Umzug von Google Maps
Hast du deine Orte schon in Google My Maps? Exportiere die Karte als KML und importiere sie in Map Studio. Liegen deine Adressen in Excel, geht es als CSV: Map Studio findet die Koordinaten zu den Adressen selbst.
Häufige Fragen
Ist OpenStreetMap kostenlos?
Die Kartendaten sind frei nutzbar (Lizenz ODbL), mit Namensnennung „© OpenStreetMap-Mitwirkende“. Map Studio setzt diese Angabe automatisch. Für die Kartenbilder gelten zusätzlich die Bedingungen des jeweiligen Kartenservers.
Brauche ich einen API-Key?
Für das iframe und für Map Studio nicht. Bei Leaflet-Plugins hängt es vom gewählten Kartenserver ab: Manche brauchen einen Schlüssel, andere nicht.
Ist eine OpenStreetMap-Karte DSGVO-konform?
Daten an Google gehen dabei nicht. Der Kartenserver sieht aber trotzdem die IP-Adresse der Besucher. Mehr dazu im Ratgeber Google Maps DSGVO-konform – oder ganz ohne Google.
Funktioniert das mit Elementor und meinem Theme?
Map Studio bringt einen Block, ein Elementor-Widget und einen Shortcode mit. Damit läuft es auch mit Divi und klassischen Themes.
OpenStreetMap, schön gestaltet – gratis
Map Studio liegt kostenlos im WordPress-Verzeichnis. Installieren und loslegen kannst du ohne Konto und ohne API-Key.