How to use Cookie-Compliant Google Maps in Webflow

If you are using Google Maps on your website, please follow the documentation below to make it cookie-compliant and ensure the map is displayed only after users have given consent.

Follow this step-by-step guide to embed Google Maps:

Go to the Google Maps documentation.

Access Google Maps documentation and go to the 'Generating Iframe' section to start your implementation.

Select the option you want.

Click through the available options to customize what will be displayed on your map.

Register to get an API key.

Go to the API key page to create a new API key or find an existing one.

Enter your API key to generate the embed code.

Enter your API key and click 'Done' to generate the map embed code.

Copy the code.

Select and copy the map embed code.

Paste the code in an Code Embed element in Webflow.

Paste the map embed code in an Code Embed element in Webflow.

If you use the Webflow native Code Embed element, the map will display as disabled on the published website, which may not be ideal for user experience. We highly recommend using our map element with a placeholder that prompts the user to consent before loading the map.

To do this, click the button below to copy the element and paste it into your page:

Copy Maps Element

Add fs-consent-categories attribute.

Add the fs-consent-categories attribute with the category the user must consent to before loading the map. If you set fs-consent-categories="personalization", the map will only load after the user accepts the 'personalization' cookies in the preferences panel.

Replace src with fs-consent-src.

In the map embed code replace the src attribute with fs-consent-src. With this change, our solution can block the loading of the map until the user consents to it.