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

@Dennis_K , did you find a solution in the end about this?
Kind regards,
Ruta

Hi there, I was looking for solutions for the same problem.
Since I was not able to find something, I developed a webflow component and a script as a solution.

This solution displays a consent layer, which you can be styled however you like.
You only need to make sure that the consent layer with the attribut bs_gmc=consent_layer and a button with the attribut bs_gmc=activate_button is present.
Inside the component is a div with the class ‘map’. Change the div’s attribute to customize the google maps div to your needs. This is where you add your api key and the latitude and longitude you want to display.

Google Maps calls and loading of the libraries is only made after the use clicks on the consent button!

How to reuse it:

  1. You need to embedd this script in the site’s setting under Before </body> tag:
<script src="https://cdn.black-chamber.cc/gm/v1/bcGmActivateMap-1.0.js" type="text/javascript"></script>
  1. The webflow component can be copied from this project:
    Webflow - Google Maps Consent Component

  2. Edit the attributes of the map div

Feel free to reuse and adapt the script to your specific needs!
Let me know what you thing and how it might be improved.