How can I use the Smart Data Protector when I integrate Google Maps via their API?

As a rule, directly embedding Google Maps in an iframe will allow Usercentrics' Privacy Shield to work without further adjustments.

If Google Maps is to be rendered via the API, there are two scenarios:

User visits the website with consent given to Google Maps
User visits the website without consent given to Google Maps

In case 1, add the two scripts for Google Maps as follows:

<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>

Replace XXXXXXXXXX with your API key. In the example above, the script googlemaps.js controls the functionality of Google Maps. If the name of the script differs from yours, change it accordingly.

One problem casued by this implementation is that you don't know where to display the content. We therefore recommend this form of integration only for experienced users.

To establish the functionality for the second case, edit the script googlemaps.js as follows and replace the values for zoom, lat and lng with those of your own implementation:

// ./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
    }
}

You will also need to manually check for Google Maps approval in this script. For this purpose we offer window events and the corresponding documentation can be found here.

The previously mentioned example works because we have imitated the google.maps.Map functionality (code section "Mock Implementation"). This way we can find out where the Smart Data Protector has to be integrated. If consent was given, init_map is called again by the actual Google Maps API script, which is set in the callback parameter of the URL. In this case the API is ready and the actual implementation (code section "Real Implementation") is integrated.

Do you need further help?

https://usercentrics.atlassian.net/wiki/spaces/SKB/pages/234913848