Google Maps with Snazzy Maps theme hooked up to a dynamic embed and dynamic fields

Community resources Webflow Tips
24

Solved, I just tried to add the Google Maps API Key in the Webflow Project’s settings (integrations), all good!

25

Is there a way to have a “Get Directions” in the pop up of the marker?

SOLVED:
I added a new variable connected with the CMS see the attached image:

04%20PM

Replaced the content: with the below code and centered everything.

content: '<b>' + address + '</b> </br>' + '<a target="_blank" style="display:block; text-align:center; color:#194489;" href="' + getdirection +  '">Get Directions</a>'

I also removed the onclick event of marker to automatically display the block upon page load.

Change this

google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});`

to this

infowindow.open(map, marker);
26

@StevenP any idea why the map marker doesn’t appear on mobile?

27

Hello,

I had the map set up and working correctly until today, without touching anything!

The error from browser: Geocode was not successful for the following reason: REQUEST_DENIED

Have somebody had this same issue?

28

@StevenP
Thanks for your instructions.
I quickly glanced through.

Why do you use a Webflow Google Map and hide it?
Wouldn’t it be easier just to add an empty Div-Block for the map. Give it an id and a height.
Then implement a Webflow Embed Element and insert all the Google Maps custom styling (JSON-Object and so on) there.

Why do you create a collection to enter the address?
Why not just enter it the Webflow Embed Element?

I’m just curious :slight_smile:

Edit:
I just tested it, it works :slight_smile:
Just add a Div-Block with an ID to put the Google Map into.
Add an Webflow Embed Element and put in there all the Google Maps JS-Stuff (JSON-Object for custom styling and a Link to the API with the Key).
That’s it :slight_smile:

Please excuse me if I missed some of your reasons doing it your way :slight_smile: