As a general rule: If possible, please use the option provided by Google Maps for direct embedding in an iframe. This is where Privacy Smart Blocker works without further adjustments.
If Google Maps is to be rendered via the API, you have to pay attention to two cases here:
User visits the website with consent given to Google Maps
User visits the website without consent given to Google Maps
In case 1, please 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>
Please 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, please replace it accordingly.
One problem you encounter with 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, please 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 functions because we have imitated the google.maps.Map functionality (code section "Mock Implementation"). This way we can find out where the Privacy Smart Blocker has to be integrated. If there has been Consent 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.