Streaming live at 10am (PST)

Google map - Multiple Markers and InfoWindows/Popups & CMS items

Hi there,

Before I set out to build my website in Webflow I need to figure out if this is possible:

Populate one Google maps with multiple CMS items.

Like Mark Willis says Webflow does on the map here: https://webflow.com/events

I’ve read posts on the forum about how it’s possible to add a unique map from each CMS item. And having several text fields of long/lang in one CMS item. But I haven’t found a solution to having each CMS item add a new pin.

How do we replicate what Webflow did for that map?

Thank you!
, Emil

Similar posts:
https://forum.webflow.com/t/can-i-use-multiple-map-locations-with-cms/26586/29

https://www.freakyjolly.com/embed-google-maps-with-multiple-markers-and-infowindows-info-popups-open-on-click-or-mouse-hover/

Try to solve this first under codepen.

Array

The pins bind by array (I never try to convert CMS data to array) - but looks like something That can be solved (Maybe by webflow- API).

https://developers.webflow.com/?javascript#get-all-items-for-a-collection

Array Example:

var beaches = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.259302, 1]
];

https://developers.google.com/maps/documentation/javascript/markers

popup window:
https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple

View source her - to get more ideas:
view-source:https://webflow.com/events

± The idea you want (How to bind this to webflow CMS its another scope).

https://codepen.io/ezra_siton/pen/QRrXyL?editors=0110

image

Each place with this data:

 {
    placeName: "China(Beijing) Meetup",
    address: "Beijing Station W St, Dongcheng Qu, Beijing Shi, China, 100021",
    date: "May 25, 2019",
    hour: "4:00 pm",
    LatLng: [
      {
        lat: 39.908996,
        lng: 116.424165
      }
    ]
  },

Hide all controls ==> Under options:

disableDefaultUI: true, // a way to quickly hide all controls

Write to me in private if you want.

Thanks for putting work into this. With the final link of pulling all CMS items in, this is definitely useful and the right behaviour.

Mark Willis has promised to get a response from the Webflow designer who made the official map, perhaps that can shed light on how it is hooked up with the CMS

Update: This cloneable appeared, tada! https://webflow.com/website/Google-Maps-with-Multiple-locations-and-CMS

Weblink isn’t working anymore. Is there a cloneable project for this solution?

I’ve seen solutions for a fixed amount of locations but would it be possible to auto create markers anytime a new CMS items is created via an event listener connected to a “create marker” function?

The example above use google maps and cms.

Take a look.