Webflow sync, pageviews & more.
NEW

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

Explore Logic tutorials
Can Webflow be used to clip an image using an SVG clipping mask without custom coding?
How can I fix the issue where my custom cursor gets stuck at the edge of the div on my Webflow CMS project pages when hovering over Vimeo videos?
How can I embed an HTML form on a modal in Webflow?
Can the character limit for embedding HTML code in Webflow be increased beyond 10,000?
What are some ways to resolve compatibility issues with Internet Explorer on my Webflow website?
How can I troubleshoot the issue when my Webflow site, which I have linked to a custom domain, returns a "this page isn't working" error? This is my first time publishing a site and I followed the instructions given by Webflow. Thank you!
How can I resolve the issue of YouTube dropping cookies even when I have enabled Privacy Mode in Webflow settings and tried entering the no-cookie URL?
How can I disable the target=blank code in Webflow's link properties for an image that links to email, so that it doesn't open a separate tab with ?subject=(subject) in the browser?
Can Webflow be integrated with a custom-built NodeJS backend for creating a custom UI widget based on server responses?
Why is the hidden mobile mega-menu still loading on mobile devices, causing excessive DOM size, in Webflow?
How can I change the default icon in a dropdown item in Webflow?
What is the process for optimizing images in Webflow?
How can I fix the "Ensure text remains visible during webfont load" warning in Webflow?
Can Webflow be used to develop a website that provides clinic bookings, integrates with Zapier and Google Calendar, includes customer and admin dashboards, and allows users to update the CMS? Any tips?
How can I make the page scroll down to a specific div named "Contact" when the "Contact" button is clicked on my website using Webflow?
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 change the language of publication dates in Webflow CMS collection from English to Portuguese?
How can I dynamically redirect to a CMS created after form submission 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?
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!
How can I prevent the "w-current" class in Webflow from overriding the height of my custom class on a link block element?
Can anyone help me add a digital clock and date to my Webflow site? I've been able to add custom code, but I need assistance with styling the text. Thank you in advance for your help!
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How can I pull the stored email from the first form submitted on our website and input it into a field on a later form during the sign-up process in Webflow? I have tried using the provided script but it only displays "undefined" in the field. I don't have much knowledge of JavaScript and found this script online.
How do I mirror user input from a form field to a non-form text field on the same Webflow page in real-time using JavaScript?
When will Webflow update the "Select Field" component to allow for a placeholder with different colors before and after selection, without the need for a label above the field?