Streaming live at 10am (PST)

Google Maps JavaScript API key now required to use the Map component in Webflow


#1

In June of 2016, Google updated their terms of service and removed keyless access to their Maps API (which Webflow relies on to power our map component). This change required all users of their API to provide an API key with every site that uses their service.

While we worked on a solution to let you add your own API key via our app, we temporarily provided our own API key for all Webflow sites to make sure maps continued to load at the time. On July 1st, we’ll be removing that temporary API key, so if you use maps on your site(s), you’ll need to register for your own key with Google.

What do I need to do right now?

If you’re using a map component in Webflow, you’ll need to create a Google Maps JavaScript API key and republish (or re-export) your site for maps to continue loading properly. If you don’t do this by July 1st, the map(s) on your website(s) will load a gray error message instead of an actual map.

  • Follow these steps to register for a new Google Maps JavaScript API key, and enter it on the Integrations tab on each Webflow project that uses a map
  • Republish your site to enable the new API key
  • Visit your published (or exported) site and make sure that the map loads correctly

What if I don’t use the map component on my website(s)?

You don’t need to do anything! One thing to remember though: some Webflow templates come with a Map component (e.g. on a Contact page), so if you based your website off of a template, you might want to double check that it doesn’t contain a map.

Do I have to pay Google now?

Probably not. Access to the Maps API is free for up to 25,000 map loads per day (or about 750,000 per month), with overage pricing kicking in after that. Odds are that you’re not seeing that much traffic, and you’ll be able to keep using Google Maps for free.

What will happen on July 1st?

On July 1st, we’ll be revoking our own API key, which means any sites that you haven’t added your own API key to will see a gray box load instead of a proper Google Map.

What about sites that I’ve exported?

If you’ve exported sites that use the map component, those sites are using Webflow’s API key, and the maps will no longer work after July 1st when the Webflow API key is revoked. To avoid broken maps on exported sites, add your own API key, then re-export the site.

You can also manually enter your new API key in your exported code. Just search your code for one of the following keys:

  • AIzaSyBks0W0NawnPju70JQS5XXPOTTrguDQjWE
  • AIzaSyBQ4EYEg4aRz9-yiCnerTV7bk8GCWgZOhk

When you find one of these, replace it with your own API key and make sure that the loading of the map still works.

Why the change?

Since we provided our temporary API key for all published sites last year, Webflow has seen significant growth in published and exported sites, which has brought the shared key very close to Google’s limit of 200,000 map loads per day. Once this daily limit is reached, Google will cut off map loads for all sites that use that key, which means that all maps across all Webflow sites will fail to load for the rest of that day. This forces us to break out Google Maps usage to individual API keys instead of one master shared one.

Thankfully, 99.9% of you will be under that daily limit of 25,000 map loads, so you’ll be able to continue using Google Maps for free. Given all these considerations, we decided that a direct integration where you can provide your own API key was the best path forward.

We appreciate your understanding on the change, and are here to answer any questions you might have during the transition :slight_smile:


[RESOLVED] Google Maps JavaScript API in Google API Console - Project Limit?
Google Map API Key
#2

Can you use the same Map API for all the websites you build and manage? Or do you need a separate key for each website?


#3

I tried this method, and it will be lots of work updating all the websites I have in Webflow. Plus, I won't get a preview of the map. Personally I find it easier to just open maps.google.com, find the location, click share and embed on website, then paste it into an embed element and maybe change the size. This method will display the map while designing, plus it does not require an API key.


#4

You can use one key for all your sites; just keep in mind that they'll all be counting against your loads limit. Since the limit is so high it probably won't matter much—just something to keep in mind.


#5

Thanks @bonsaikitten. That's an interesting approach.


#6

OK @jmw. Thanks for the reply.


#7

It's possible that Google Maps will start limiting previews of Maps even through the embed element, since their terms of service mentions that embeds are only allowed on non-password-protected sites. But you're right, if you are happy with the embed method (which removes some flexibility like the ability to add a custom tooltips, or have fine-grained control over zoom, or in the future capability like showing CMS items on a map, or the responsive-by-default nature of using the JavaScript API without requiring an <iframe>, etc) then you can bypass using the Maps component.


#8

Possibility to add CMS items on a map in the future sounds cool!

When it comes to fine-grained control over zoom, the direct embed I described gives you even better control over zoom. And simply setting width to 100% makes it also really flexible.

Edit: I also forgot to mention that you can put maps into dynamic lists with this method.


#9

Just updated our websites (all external). Might be worth noting for Webflow users, who host outside of Webflow, that the API key is written out in webflow.js (just search for var googleMapsApiKey to check). Then, if like us, all you need to do is update this js file once you've added your key in Webflow Integrations and re-exported. No need to update the whole site for existing maps.

Interesting watching the API Manager Dashboard page increment as users open the page(s) with maps. Well, for a few minutes anyway :wink:

Mike


#10

Working perfect for me, and saving a ton of hassle and tinkering.
I’m putting the embed string for the iframe as a field in an event entry in CMS collections and using an embed for the map.
Perfect. How is it so simple? #knockonwood