Streaming live at 10am (PST)

Snazzy Maps Not working

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:

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

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/

1 Like

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

Hi @WebDev_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

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

1 Like

Are you sure? I can’t find it…

1 Like

Apologies @WebDev_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

1 Like

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

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

Thanks @anthonysalamin, that worked perfectly
Cheers