Wie kann ich den Smart Data Protector nutzen, wenn ich Google Maps über deren API einbinde?

Grundsätzlich gilt: Wenn möglich, nutzen Sie bitte die Option, die Google Maps zum direkten Einbetten in einen iframe bereitstellt. Hier funktioniert unser Smart Data Protector ohne weitere Anpassungen.

Wenn Google Maps über die API gerendert werden soll, müssen Sie hier zwei Fälle beachten:

Case 1: Benutzer besucht die Webseite mit Zustimmung zu Google Maps

Case 2: Benutzer besucht die Webseite ohne Zustimmung zu Google Maps

Case 1

Fügen Sie bitte die beiden Skripte für Google Maps wie folgt ein:

		<script type="text/javascript" src="js/googlemaps.js"></script>
		<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXX&callback=init_map"></script>

Bitte ersetzen Sie XXXXXXXXXX mit Ihrem API-Key. Im Beispiel oben steuert das Skript googlemaps.js die Funktionalität von Google Maps. Falls der Name des Skripts bei Ihnen abweicht, ersetzen Sie ihn bitte entsprechend.

Problematisch bei dieser Umsetzung ist, dass vorab nicht feststeht, wo genau der Inhalt angezeigt werden soll. Wir empfehlen diese Form der Implementierung daher nur für erfahrene Nutzer.

Case 2

Bearbeiten Sie bitte das Skript googlemaps.js wie folgt und passen Sie die Werte für zoom, lat und lng entsprechend Ihrer Implementierung an:

// ./js/googlemaps.js
function init_map() {
    if(!consentIsGiven()) {
        // MOCK IMPLEMENTATION
        var zoom = 12;
        var lat = 50.9271;
        var lng = 11.5892;
        var map = new google.maps.Map(document.getElementById("map-container"), {
            zoom: zoom,
            center: {
                lat: lat,
                lng: lng
            }
        });
    } else {
        // REAL IMPLEMENTATION
    }
}

In diesem Skript müssen Sie zudem manuell prüfen, ob die Zustimmung für Google Maps vorliegt.

Wir bieten dazu Window Events, die entsprechende Dokumentation finden Sie hier.

Obiges Beispiel funktioniert, da wir die google.maps.Map Funktionalität imitieren (Code-Abschnitt “Mock Implementation”). So finden wir heraus, wo der Smart Data Protector eingebunden werden muss. Liegt ein Consent vor, wird init_map nochmals vom tatsächlichen Google Maps API Skript aufgerufen, welches im Callback-Parameter der URL gesetzt wird. In diesem Fall ist die API bereit und die tatsächliche Implementierung (Code-Abschnitt “Real Implemention”) wird umgesetzt.

Weitere Hilfe benötigt?

Wie bekomme ich Hilfe bei technischen Fragen?