How to use Cookie-Compliant Google Maps in Webflow

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

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

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

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

Select and copy the map embed code.

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:

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.

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.

Ensure that you remove the Webflow's native Map element from the page.

Ensure that you remove the Google Maps API key on the 'Apps & Integrations' tab in the Webflow project settings.

For additional parameters and options, see Embedding a map.