Streaming live at 10am (PST)

[TUTORIAL] Adding several markers on one Google Map from Dynamic Collection

Important: Why I do not recommend using Geocode that can calculate each place’s location based on the address.

While Google Maps API has a function that allows calculating a location based on the address, we will be running the code and generate a map when the page loads. That means you would be calling geocode every time somebody views your page and not caching your results anywhere in the DB ! Plus, as many times as many CMS items you have.

This way, you will hit the limit allowed by Google pretty fast.
The reason that limit exists is to prevent abuse from Google’s resources (whether it is willingly or unwillingly). So after passing the limit, you would end up paying for each page view ~10 US cents

Using Google maps own DEFAULT service for detecting Land and Lat seems a much better solution to me.

Saying that, I only provided one of possible solutions, the one that on my personal opinion was less expensive. But it is NOT THE ONLY SOLUTION and nobody stops you from using a method with re-calculating Lat and Long from Address using Google geolocation services.

@sabanna I understand your whole reasoning behind the Lat and Long, in fact I am building my map off of your method. So I decided to use lat and long because of your logic. But I saw in your screenshot of CMS that you had Plus Codes in your formula so it was a question on if you thought it was necessary for me to do the same for the api no to pull so much.

I’ve spend several hours in the developers forum in google.

I watched the video in this documentation.

Another question to add in here is so you created you map I understand your script placement instructions. But did you use some code like this to map your map appear?

    <!D0CTYPE html>
key html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map_canvas { height: 100% }

Or this

DL150 Sailboat Locations
<!-- Async script executes immediately and must be after any DOM elements used in callback. -->
<script
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=&v=weekly"
  async
></script>

Did you use the embed-div after creating the div-block to embed the map and was it a sub class within in the map div?

Was the embed-block or div-block with the map inside the collection-list?

Blockquote :three: Add the div block to place the map on the page

Once you will decide where is your map will be located, add a div-block and give it an ID map

:four: Design the info-block for the place

Somewhere on the same page with the map, add a Collection List and bing it to your Collection with Places.

Blockquote

Thankyou for any future time in your response.
Much respect Kyle!

Hey guys!

I’ve built this little SaaS product which is free to use for webflow maps, has most of what you need. Works with CMS to allow you to create these custom map markers and locations in a no-code sort of way.

Hope you find it helpful :slight_smile:

2 Likes

Hi @sabanna ,

Thank you for this tutorial. I’m trying to implement this on a site I’m working on but can’t seem to make it work. You can review it here:
https://preview.webflow.com/preview/covid19hospitaltracker?utm_medium=preview_link&utm_source=designer&utm_content=covid19hospitaltracker&preview=75a7e70512ac9a07898808fd5b4f0f56&pageId=606e798a8ddb394e818f81c7&mode=preview

Hope you could help