NIGHTMARE: Google maps api integration

[BUMPandHUSTLE (Mark)]

Hi all. I think I must be being incredibly dense when it comes to integrating google maps into Webflow sites. Coupled with the fact that the Webflow University video does not seem up to date so when I go to Google Maps, it does not represent what WF video is.

Can someone please help.

I have created an API key for Google Maps.

I have added that key to my WF site (I wanted to use one key for all clients as usage is low)

My maps are generated by CMS within Webflow so I used the code found on another thread. This is the code I have used.

I get this error on my Webflow page when editing the site

This is the Chrome console

I have no idea why I am getting this error and I would be extremely grateful if someone could shed some light on this.

---

Website link: Samantha Love pres. Eve with Love,

[knk (Keiran)]

Hey @BUMPandHUSTLE,

can you confirm the ‘HTTP Referrers URLs’ setting within the Google Maps API Key.

Cheers
Keiran

[BUMPandHUSTLE (Mark)]

Is this what you mean?

[knk (Keiran)]

Hey @BUMPandHUSTLE,

sorry for the delay in replying.

I had a look through Google Developers Guide | Maps Embed, and found some info relating to the API’s.

The Maps Embed API overview  |  Google Developers

I created a test API and used it on your site in Firefox developer tools and the map rendered successfully.

Perhaps create a new API key (under the same project) and test again.

Let me know what the outcome is.

Cheers
Keiran

[BUMPandHUSTLE (Mark)]

Thanks for getting back to me.
I created a new Google Map Javascript Key - see below. All looks goof and added a restriction for the domain https://www.widgeontheatreboat.com and www.widgeontheatreboat.com. All looks good.

I pasted the new API key in integrations within Webflow and also within the CMS Google Map. I still get an error message - see below.

[knk (Keiran)]

Hey Mark,

Looking at the live site it appears the iFrame is now removed?

Also, would you be able to provide a ‘Read-Only’ link? (If not comfortable to do in forum can you DM me?)

Cheers
Keiran

[BUMPandHUSTLE (Mark)]

I PM’d you - thanks for looking

[BUMPandHUSTLE (Mark)]

Hi knk,

I have now got this working, all thanks to KNK.

To Webflow Staff - your tutorial for creating a Google Maps API seems convoluted and outdated.

Furthermore, it appears counter-intuitive (to me) to get this to work based on your wording used for integrations.

Unless I have this wrong - to embed a map you have to create a ‘Maps Embed API’ and not ‘Map Javascript API’. Unfortunately, the latter wording is used when you go to the Integrations tab of the site you are working on within WF (see below).

So to be clear, I had to create ‘Maps Embed API’ in the Google console and not ‘Google Maps JavaScript API Key’ as described within WF.

From WF integrations tab

From Google Console