Build a Map with Snazzy Map

Design help Custom code
1

Hi, there!

I can’t write a code, but I need a interactive map with custom markers :blush:. I’ve created a map with SnazzyMap, added an API key and got the HTML code.
I’ve tried different ways but the map doesn’t work and I can’t find where the problem is and how to solve it. Default Webflow map works, but something is wrong with SnzzyMaps code implementation.

Map appear for 0.5 seconds and then error message appears

SORRY, AN ERROR OCCURRED!
Google Maps was not loaded correctly on this page. Refer to the JavaScript console for detailed technical information.

Is there any advice where to look for a solution?
Thanks a lot!

Published site: https://edinburgh-2.webflow.io/#Place1
Read only Link: https://preview.webflow.com/preview/edinburgh-2?utm_medium=preview_link&utm_source=designer&utm_content=edinburgh-2&preview=83309cab1802cc9494556bf25cb97ebd&mode=preview

2

For me sounds like an API error, do you have your API to accept webflow.io/your-domain requests to your maps?

3

It was an API error! Thanks for pointing the direction! :slightly_smiling_face:

4

did you happen to solve this problem?

5

That was so long time ago… If I remember correctly, I didn’t specify Website restrictions correctly in the API key settings.

6

Thank you for the reply. still learning this stuff.

7

Hi there,

I’m having a similar problem with getting the API to work with Snazzy Maps in Webflow. I’ve followed the instructions here (Map | Webflow University) on how to create the API key, and it’s worked ok, but having applied the API key to the Snazzy Map the map flashes then gives an error message 'Oops! Something went wrong. This page didn’t load Google Maps correctly. ’

I added .kidz-and-crayonz.co.nz/ and .kidz-and-crayonz.webflow.io/ to the HTTP Referrers and have set the API Restrictions Restrict Key to Maps JavaScript API.

Seems I’ve done everything right but it doesn’t want to work. I’ve also tried a different project’s API key that is set up the same way, (though it has no restrictions at all), and that works. Can’t see what the issue is. Is there something I’ve missed?

Cheers
Grant

8

Hi!

You need to add in API Key restrictions link to snazzy map → https://snazzymaps.com/embed/……

9

Hi there Skumigs,

Your link goes to a ‘Page not found’ page. Can you provide a screen shot of what I should have seen please? (If you were showing me that I need the embed iframe snippet, yes, all good, that’s in place).

Cheers
Grant