Google Map datenschutzkonform in Website einbinden – 2 Klick Lösung

Eingebettete Google Maps setzten zwar bei Aufruf keine Cookies – und werden deshalb von Tools wie Cookiebot nicht erfasst – stellen aber dennoch eine Verbindung zum Google Server her und benötigen daher die explizite Zustimmung der Besucher.

Genau genommen ist es ein wenig komplizierter; ruft man die Google Maps Seite auf und hat keine Google Cookies im Browser, erscheint das Google Consent Fenster („Bevor Sie zu Google Maps weitergehen…“). Stimmt man zu setzt Google die entsprechenden Cookies.
Sind diese Cookies im Browser vorhanden, sind sie auch für die besuchten Webseiten, auf denen eine Google Karte eingebunden ist, aktiv.
Hingegen werden diese Cookies nicht gesetzt, wenn man mit einem Browser ohne Google Cookies eine Webseite mit eingebetteter Karte besucht. Das ist auch der Grund, warum Cookie Consent Tools wie Cookiebot auf Google Karten nicht reagieren (Link).

Nimmt man die ganze Cookiegeschichte (und seine Besucher) ernst, sollte man jedoch vor einer Anzeige der Karte und der damit verbundenen Datenübertragung ähnlich warnen, wie bei der Anzeige eines Youtube Videos oder dem Einsatz von Google Analytics.
Hier eine Lösung, wie das geschehen kann.

In diesem Beispiel wird noch unterschieden, ob die Karte nur einmal oder für die gesamte Website angezeigt werden soll. Dazu wird das Cookieskript von js-cookie eingesetzt. Das kann man natürlich weglassen; dann würde bei jedem Neuladen der Seite oder wenn die Karte auf mehreren Seiten eingebunden ist, jedesmal zunächst wiederum der Hinweis angezeigt werden.

<div class="googlemap">
    <div class="map-placeholder"
        data-iframe-src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d166052.2579695273!2d10.992612155146515!3d49.43600853805825!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x479f57aeb5b61cd3%3A0xdd5daf85a98c21b7!2zTsO8cm5iZXJn!5e0!3m2!1sde!2sde!4v1621428050367!5m2!1sde!2sde"
        data-width="100%" data-height="400px" style="width: 100%; min-height: 400px;">
        <h4>Google Map laden</h4>
        <p>
            Wenn Sie die Map auf dieser Seite sehen möchten, werden personenbezogene Daten an den Betreiber der Map
            gesendet und Cookies durch den Betreiber gesetzt.
            Daher ist es möglich, dass der Anbieter Ihre Zugriffe speichert und Ihr Verhalten analysieren kann.
            Die Datenschutzerklärung von Google Maps finden Sie unter:
            <a href="https://policies.google.com/privacy" target="_blank" title="https://policies.google.com/privacy">https://policies.google.com/privacy</a>
        </p>
        <div>
            <button id="map-privacy-check-once" type="button">
                Karte auf dieser Seite laden
            </button>
            <button id="map-privacy-check-always" type="button">
                Karte auf allen Seiten laden
            </button>
        </div>
    </div>
</div>
function activateGoogleMaps() {
    var mapPlaceholder = $('.map-placeholder');
    var mapPlaceholderWidth = mapPlaceholder.attr('data-width');
    var mapPlaceholderHeight = mapPlaceholder.attr('data-height');
    var mapPlaceholderSrc = mapPlaceholder.attr('data-iframe-src')
    // Build iframe
    var mapIFrame = '<iframe src="' + mapPlaceholderSrc + '" width="' + mapPlaceholderWidth + '" height="' + mapPlaceholderHeight + '" style="border:0;" allowfullscreen="" loading="lazy"></iframe>';
    // Add iFrame and remove placeholder
    mapPlaceholder.after(mapIFrame);
    mapPlaceholder.hide();
}

function setCookie(){
    Cookies.set('googleMapsAllowed', '1', { expires: 1 })
}

$(document).ready(function(){
    var cookie = Cookies.get('googleMapsAllowed');

    if(cookie){
        activateGoogleMaps();
    }

    $('#map-privacy-check-once').click(function() {
        activateGoogleMaps();
    })

    $('#map-privacy-check-always').click(function() {
        activateGoogleMaps();
        setCookie();
    })
});

Beispiel
Hinweis: das Beispiel basiert auf der jQuery Bibliothek und zu Demozwecken wird keinerlei CSS verwendet.