Snazzy Maps Not working

[EHGD (Eamonn Hall)]

Hey All

I’m fairly new to Webflow and have no coding experience so I’m out of my depth with this issue. Any help with this would be really appreciated.

I’m trying to embed a customised Snazzy Maps map into my website but can’t get it to work.

I’ve created my map style in Snazzy Maps, signed up for a Google API key, added it to the map and generated the custom code. When I embed this in Webflow the map isn’t appearing and I’m getting this alert:

“Oops! Something went wrong. this page didn’t load Google Maps correctly. See the JavaScript console for technical details.”

I’ve followed this suggestion but couldn’t get it to work:

Using Custom Google Map with Color Styles from Snazzy Maps

Here’s my public: https://webflow.com/design/frostbyte?preview=20c21ccb1138fed056ef31e88fdf9600 What I’d like to do is add a coloured overlay over the map (it’s on the front page near the bottom, and again in the “Contact” page. I’ve tried putting a div block over top, or formatting the section, but the map is always “on top”?? Is this even possible, and if so, could someone help me out? Thanks!

I’ve updated API Key restrictions to allow HTTP referrers and added the read only and published link URLs as per this posts advice:

Google Maps API integration

Hi there, If you are still struggling with “This page didn’t load Google Maps correctly” error, then I can recommend you a solution which for sure will help you. The first thing you have to do is, check the problem which you has occurred on your website. You can do it by opening a special tool which will list your error - just use ctrl + shift + j shortcut. When you are going to do it, take a look at this guide, which gives many various solutions for very different errors.

When I check the console on the published link there is a Google Maps JavaScript API error: RefererNotAllowedMapError

Could it be the maps isn’t loading because the site isn’t being hosted? Just a thought…

Read Only Link:
https://preview.webflow.com/preview/yoyocapital?utm_medium=preview_link&utm_source=dashboard&utm_content=yoyocapital&preview=9a083b68bbec86450276a88f47471e44&mode=preview

Published Link:
https://yoyocapital.webflow.io/

[QA_Brandon (Brandon Mosco)]

Hi @EHGD,

This error has to do with not activation the JavaScript SDK within the Google Maps Console.

When this is added, it will fix this issue. Since there are so many Maps SDKs in the console, you just have to make sure this one is checked and activated.

Please let me know if you have any other questions,

~ Happy Designing ~
Brandon

[EHGD (Eamonn Hall)]

Hi @QA_Brandon

Thanks for you reply.

Ive enabled the Maps SDK for IOS and Android in the Google Maps Console. Is this what you mean? It doesn’t seem to have made a difference.

Cheers
Eamonn

[QA_Brandon (Brandon Mosco)]

There is specifically one for Javascript that needs to be enabled!

[EHGD (Eamonn Hall)]

Are you sure? I can’t find it…

[QA_Brandon (Brandon Mosco)]

[EHGD (Eamonn Hall)]

Apologies @QA_Brandon

You were right! I had already enabled it but hadn’t generated a new API key.

Thanks so much for your help. Appreciate it

[EHGD (Eamonn Hall)]

Hi Brandon,

I have a new problem. A second map is appearing below the footer on my published site.

https://yoyocapital.webflow.io/

Can you help me out with this?

Cheers
Eamonn

[anthonysalamin]

@EHGD, simply remove that iframe before the end of the body tag in your page level custom code.

[EHGD (Eamonn Hall)]

Thanks @anthonysalamin, that worked perfectly
Cheers

[WB6 (William Bouch)]

Hi, thanks for this, it worked for me.

Google recommends restricting the API to a URL. Will it be safe to leave this setting as ‘None’?

Many thanks,
Will

[webdev (Jeff Selser)]

@WB6

Google recommends restricting the API to a URL. Will it be safe to leave this setting as ‘None’?

If you don’t restrict the use of a Google Maps API key then anyone else can use your key and that you could end up paying for.

[bojanradovic47 (Bojan Radovic)]

Is there a fix for this?

I’ve followed the steps, have an enabled Maps API, restricted it to my website but still getting the error.

Will it only work with a custom domain? It’s a test site so still on a webflow.io domain.

[luci (Lucas)]

Maybe the Dynamic Map App is a better solution? It’s build as an alternative exclusively for Webflow CMS.

Build a Dynamic CMS-Map in Webflow – Beta Walkthrough [2023]