Embed Google Maps in a GDPR-Compliant Way in Webflow

Instructions: How do I integrate Google Maps into a Webflow website in compliance with the GDPR? If you include the card with the embed code, it is not GDPR compliant by default, as Google does not block cookies. You would have to prevent it accordingly with a cookie banner and only load it if you accept. With many cookie banners, this works in a similar way to what I show you here in the video instructions.

To include a Google Maps map on your website in accordance with the General Data Protection Regulation (GDPR), you should follow a few steps. First of all, you need to make sure that the map only loads if the user expressly agrees to the use of their data. This can be done via a declaration of consent, which the user must accept before loading the card. In this guide, we use the tool”cookie script”.

Cookie script cookie banner:
https://cookie-script.com/?ref=jonasarleth (affiliate link)

My detailed guide to integrate cookie script into your Webflow project:
https://www.jonasarleth.com/blog/dsgvo-cookie-banner-in-webflow-integrieren-cookie-scrip

Cookie script instructions to block iframes:
https://cookie-script.com/how-to-block-third-party-cookies.html#blocking-third-party-cookies-set-with-an-iframe

How do you integrate a Google Maps map with an embed code into a website?

To integrate a Google Maps map on your website, you can use an embed code from Google Maps. Here are the steps you'll need to take:

Open Google Maps in your browser and search for the desired address.
Select “Share or Embed a Map.”
Click “Embed on a website” and copy the generated code.
Paste the code where you want in Webflow into an embed code element on your website.
Save the changes and follow the steps from the video to block them by default when the site loads.