[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.

https://webillium-maps.webflow.io/

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

hi @sabanna, you nailed it with this tutorial!
Just a noob question, how do you hide info_content from the published site?

@Max_Hoang I set the display properties for info_content to ‘none’. It should look like this (without the silly arrow!)

This will hide it in the editor as well as on the published site. If you wish for it to always be visible in the editor but not the published site, then you’ll need to do this by creating an ‘interaction’ (set initial state to none). If relevant, i can give more instructions here

1 Like

Hi Anna, how are you generating the map in this tutorial? Is it using the “Map” component that webflow provides or is it embedding a map? Additionally, how is that component getting the long and lat from your collection list?

Hi, @arj10 !

I use a standard Google Maps API call for that, NOT a default Webflow component. The code snippet that I provided will “read” the long and lat data from the text fields on the page. Those text fields are connected to CMS fileds.

Hi Sabanna, I can get the map to show up, but the markers do not. I looked at your read only file and I feel like I am very close, but cannot figure out what I am missing?

https://preview.webflow.com/preview/multiple-map-locations?utm_medium=preview_link&utm_source=designer&utm_content=multiple-map-locations&preview=b6a52f8c07fd562d3dd98303f71d3b9b&workflow=preview

The map is not showing up at all for me. I don’t want to renew this thread at all but I can’t figure it out haha. I’ve tried troubleshooting multiple different things. Here is a read only file if you could help me out please! Greatly appreciated. I need this for one of my clients and this is the closest thing I’ve found to helping out. I feel like I’m so close!
Thanks so much,
Austin

https://preview.webflow.com/preview/squarerank?utm_medium=preview_link&utm_source=designer&utm_content=squarerank&preview=84737bb7c7a6507f673c432bbcdcb264&workflow=preview

For me its also not working. The map gets an error when its loading. I get the following errors:
Schermafbeelding 2021-10-27 om 13.34.59

Live link: Case studies - Visional Design

https://preview.webflow.com/preview/visionaldesign?utm_medium=preview_link&utm_source=designer&utm_content=visionaldesign&preview=5cc2a0b3a539e356e41d3ccaa614aee6&pageId=61791c965c0563ce2fc1db91&workflow=preview

You gave your map div the name ‘map’ but you need to give that div the ID ‘map’. That might do the job.

1 Like

Hi, @Noah_Ploeg!
Errors on your screenshot have nothing to do with Google maps or the website. It shows some problems with one of your browser extensions (source map is not a Google map).

I looked at your live link and it seems that Google Maps API is not recognizing the API key. Please, make sure you are using a correct API key.

Hi @sabanna, thank you for your reply. I tried using these, but those are not the right ones? Then how do I get the right one? Because I got these by following the steps you provided

Hi,

Thanks for this tutorial, easy and clear!

Is there a way to use different marker styles depending on a CMS field value?

Thanks !

I have changed the ID to ‘map’ but it is still not working at all. Is there anything else that is wrong with it?

I think Javascript API should work

Hi Anna, first of all, thank you very much for this excellent tutorial and your support with this – I have relied on this heavily while creating different websites in the last year that helped thousands of people from my former home town to find spots to get quick-tested or vaccinated, and your tutorial was just pure gold for that. So thanks a lot!

I am now struggling, since I am trying to adapt the map in a way that allows me to display two different types of locations on the map, i.e. with different icons. Can you (or someone else, for that matter) help me out?

Read-only-link for the rough prototype/skeleton for the website is here: https://preview.webflow.com/preview/hagen-impft?utm_medium=preview_link&utm_source=designer&utm_content=hagen-impft&preview=c46bc7769010d877dc4572a7b0eb34cc&pageId=6196a04d23dedf277e71c7ca&workflow=preview

Any help is much appreciated! Thanks!

@sabanna

I’ve been trying to set this up through the search function (calling in a cms collection) with terrible results. After placing my maps code, adding lat and long into each cms item, and naming each div the map refuses to initialize and the items are not being placed across the map.

Does this work at all using Webflow’s search feature? I need to show the results of the search (not all of the cms items) and have them initialize on the map in their correct positions…

Here is my read-only: https://preview.webflow.com/preview/budojo?utm_medium=preview_link&utm_source=designer&utm_content=budojo&preview=ef72accff1c27bcfa19fba26e7d1d91f&pageId=61e73fd5b235e744cdc41ec3&workflow=preview

Thank you for taking the time!

@sabanna This is so good. Thanks so much for taking the time.

Adapted this approach for a map component… added zoom/center based on boundary coordinates, which is v helpful on mobile.