Dieser Beitrag zeigt dir, wie du eine Open Street Map Karte in deine WordPress Website DSGVO konform einbinden kannst ,und wie du den häufigen iframe Fehler beseitigst.

Es gibt einen Weg , wie man eine Open Street Map Karte in das eigene WordPress Block Theme einbinden kann, mit einer Klick Variante die DSGVO konform ist.

Dabei zeige ich dir, welchen Weg ich gegangen bin, und wie ich dann dazu gekommen bin.

Was ist Open Street Map

Open Street Map ist ein freies – Open Source – offenes Kartenprojekt. Es basiert auf der Mitarbeit Tausender Freiwilliger weltweit, die

• Straßen
• Wege
• POIs ( Points of Interest )
• oder Wanderpfade

eintragen.

👉 Ziel: eine möglichst genaue, frei nutzbare Weltkarte, auf die jeder Zugriff hat – ohne Abhängigkeit von einem Großkonzern.

Open Street Map und Datenschutz

Aber was macht OpenStreetMap in Sachen Datenschutz so besonders?

👉 OSM trackt dich nicht . Es werden keine Tracking-Cookies gesetzt.

Allerdings kann die IP Adresse an die Server von Open Street Map übermittelt werden. Damit es überhaupt etwas anzeigen kann.

Open Street Map Code einbinden

Wenn du als Alternative zu Google Maps dir Open Street Map holen willst – hier die Schritt für Schritt Anleitung:

1 – Öffne die Website: openstreemap.org

2 – Gebe in die Suche deine Adresse ein
Es wird dann links eingeblendet, Adressen, die dazu passen. Dort wähle die aus, die für dich entspricht.

3 – Ich gebe ein EO Oberwart

4 – Kicke rechts auf den Teilen Button, im Bild grün

Dann öffnet sich obige Sidebar. Dort hat du drei Möglichkeiten:

1. Link
2. Kurz-URL
3. HTML

1 – Link

Das ist der normale, lange Link zu OpenStreetMap mit allen Parametern (Koordinaten, Zoomstufe, Layer, Marker).

Beispiel: 
https://www.openstreetmap.org/?mlat=47.29322&mlon=16.20876#map=17/47.29322/16.20876

Verwendet man zum Weitergeben (z. B. per E-Mail oder auf Social Media), nicht fürs Einbetten.

Wenn du den in <object> einfügst, bekommst du die komplette OSM-Seite.

2 – Kurz-URL

Gleicher Inhalt wie die normale URL, nur kürzer, weil ein Shortener von OSM benutzt wird.

Beispiel:
 https://osm.org/go/0JmJpXj--

Praktisch zum Teilen in Messenger oder per QR-Code.

Funktioniert technisch wie die lange URL, also nicht optimiert fürs Einbetten.

3- HTML

Das ist der richtige Einbettungscode, den du brauchst, wenn du die Karte auf deiner Website anzeigen willst.

Standardmäßig ist das ein <iframe> mit der export/embed.html?...-Adresse.

Beispiel: 
<iframe src="https://www.openstreetmap.org/export/embed.html?bbox=..." style="border:0;"></iframe>

Den Link innerhalb des src kannst du auch in ein <object> setzen

Das ist der einzige der drei, der eine schlanke Karte ohne OSM-Menüs lädt.

Open Street Map iframe Problem

Das Problem mit dem einfach eingebundenen iframe von OSM ist, das es in machen Browsern wie Chrome dazu kommt, das nicht meine Standort Karte angzeigt wird, sondern die gesamte Weltkarte. Alles ziemlich blau. Man sieht nur die Weltmeere. Ha Ha.

Es kommt wahrscheinlich kein User drauf, dass er nur den Aktualisieren Button des Browsers klicken müsste, dann wird nämlich die echtes Standort Karte von OSM geladen.

Ursache für iframe Fehler in Chrome ?

Dieser iframe Fehler ist bekannt. Auch hier . Warum das in Chrome öfter passiert:

• Chrome ist sehr aggressiv im „Render-first“-Ansatz, das heißt, er zeigt Inhalte, bevor wirklich alle Maße fix sind.
• Wenn Leaflet / OSM zu diesem Zeitpunkt die Größe des Containers misst, bekommt es evtl. 0x0 oder eine falsche Zahl → Standardansicht = Atlantik.

• Nach einem Reload kennt der Browser die Maße schon → Karte wird korrekt angezeigt.

OSM Fehler beheben mit object

Es gibt allerdings eine besssere Möglichkeit, statt einfach den iframe von OSM zu übernehmen. Nämlich mit < object>:

Tausche dein <iframe> gegen ein <object> – Dein Embed-Code sieht dann so aus:

<object
  data="https://www.openstreetmap.org/export/embed.html?bbox=...&layer=mapnik&marker=..."
  width="100%" height="400px">
</object>

Warum das <object> geholfen hat:

• <object> lädt die Karte nicht sofort in das Rendering-Modell von Chrome, sondern behandelt sie wie ein eigenes „Dokument“.
• Dadurch entfallen die Layout- und Timing-Probleme, und die Koordinaten (Marker/Bounding Box) greifen zuverlässig.

Jetzt ladet zwar OSM den genauen Standort in der Karte im Block Theme, allerdings, ist das jetzt noch nicht DSGVO konform. Weil nämlich auch Open Street Map die IP Adresse braucht.

Warum OpenStreetMap auch ohne Selbsthosting DSGVO-konform eingebunden werden kann

Oft wird behauptet, OpenStreetMap sei nur dann DSGVO-konform nutzbar, wenn die Karten über einen selbstgehosteten Server ausgeliefert werden. Diese Aussage ist zu pauschal und führt in die Irre.

1. Technischer Hintergrund
   • OpenStreetMap stellt Kartenkacheln über eigene Server bereit, die zum Teil in Europa, zum Teil außerhalb der EU betrieben werden.
   • Wie bei allen Webdiensten kann es sein, dass Nutzer aus anderen Regionen der Welt Karten über sogenannte Caches (Content Delivery Networks) von außerhalb der EU abrufen.
   • Das bedeutet nicht automatisch einen DSGVO-Verstoß, sondern lediglich, dass eine Datenübertragung an Drittländer möglich ist.
2. Rechtslage nach DSGVO
   • Entscheidend ist nicht der Dienst selbst, sondern die Art der Einbindung.
   • Werden Karten beim Aufruf einer Webseite sofort automatisch geladen, erfolgt bereits beim Seitenaufruf eine Datenübertragung (z. B. IP-Adresse des Nutzers) an die OSM-Server.
   • DSGVO-konform ist dies nur mit einer entsprechenden Rechtsgrundlage (z. B. Einwilligung).
3. Praxislösung: Click-to-Load
   • Eine verbreitete und anerkannte Lösung ist die sogenannte „Click-to-Load“-Einbindung.
   • Dabei wird die Karte erst geladen, wenn der Nutzer aktiv auf eine Schaltfläche klickt.
   • Unterhalb der Schaltfläche steht ein Hinweis wie:
     „Beim Laden der Karte werden Daten (z. B. Ihre IP-Adresse) an OpenStreetMap-Server übertragen. Weitere Informationen finden Sie in der Datenschutzerklärung von OpenStreetMap.“
   • Durch diesen Mechanismus wird die Datenübertragung transparent gemacht und erst nach aktiver Handlung des Nutzers ausgelöst – damit ist die Einbindung DSGVO-konform.
4. Selbsthosting als Option, nicht Pflicht
   • Das Selbsthosting eines OSM-Servers ist die datenschutzfreundlichste Lösung, weil keine externen Anfragen mehr erfolgen.
   • Für die meisten Webseiten ist es jedoch technisch und organisatorisch unnötig aufwendig.
   • Mit einer Click-to-Load-Einbindung und einem klaren Hinweistext ist bereits eine praxisgerechte und datenschutzkonforme Nutzung von OpenStreetMap möglich.

👉 Fazit:
Selbsthosting ist eine Option, aber keine Pflicht. Wer Karten DSGVO-konform einbinden möchte, kann dies mit einer einfachen Click-to-Load-Lösung erreichen – ohne hohen technischen Aufwand und ohne Abhängigkeit von Drittanbietern, die Angst vor angeblichen „DSGVO-Problemen“ schüren.

Open Street Map DSGVO konform in Block Theme einbinden:

Hier zeige ich dir, wie du nun deinen Open Street Map Standort in einem WordPress Block Theme ohne Plugin und DSGVO konform einbinden kannst. Dazu braucht es allerdings ein kleins Javascript Snippet.

Wie geht das ?

👉 Wir erstellen ein Vorschaubild (/ ( Platzhalter Bild ) von der Open Street Map Karte. Darunter ein Text, dass der User weiß, erst wenn er zustimmt und auf das Bild klickt, wird die echte OSM Karte geladen und seine IP Adresse an die Server von OSM geschickt.

Schritt für Schritt Anleitung:

1 – Vorschaubild als Platzhalter – Vorüberlegungen

Ich erstelle einen Screenshot vom Kartenausschnitt als Platzhalter.

Das Problem hier ist, dass wir in einem HTML Block arbeiten. Wenn ich nun ein Platzhalter Bild für die echte Open Street Map Karte in die Mediathek hochlade und dann den Link kopiere und in das JavaScript Snippet einfüge, geht das zwar in Ordnung.

Allerdings, wenn du den Server wechselst, dann ist das Vorschaubild auch weg, weil es ja hardcoded im JavaScript Snippet steckt. Und wenn sich der Pfad ändert ist das Vorschaubild weg.

Man könnte natürlich das Platzhalter Bild auch dynamisch einfügen. Dazu bräuchten wir aber PHP. Da wir aber in einem HTML Block sind, ist das nicht möglich. Alle anderen Überlegungen würden in diesem Rahmen zu weit führen.

Deswegen belassen wir es, und laden das Vorschaubild (Screenshot von der Karte ) einfach in die Mediathek hoch. 👍😄

2 – Bild in Mediathek hochladen

Dieses Bild lädst du dann ganz einfach in die WordPress Mediathek hinein und kopierst den Bilder Link.

Wahrscheinlich kommt deine OSM Karte in den Footer, sprich die footer.html Datei. Und dort brauchst du dann ein paar Blöcke. Diese variieren natürlich nach deinem Aufbau.

WordPress: Template Teil für Open Street Map erstellen

Am besten ist, wenn man gleich ein neues Template Teil in einem Block Theme erstellt für das Einbinden der Open Street Map.

Damit hat man es leichter, weil man es damit immer wieder weiterverwenden kann und egal, wo, überall einbinden kann.

Bei mir liegt es unter : Design – Website Editor – Vorlagen – Template Teil: openstreetmap. Dieses Template Teil füge ich dann in das Footer Template hinzu.

☝️ Achtung ! Zu Übungszwecken habe ich in das Template Teil openstreetmap zwei Karten eingebunden, damit ich sehe, wie das Design aussieht. Natürlich lösche ich dann eines davon, wenn ich mich entschlossen habe, welches ich nehmen werde.

Rechts im Bild siehst du dann das Template Teil Footer in der Gesamtheit.

3 – openstreetmap Template Teil: Mein Aufbau schaut so aus:

• Gruppe Block
• Abstandhalter ( braucht man nicht wirklich )
• Spalten Block mit 3 Spalten
• 1. und 3. Spalte leer – Weite: 2 %
• Mittlere Spalte für das OSM Snippet – Weite : 98%
• HTML Block in die mittlere Spalte

Und jetzt der Code dazu

<!-- HTML-Block im WordPress Block-Editor -->

Als erstes kommt das Vorschaubild / Platzhalter 


<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5b/Openstreetmap_logo.svg/320px-Openstreetmap_logo.svg.png"
     alt="OpenStreetMap Vorschau"


     style="width: 100%; height: 400px; object-fit: cover; filter: grayscale(80%); cursor: pointer;"


     onclick="(function(img){
        const obj = document.createElement('object');

        obj.data = '"https://www.openstreetmap.org/export/embed.html?bbox=...&layer=mapnik&marker=...';


        obj.style.display = 'block';
        obj.style.width = '100%';
        obj.style.height = '400px';
        obj.style.border = '0';
        obj.style.borderRadius = '10px';
        obj.style.boxSizing = 'border-box';
        img.parentNode.replaceChild(obj, img);
     })(this)">

Bei Klick verschiebt sich das Bild leider ein wenig nach links. Aus dem Grund fügen wir noch folgendes hinzu:

obj.style.margin = '0 auto'; 

Man kann das ganze auch als iframe einbinden. Dadurch, dass es nun in einem Javacript eingebettet ist, kommt das oben erwähnte iframe Problem nicht mehr:

<!-- HTML-Block im WordPress Block-Editor -->

<!-- Vorschaubild -->

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5b/Openstreetmap_logo.svg/320px-Openstreetmap_logo.svg.png"
     alt="OpenStreetMap Vorschau"
     style="width: 100%; height: 400px; object-fit: cover; filter: grayscale(80%); cursor: pointer; border-radius: 10px;"
     onclick="(function(img){
        const iframe = document.createElement('iframe');

        iframe.src = 'https://www.openstreetmap.org/export/embed.html?bbox=...&layer=mapnik&marker=...';
        iframe.width = '100%';
        iframe.height = '400';
        iframe.style.border = '0';
        iframe.style.borderRadius = '10px';
        iframe.style.boxSizing = 'border-box';
        iframe.setAttribute('loading', 'lazy');

        img.parentNode.replaceChild(iframe, img);
     })(this)">

Unerschied object vs. iframe + javascript

Unterschiede zur object-Variante:

• iframe.src statt obj.data.
• Breite/Höhe hier teils über Attribute (width, height) → weil Browser <iframe> so am liebsten hat.
• Bonus: loading="lazy" sorgt für bessere Performance.

👉 Klick auf das Bild → Bild wird durch ein <iframe> ersetzt → OSM-Map lädt.

Design Varianten

Wie oben schon besprochen, habe ich zwei verschiedene Designs:

• Weite Breite – Wide Width
• Volle Breite – Full Width

Da wir ja in einem HTML Block sind, ändert sich hier Full Width und Wide Width nur durch width: 80% versus width:100 %. Das ist alles und da hier die WordPress Block Struktur halt nicht so greift, nehmen wir noch ein margin: 0px auto; dazu, und fertig.

Also du musst das dann zweimal ändern:

Das ist mit iframe: 
style="width: 100%;
 iframe.width = '100%'; oder 
hier braucht man kein margin: 0px auto mehr 😀

mit object: 
 style="width: 80%;
 obj.style.width = '80%';
obj.style.margin = '0 auto'; 

Ehrlich gesagt, finde ich diese Full Width Variante auch sehr cool, Sieht aus wie ein Cover Bild nur eben die Street Map Karte.

Was macht Borlabs Cookie Plugin ?

Im Prinzip nicht viel anderes. Es verwendet ein schickes Overlay Bild und der Text steht auch auf dem Bild. Dafür ist es kostenpflichtig. Und natürlich kann es noch mehr, nicht nur eine Karte einbinden.

Das mit dem Overlay könnte man auch machen. Allerdings wird mir das dann wieder zuviel CSS in der style.css Datei. Das will man ja vermeiden. Und auch das Code Snippet wäre viel länger.

1. Braucht man eine AVV (Auftragsverarbeitungsvertrag) mit OSM?

❌ Nein.
Warum? Weil OSM keine Auftragsverarbeiter im Sinne der DSGVO sind.

• Ein Auftragsverarbeiter ist jemand, den du damit beauftragst, personenbezogene Daten in deinem Auftrag zu verarbeiten (z. B. ein Newsletter-Dienst oder Webhoster).
• Bei OpenStreetMap ist das nicht der Fall: Deine Seite zeigt nur Inhalte von deren Servern an. OSM verarbeitet die Daten (IP-Adressen, Browserinfos) für ihre eigenen Zwecke, nicht in deinem Auftrag.

👉 Deshalb gibt es von OSM auch keine AVV. Das wäre auch unlogisch – du hast keine Vertragsbeziehung mit OSM, du nutzt einfach ein öffentlich bereitgestelltes Kartenangebot.

2. Was bedeutet das für dich als Webseitenbetreiber?

• Du musst in deiner Datenschutzerklärung darauf hinweisen, dass beim Laden der Karte Daten an OSM übertragen werden können.
• Rechtliche Grundlage: Einwilligung (z. B. über dein Click-to-Load mit Hinweistext).
• Mehr brauchst du nicht. Kein AVV, kein Papierkram.

3. Und was ist mit Borlabs oder anderen Cookie-Consent-Tools?

• Borlabs selbst hat keine AVV mit OSM oder Google oder YouTube.
• Die tun nichts anderes, als deine Einbindung technisch zu steuern („erst laden, wenn Nutzer klickt“).
• Den AVV hast du nur mit Borlabs selbst (weil die Daten von dir verarbeiten, z. B. Consent-Cookies auf deinem Server verwalten).
• Aber Borlabs schließt keinen AVV mit Drittanbietern für dich ab.

👉 Also: Borlabs nimmt dir da nichts ab, außer der Bequemlichkeit. Du musst trotzdem in deiner Datenschutzerklärung erklären, dass durch die Einbindung von OSM/Google etc. Daten fließen.

4. Abschließend :

• Keine AVV mit OSM nötig (weil sie kein Auftragsverarbeiter sind).
• Cookie-Consent-Tools lösen das auch nicht durch einen AVV. Sie liefern nur Technik (Click-to-Load, Opt-in).
• Mit deinem Snippet bist du auf demselben Stand wie Borlabs & Co – nur günstiger.

Links:

Open Street Map FAQ
Open Street Map AV Vertrag
iframe Bug
Open Street Map nutzen
Open Street Map Issue – github

Fazit:

Ja, es ist tatsächlich möglich, auch Open Street Map DSGVO konform in ein WordPress Block Theme einzubinden. Im Prinzip ist es jetzt genauso, wie die Google Maps eingebunden werden.

Es gibt allerdings einen Unterschied: Während Google massives Tracking dranhängt, werden bei Open Street Map nur die IP Adresse ohne sonstiges Tracking gesendet.

Wieder ein Plugin gespart. Und diese Technik mit dem Javascript Snippet ist ein Geheimtipp. Den findest du nirgendwo zur Zeit im Netz.💡🤩