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
  • Create a Google Cloud project, enable the Maps JavaScript API, generate an API key, and add billing information.
  • Replace Webflow’s native map component with a custom Embed element using iframe code from Google Maps and secure your API key with restrictions.

If you're using Webflow's native map component with Google Maps, you'll need to take action before July 1st, 2024, due to Google requiring billing information and API keys for all map usage.

1. Understand What’s Changing

  • Google is ending support for free, unauthenticated access to Maps (i.e., usage without an API key).
  • Webflow’s native map component relies on this unauthenticated method.
  • After July 1st, embedded maps using the default component will break or not load unless configured with a valid API key.

2. Create a Google Cloud Account

3. Enable the Maps JavaScript API

  • Within your project dashboard, click APIs & Services > Library.
  • Search for Maps JavaScript API and enable it.

4. Generate an API Key

  • Navigate to APIs & Services > Credentials.
  • Click Create Credentials > API key.
  • Copy the generated API key for use in Webflow.

5. Add Billing Information

  • Google now requires billing details to use Maps, even if you stay under the free tier.
  • Go to Billing > Link a billing account and follow the steps to set it up.
  • Google provides $200 in free usage per month per account, which covers many small-use cases.
  • Under APIs & Services > Credentials, click your API key.
  • Set Application restrictions (e.g., HTTP referrers) to prevent misuse.
  • Under API restrictions, choose Maps JavaScript API.

7. Switch to a Custom Embed in Webflow

  • As Webflow’s map component doesn’t currently support API keys, you must manually embed the map using an Embed element.
  • Go to Google Maps, search your location, click Share > Embed a map, then copy the iframe.
  • Paste it into a Webflow Embed element inside your layout.

Summary

To ensure your Google Maps continue working in Webflow after July 1st, you must create a Google Maps API key, enable billing, and switch from Webflow’s default map component to a custom Embed element with your own iframe. This change is necessary due to Google’s enforcement of authenticated API usage.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
Can I use JavaScript or any other method in Webflow to automatically change all instances of '®' to superscript in my chosen font?
How can I debug the issue of the Mux video player not loading on certain pages generated from a CMS collection in Webflow?
What is the error message I'm receiving when visiting my Webflow domain?
How can I implement the instructions in this article to disable text area resize in Webflow?
Is there a way to animate the border lines of button menus in Webflow, wherein the line appears from left to right as if it's being drawn, instead of just changing the width?
How can I create a customizable slider with a custom slider navigation, allowing users to switch slides by hovering over the buttons in Webflow?
How can I combine the animated JS number counter with scroll animation on Webflow and ensure it only animates when the section is in view?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?
Is there a way to make images ignore column padding in Webflow without setting their width manually or using separate divs? Providing the images with 72px padding left and right inside a rich text block is also not preferred due to limitations in reordering and organizing. Is there a solution for this? Thank you!
How can I turn off the gel-box styling of Safari's dropdowns using the code -webkit-appearance:none in Webflow?
How can I add anchor points within the CMS rich text in Webflow?
Can I design a website on Webflow, export it, and then deploy it on a "deployable" environment through Vercel to have access to an SSL verified domain specific to that page?
What should I do about the "Manifest Issue" error I got when running a Lighthouse scan on my Webflow website?
Why does a font appear differently in Webflow compared to Figma and how can I resolve this?
How can I insert an icon inside a Webflow form input field placeholder?
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 dynamically redirect to a CMS created after form submission in Webflow?
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 I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
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?
How can I close a dropdown in Webflow when clicking on a link?
Is there a more optimal way to create a portfolio section with a sticky image container that changes as you scroll, similar to the design on Deveb's website, that works across different web browsers, especially Safari, using Webflow or any other JavaScript tools?
How can I implement a multi-select field with a pre-selected option in a popup form on a collection page using Webflow?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?