Streaming live at 10am (PST)

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

Hi, @Zachary_Fetters!

Most likely you are having troubles because of the wrong format of the longitude and latitude

Image 2020-10-12 at 5.13.13 PM

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 https://github.com/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 ?

1 Like

@sabanna

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)

Airbnb

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.

Hey, @blevyLinks!

1 Like


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.

@sabanna

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. :slight_smile:

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.

Hi all, I can’t seem to get the map to populate at all?

https://preview.webflow.com/preview/an-residential?utm_medium=preview_link&utm_source=designer&utm_content=an-residential&preview=75b31cd044c7f8268407b93ffbadefb3&mode=preview

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