Streaming live at 10am (PST)

Privacy Google Map embed with Webflow Widget

Hey Webflowers,

i am looking for a solution to include the google map widget (webflow) with an advanced privacy mode setting that requires the user to agree to the transfer of data before viewing the map.

As an example (but I didn’t get it to work):

I had already found a similar post when searching for a solution in the forum, but no answers can be found there:

The critical thing about it: The latest case law in Germany from August 2019 says that NO cookies may be loaded before the user has agreed to its use. This includes of course embedded functions like Google Maps.

I hope someone can help the community with this problem!

Maybe @Waldo, @cyberdave or @PixelGeek?

Best regards,

Dennis

Can’t anyone help me? :face_with_monocle:

Hey Dennis_K,

I have the same issue, found this but don’t know how to use it or to make it work for me:

Did you find something else regarding the opt-in?

Regards,
Emma.

Hi,

A colleague helped me with the custom code for the google maps consent topic.

Here you have the custom code, you have to embed it in the section you need. Hope that helps.

    <!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      #map {
        height: 100%;
      }
      
      #consentDiv {
      margin: 0 auto;
      width: 100%;
      height: 100%
      }
      
      #consentBtn { 
      background-image: url("**PUT AN IMAGE HERE**");
      font-size: 22px;
      font-weight: bold;
      line-height: 1.6;
      padding: 50px;
      width: 100%;
      height: 100%
      }
    </style>
  </head>
  <body>
    <div id="consentDiv"></div>
    <div id="map"></div>
  </body>
</html>

<script>
$(document).ready(function() {
     var consentMap = $('<button id="consentBtn">By activating this card, you accept that Google Maps will save your IP address and transfer it to Google.</button>').click(function () {
      var s = document.createElement("script");
			s.type = "text/javascript";
			s.src = "https://maps.googleapis.com/maps/api/js?key=**YOUR_KEY**=initMap";
document.head.appendChild(s);
          initMap();
      });
     $("#consentDiv").append('<tr><td></td></tr>').append(consentMap);

});
  var map;
 	var myLatLng = {lat: 48.120054, lng: 11.603040};
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: myLatLng,
          zoom: 14
        });
         var marker = new google.maps.Marker({
    		position: myLatLng,
    		map: map,
  });
     $("#consentDiv").remove();
    }
</script>

That’s how it should look like:

1 Like

Hey @emma_luna,

great. Thank you so much for sharing. I’m definitely looking at that.

Kind regards,

Dennis from Vibrand Design