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
Hi Anna,
Thanks so much for getting back to me. I tried to take those out but am still having trouble with the points displaying on the map?
Hi Anna,
is it possible to hire you to help implement this into a website I am building?
Hi,
I created something very similar for a client that wanted a custom map displaying many locations.
The differences with my approach is :
- I don’t store the lat/lon in my CMS. I only store the google map link (easier to manage for my client) and then use a regex to get the lat lon. My regex : ‘@(.),(.),’
- I added some condition on the marker. My marker is green or red depending on a field in my CMS.
- I auto-center and auto-zoom my map depending on the average lat lon
- I created a class to change the style of the title of my marker
- I created specific function for each querySelector so I can change their logic and handle error. For instance, I don’t show a marker if my item doesn’t have a specific field.
You can find my full script here GitHub - YasinDenktas/customMap
At the beginning of my script, I created many variable, I use them in all my getElementsByClassName and getElementById.
I tried to comment my code with JSDOC but it’s my first time doing so, hope you understand
What do you think I could do to improve my code ?
5 Likes
Thanks for sharing this process, its really helpful. I am trying to create something like what AirBNB has, where you can see a map on one side and then properties associated with that map on the left side. (Similar to link below)
Do you think this is possible with Webflow?
Thanks,
Rufus
I dont know if this thread is still active but I am trying to do the same thing on the home page here: https://preview.webflow.com/preview/beltservice-corporation?utm_medium=preview_link&utm_source=designer&utm_content=beltservice-corporation&preview=3e2ef76b3a5e3c72aa041ddd6e1431e6&mode=preview
but I can’t get the script to work. I believe that I have updated the script with the new classes correctly but the info is not being passed through correctly.
Sorry, I had to remove the API script. It apparently is causing errors with the editor. I added it back in and now have this error.
Can this map be generated with the standard API field in the integration tab of the project settings?
An error is about some Latitude or Longitude value is not being valid (not a number). I can’t say any more details just by picture, sorry
I don’t think so.
Is it possible to automate this process for User Profiles in a CMS Collection Form? I feel like it would be an impossible task to do this for every single user that joins. Especially in an automated system.
Is it possible to use a Third-Party? Take the Address from Webflow CMS Live Item and update the Lat / Long using Zapier?
What are your thoughts?
Thanks,
Rufus
Thank you @sabanna for this tutorial!
Would you be so kind and tell us how to build this map without a dynamic collection list?
I only need three locations. Therefore a dynamic list is not necessary. 
Thanks @sabanna, this got me started on building a map for a client and I ended up using your code externally from Webflow so I could control the info windows within the html structure instead of with js or json.
I’ve been trying to implement marker clustering but have not had any luck and I was curious if you had gotten that functionality to work with this method and if it has anything to do with pulling data from the html.
I actually got this to work with the data being pulled from the html, so that had nothing to do with it. Had to do with how I was defining the options for the marker clusters.
Hey - just two things:
1 - Thank you so so much @sabanna for this tutorial. Thanks to you I have a beautiful map on my website.
2 - For those who didn’t manage to make it work (I’ve been there for the last weeks): you have to give a width and hight to the div block where your map will be (the one with the id map). At least this is why my map wasn’t appearing at all.
Thanks again @sabanna
Cheers,
Mia
1 Like
Hi, @Nilson !
I would want keep the information about your locations on the page in a similar way you would do it with the dynamic list. Then adjust classnames in the code accordingly.
1 Like
Hi @sabanna ,
I just had to put more markers on the map, I made a collection called “sedi” with only one location for now. Unfortunately it doesn’t work … you can see the map without markers. Can you tell me why?
thi is the only read link
https://preview.webflow.com/preview/multimmobiliare?utm_medium=preview_link&utm_source=designer&utm_content=multimmobiliare&preview=e3da064a9993e9b0ab4d1e6dfdf2d8e6&pageId=60127dddb735ac4a4f228b32&mode=preview
@Denise_David It looks like you did not put your Dynamic items on the page 
The script that I provided can’t “see” the backend database, it reads the information from the page, so you need to put that information on the page and point to it in the code. I see you changed the classname in the code, but it doesn’t exist on the page, so there is nothing to read and nothing to put on the map.
Ok, I added the dynamic element and gave it the name of the collection, but it still doesn’t go … why?
At this point your Collection List on the page is empty, it has no content inside of it
If you confused how the Webflow CMS and Collection List works, the Webflow University has articles and videos explaining it Collection list | Webflow University