How to use Consent-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:

Note: Consent Pro is the standalone successor to the Cookie Consent solution previously included in Finsweet Components. You may still encounter mentions of “Cookie Consent” or “Components” in the screenshots of this documentation, but they remain accurate and applicable for following the tutorial.

Go to the Google Maps documentation.

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

Google Maps Platform page showing iframe generation options and a map of Sydney, Australia.

Select the option you want.

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

Google Maps Platform page showing options to generate an iframe with location input and Sydney map.

Register to get an API key.

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

Google Maps Platform docs page showing API key registration step and an embedded map of New York.

Enter your API key to generate the embed code.

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

Google Maps Platform page showing how to enter an API key to embed a New York map iframe.

Copy the code.

Select and copy the map embed code.

Google Maps Platform page showing iframe code to embed a New York map on a website.

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

Code editor window showing embedded Google Maps iframe HTML code with custom settings.

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.

Code editor showing iframe embedding Google Maps with personalization consent category.

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.