Wer in Zeiten der DSGVO auf Nummer sicher gehen möchte, lässt seine Besucher nicht ungefragt Inhalte von Dritten automatisch laden. Für Google Maps als iFrame gibt es eine praktische Lösung, die sich in WordPress relativ simpel umsetzen lässt.

Ich benutze für meine Seiten fast ausschließlich das Theme „Divi“ aus dem Hause Elegant Themes. Es bietet in seinem blockbasierten Seiteneditor die Möglichkeit, JavaScript einzubetten. Die Technik lässt sich prinzipiell aber in jedem Theme umsetzen, was es erlaubt, HTML-Code einzubetten. Benötigt werden zwei „Bausteine“.

Platzhalter

Auf der Seite muss ein Platzhalter-Element angelegt werden. In Divi eignet sich dafür bspw. das Zeilen-Modul. Damit der Inhalt dynamisch ersetzt werden kann, muss das Modul benannt werden. Dafür wird die CSS-ID „mapstarget“ eingestellt.

In dieses Zeilen-Modul wird ein Text-Modul eingefügt mit folgendem Inhalt:

Dies ist ein Platzhalter.

<button id=“button“ onclick=“loadContent();“>GoogleMaps anzeigen</button>

Der Text kann selbstverständlich sinnvoller gewählt werden und den Besucher darauf hinweise, dass mit dem Klick auf den Button Inhalte von Google geladen werden, und in diesem Zusammenhang seine IP-Adresse an die Server von Google übertragen werden. In dieser Demo wollen wir es aber simpel halten.

JavaScript

Auf der Seite muss außerdem JavaScript-Code eingefügt werden. Das geht bspw. mit dem Code-Block von Divi, der in der Platzhalter-Row gut aufgehoben ist. Das einzufügende Script ist:

<script language=“javascript“> function loadContent() { document.getElementById(‚mapstarget‘).innerHTML = ‚<iframe src=“https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d81943.627393688!2d8.17831464556067!3d50.07246148067535!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47bdbdd9495c843b%3A0x611fd80c33366c1!2sWiesbaden!5e0!3m2!1sde!2sde!4v1556227158671!5m2!1sde!2sde“ width=“600″ height=“450″ frameborder=“0″ style=“border:0″ allowfullscreen></iframe>‚; } </script>

Der rot und fett markierte Teil muss angepasst werden. Dieser iFrame-Code stammt direkt von Google Maps. Man erhält zu einem eingestellten Kartenausschnitt (optional mit ausgewählter Markierung auf der Karte) den passenden HTML-Code, indem man auf „Teilen“ klickt, und danach „Karten einbetten“ auswählt. Man kann hier noch die Größe beeinflussen, und schließlich den HTML-Code kopieren.

Funktionsweise

Wenn der Besucher auf den Button klickt, wird die JavaScript-Funktion „loadContent()“ ausgeführt. Diese ersetzt den Inhalt des DOM-Elements mit der ID „mapstarget“ mit dem iFrame-Code von Google Maps.

Auf dieser Seite ist eine Demo zu finden.

Kommentare, Vorschläge und Verbesserungen sind willkommen!