What should I do if I use the map component in Webflow and want maps to continue loading properly after July 1st?

TL;DR

Enable Billing: Link a valid billing account in Google Cloud Console (includes a $200 free monthly credit).
Generate API Key: Create or update your Google Maps API key under APIs & Services > Credentials.
Restrict API Key: Limit usage to "Maps JavaScript API" and specify allowed domains (e.g., yourdomain.com).
Add Key to Webflow: Paste your API key in Webflow Project Settings > Integrations > Google Maps API Key.
Test Map: Publish your site, verify correct map loading, and check browser console for errors.

Google Maps is enforcing stricter API key requirements starting July 1st, 2024, which may prevent Webflow’s Map component from loading unless properly configured. Follow these steps to ensure your maps continue to function.

1. Enable Billing on Your Google Cloud Project

Go to the Google Cloud Console (console.cloud.google.com).
Navigate to Billing and ensure a valid billing account is linked to your project.
Google provides a $200 free monthly credit, covering most low-traffic use cases.

2. Generate or Update Your Google Maps API Key

Open the Google Cloud Console and go to APIs & Services > Credentials.
Select an existing API key or click Create Credentials > API Key.
Copy the key for later use.

3. Restrict Your API Key for Security

In the API Restrictions section, select Restrict Key and choose:
"Maps JavaScript API" (for Webflow’s Map component).
Under Website Restrictions, add allowed domains:
Example: yourdomain.com and *.yourdomain.com
Click Save to apply changes.

4. Add the API Key to Webflow

In Webflow, go to Project Settings > Integrations > Google Maps API Key.
Paste your API Key in the field and Save Settings.

5. Test Your Map Component

Publish your site and check that your map loads correctly.
Open the browser console (F12 > Console) for any API errors.
If errors appear, verify billing, API restrictions, and domain whitelisting.

Summary

To keep the Webflow Map component working after July 1, 2024, you need a Google Maps API key with billing enabled, domain restrictions set, and proper integration in Webflow. Updating your setup now will prevent your maps from breaking.

Webflow Resources

Webflow templates

Webflow inspiration

Rate this answer

Other Webflow Questions

Why did the autoplay feature for HTML5 videos on my Webflow site stop working on iOS devices?

How can I authenticate HTTP GET requests in Webflow without custom code? Can Logic in Webflow be used to trigger server-side calls on page load and pass URL parameters to Logic? Is it possible to display the data returned from Logic in an HTML element within Webflow? Thank you!

How can I create a diagonal section in Webflow?

How can I move my Webflow site live and add my old MX records to the hosting panel?

Is Webflow considering integrating Printful into its Ecommerce platform?

Is there a code to restrict the zoom out level on Google Maps when using Snazzymaps in Webflow?

What is the Webflow hosting CSS file and why is it large and causing a slow loading time?

Is there an option in Webflow that enables -webkit-font-smoothing: antialiased?

How do I fix the interaction on hover issue in Webflow for a collection list with two different components?

How can Webflow users join the newly created Slack channel for group discussions and chats?

How can I enlarge the horizontal outline of a divider in Webflow when hovered over?

How can I fix the issue with blue underlined formatting overriding my text formatting for text links in Webflow?

Is there anyone experienced with implementing an ambient music file in a loop and playing automatically in the background of the home page on a Webflow website?

Can I rearrange content for mobile in Webflow without affecting the desktop and tablet versions?

When will more details about what Webflow can do be available?

Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?

How can I use the Finsweet script to manage two different sliders on my Webflow page, each feeding content from different collections?

How can I prevent a full-screen slider in Webflow from pausing on hover? Additionally, I would like to link two sliders to one control or navigation. Can anyone with JavaScript knowledge help me achieve this?

How can I fix the issue with the scroll not being smooth on my mobile device (iPhone + Safari) in Webflow?

How can I prevent scroll when my nav is open in Webflow using code? The scroll is disabled correctly when I change the class name of the second 'menu', but it does not get activated when the menu is closed. It doesn't work at all if both class names are the same. Can anyone provide assistance with this issue?

How can I add date filtering to my current list of filters in Webflow using Finsweet CMS Filtering?

How can I change the language of publication dates in Webflow CMS collection from English to Portuguese?

How can I configure Webflow forms to exclude empty or unchecked checkboxes when sending emails? Additionally, is it possible to customize the email text for checked checkboxes, such as using "réservé" instead of "true"?

How can I dynamically redirect to a CMS created after form submission in Webflow?

How can I make the menu close when a link is clicked in Webflow?

How can I hide the "no items found" empty field in Webflow for a second multi-image gallery on certain pages?

How can I implement swipe functionality between tab panes on mobile using custom code in Webflow?

How can I disable right-clicking on images to prevent downloading on my Webflow portfolio website?

Is there a way to fix the issue of values from Textareas with multiple lines not getting parsed correctly in Webflow Logic when posting to an external API?

In Webflow, how can I hide specific elements in the footer (such as "Ramin Khaze The Difference" and "Schedule showing") when the URL contains a certain parameter, such as "?mls"? I am a beginner in coding and would appreciate any help. Thank you!