Du willst auf deiner Website zeigen, wo dein Laden, deine Praxis oder dein Büro liegt, und am liebsten gleich eine Anfahrtsbeschreibung dazu anbieten? Dann bist du schnell bei der Frage, wie du OpenStreetMap in WordPress einbinden kannst, ohne dir Ärger mit API-Keys, Kosten oder dem Datenschutz einzuhandeln. In dieser Anleitung lernst du zwei Wege kennen: die schnelle Einbettung per HTML und die Variante mit Plugin, Routenplanung und Cookie-Zustimmung.

Warum überhaupt OpenStreetMap?

OpenStreetMap (kurz OSM) ist ein Community-Projekt mit freien Kartendaten. Für dich als Website-Betreiber heißt das: Du brauchst kein Konto bei einem Kartenanbieter, keinen API-Schlüssel und zahlst keine Nutzungsgebühren pro Kartenaufruf. Die Kartenkacheln stellt die gemeinnützige OpenStreetMap Foundation bereit.

Eine Sache gilt aber für jede Karte, die von einem fremden Server geladen wird: Der Browser deines Besuchers fragt die Kartenbilder direkt dort ab und überträgt dabei seine IP-Adresse. Das ist bei OpenStreetMap nicht anders. Deshalb lohnt es sich, die Karte von Anfang an sauber einzubinden, statt sie später nachzubessern.

Weg 1: OpenStreetMap per HTML-Code einbetten

Für eine einfache Karte ohne Extras reicht die Teilen-Funktion auf openstreetmap.org. So gehst du vor:

Öffne openstreetmap.org und suche deine Adresse.
Zoome auf den Ausschnitt, den deine Besucher sehen sollen.
Klicke rechts auf das Symbol Teilen und wähle HTML. Setze bei Bedarf den Haken, um einen Marker anzuzeigen.
Kopiere den angezeigten Code (ein iframe).
Füge ihn in WordPress im Block-Editor über den Block Individuelles HTML auf der gewünschten Seite ein.
Speichere und prüfe die Seite in der Vorschau, auch auf dem Handy.

Das ist in fünf Minuten erledigt. Die Grenzen merkst du aber schnell: Der Besucher kann keine Route planen, die Karte lädt sofort beim Seitenaufruf (also auch ohne Zustimmung) und das Aussehen lässt sich kaum an dein Theme anpassen. Für eine reine Lageskizze kann das reichen, für eine echte Anfahrtsseite eher nicht.

Wichtig: Quellenangabe nicht entfernen

OpenStreetMap-Daten stehen unter der Open Database License. Die Karte muss den Hinweis „© OpenStreetMap-Mitwirkende“ zeigen. Im eingebetteten Code ist er enthalten, lösch ihn also nicht heraus. Die Details findest du auf der Copyright-Seite von OpenStreetMap.

Weg 2: OpenStreetMap in WordPress einbinden mit Plugin und Routenplaner

Wenn deine Besucher direkt auf deiner Seite den Weg zu dir berechnen sollen, brauchst du mehr als ein iframe. Genau dafür haben wir den Routen Planer 4U (RP4U) gebaut: interaktive OpenStreetMap-Karten mit Routenplanung, ohne Konto bei einem Kartenanbieter und ohne eigenen API-Key. Alle Bibliotheken sind lokal im Plugin gebündelt, es werden keine CDNs und keine externen Schriften geladen.

Schritt 1: Karte im Karten-Manager anlegen

Installiere und aktiviere das Plugin. Nach dem Kauf trägst du deinen Lizenzschlüssel unter Karten-Manager → Lizenz ein.
Öffne im Backend den Karten-Manager und klicke auf Neu hinzufügen.
Gib in der Karten-Konfiguration den Mittelpunkt ein. Du kannst die Adresse eintippen (mit Vorschlägen) oder über Auf Karte wählen einfach auf die Karte klicken, dann werden Koordinaten und Adresse automatisch gesetzt.
Lege Zoom (1 = ganze Welt, 19 = Straßenebene) und die Höhe der Karte in Pixeln fest, zum Beispiel 400.

Schritt 2: Ziel festlegen für „So findest du uns“

Für eine klassische Anfahrtsseite trägst du nur das Ziel ein, also deine eigene Adresse. Die Option „Besucher darf das Ziel ändern“ ist standardmäßig aus, dein Ziel bleibt damit fest. Der Besucher gibt nur seinen Startpunkt ein und bekommt die Route zu dir.

Lässt du Start und Ziel leer, zeigt die Karte nur deinen Standort mit Marker, ganz ohne Routing-Formular. Solche reinen Karten laden laut Dokumentation ohne jeden API-Aufruf, nur die Kartenkacheln kommen von OpenStreetMap.

Schritt 3: Karte per Shortcode einbinden

Jede gespeicherte Karte hat eine ID, die du in der Karten-Übersicht siehst. Auf deiner Anfahrtsseite fügst du einen Shortcode-Block ein:

[routenplaner4u id="5"]

Ersetze die 5 durch die ID deiner Karte. Der Shortcode funktioniert in Seiten, Beiträgen und Shortcode-fähigen Widgets. Du kannst auch mehrere Karten auf einer Seite zeigen, etwa für zwei Standorte.

Schritt 4: Farben an dein Theme anpassen

Unter Routenplaner 4U → Einstellungen wählst du per Farbwähler eine Primär- und eine Sekundärfarbe. Buttons, Pins und Akzente übernehmen sie automatisch, sodass die Karte nicht wie ein Fremdkörper wirkt.

Was deine Besucher dann können

Route für Auto, Fahrrad oder zu Fuß berechnen, wahlweise schnellste oder kürzeste Strecke
Schritt-für-Schritt-Wegbeschreibung mit Gesamtstrecke und Dauer
Bis zu 10 Zwischenziele hinzufügen und per Drag & Drop sortieren
Start per Klick auf die Karte wählen, der Ortsname wird automatisch eingetragen
Route per QR-Code aufs Handy holen oder als GPX-Datei für Navis und Outdoor-Apps speichern

Wie das in der Praxis aussieht, kannst du in der Live-Demo mit drei echten Karten ausprobieren, darunter eine „So findest du uns“-Karte mit festem Ziel.

OpenStreetMap und DSGVO: Karte hinter die Zustimmung legen

Ehrlich gesagt kommt kein Karten-Plugin ganz ohne externe Anfragen aus. Beim Routen Planer 4U sind die Kartenkacheln von OpenStreetMap der einzige Dritt-Request, der die IP deines Besuchers sieht. Adresssuche und Routenberechnung laufen in der Premium-Version über den eigenen Geo-Server von 4uWeb in Deutschland. Nur in Ausnahmefällen, etwa bei Zielen außerhalb Europas, fragt dieser OpenRouteService oder Nominatim an, und auch dann nur mit der Server-IP.

Wenn du ganz auf Nummer sicher gehen willst, lädst du die Karte erst nach Zustimmung. Mit dem Cookie Consent Tool 4U (CCT4U) klappt das ohne Zusatzcode:

Lege in CCT4U einen Dienst mit dem Namen routenplaner4u an, genau so geschrieben.
Aktiviere beim Dienst die kontextbezogene Zustimmung, damit der Hinweis direkt an der Stelle der Karte erscheint.
Hinterlege eine ehrliche Beschreibung, zum Beispiel: „Bindet eine Karte von OpenStreetMap ein. Beim Laden der Kartenkacheln wird deine IP-Adresse an OpenStreetMap übertragen.“
Wähle optional ein Platzhalterbild. Lässt du das Feld leer, nutzt RP4U ein mitgeliefertes Standard-Kartenbild.

Ohne Zustimmung sieht dein Besucher dann nur den Platzhalter, es wird nichts von OpenStreetMap geladen. Erst nach einem Klick erscheint die Karte. Ob das für deine Website rechtlich ausreicht, klärst du im Zweifel mit deinem Datenschutzberater. Technisch bist du damit aber sauber aufgestellt.

Welcher Weg passt zu dir?

Nur Lage zeigen, kein Aufwand: iframe von openstreetmap.org, am besten trotzdem mit Hinweis in deiner Datenschutzerklärung.
Anfahrtsseite mit Routenplanung, Zustimmung und passendem Design: Plugin wie RP4U, kombiniert mit einem Consent-Tool.

Häufige Fragen

Brauche ich einen API-Key, um OpenStreetMap in WordPress einzubinden?

Für eine reine Karte nicht. Beim Routen Planer 4U brauchst du für das Routing entweder die Premium-Version, die über den 4uWeb-Server läuft, oder einen eigenen kostenlosen OpenRouteService-Key.

Ist OpenStreetMap kostenlos?

Die Kartendaten sind frei nutzbar, solange du die Quellenangabe „© OpenStreetMap-Mitwirkende“ sichtbar lässt. Ein Konto oder Nutzungsgebühren für das Anzeigen der Karte gibt es nicht.

Warum sehe ich beim Routen Planer 4U kein Routing-Formular?

Das Formular erscheint nur, wenn die Karte einen Start und/oder ein Ziel hat und ein Routing-Modus aktiv ist, also Premium oder eigener Key. Im Modus „Nur Karten“ bleibt es ausgeblendet.

Kann ich mehrere Standorte auf einer Seite zeigen?

Ja. Jede Karte bekommt im Karten-Manager eine eigene ID, und jeder Shortcode zeigt eine unabhängige Karte.

Dein nächster Schritt

Du willst deinen Besuchern eine Anfahrtskarte mit Routenplanung bieten, ohne API-Key und mit Platzhalter vor der Zustimmung? Schau dir die Lizenzen des Routen Planer 4U an. Jede Lizenz enthält alle Funktionen, du wählst nur die Anzahl der Websites: Routen Planer 4U im Shop ansehen.