That’s amazing! It’s so useful!
Thanks so much for sharing!
1 Like
Great!
Is there any way of two items sharing the same location?
I will need to replicate this where you sometimes have several pins (projects) in the same place.
Thanks much!
Do you mean this functionality?
It is probably possible with some more complicated functions from google maps developers’ site. I don’t have that experience, sorry.
Yes, that’s what I meant.
Many thanks.
Thank you so much, this is fantastic. Could it be converted to work with Mapbox?
Thanks @sabanna for this tutorial! Any chance you can share a read-only link to the example you created to see how you setup the page layout?
Thank you @sabanna for sharing this tutorial, this is awesome!
One question: would you know how to assign some properties to the places (e.g. : type of place, neighborhood, etc) and use some dynamic filter to filter the places by property and to have the map automatically updated (markers also filtered)? Would it be possible to update the sample project with this kind of enhancement?
Many thanks!
Hi, @WebflowUser
You treat the list of properties the same as any other CMS collection. Apply type of property or neighborhood as a category and build the filtering based on those categories.
While it is not a problem to combine filtering and maps, for sure, I doubt you would be able to “refresh” map on each filtering event. At least not with this code example 
I used the function that is centering the map based on the address/location parameters when the user clicks on the item with those parameters. It would be much harder to calculate the center of the map each time user would filter out some items.
Hi @sabanna,
I’m following the tutorial step by step, but it doesn’t work. The map does not show markers. Can you help me find out what’s going on?
Hi, @sabanna!
Link published page:
Link to read the project:
https://preview.webflow.com/preview/encontreumdesafio?utm_medium=preview_link&utm_source=designer&utm_content=encontreumdesafio&preview=b90747e0bb5cbe200c28c016975df62e&pageId=5f3c2395ed4a310be2222d48&mode=preview
I tried to apply the map on the page “Destaque”
Hey, @Daniel-Eis!
That project has quite a few issues.
-
You included the default Webflow map component and custom code that call the map through the google maps API. It causes conflict. If you want to have this multi-marker map, you will need to delete the default one.
-
Inside the custom code that I provided, I used classes and IDs to point or connect the functions and the source. Unfortunately, I don’t see it on your page:
- you need to give an ID to the div where the map will be rendered
- you need to make sure the class on collection item and class in the code are the same, either change it in the code, or on the project.
Try to address these issues and let’s see if it will resolve the problem.
Hi @sabanna,
I pasted the code again, the API key and all class names are the same as the references. However, the map still does not appear on the website … is there any detail missing?
Please, use this link as a reference to see map space https://encontreumdesafio.webflow.io/destaques
-
latandlongvalues has the wrong format, remove the second dot
- you don’t have a description [part in your place element, so you will need to remove this line
1 Like
I’m having a lot of trouble with this. I’ve been working on the dynamic CMS pages and mine are “listings” of art spaces. Once I use the javascript, the map shows up (nothing in it) and then it disappears.
Hi there I love this but an having trouble getting it to work. Any help I would really appreciate.
Hi, @Zachary_Fetters!
Most likely you are having troubles because of the wrong format of the longitude and latitude
Those comas shouldn’t be there. Make sure you are copying a correct values