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.

Hey there,

I am going throught this problem now, and on this discussion:
https://forum.webflow.com/t/can-i-use-multiple-map-locations-with-cms
with the help of @Brando and @zbrah in the last comment ([Feb '18]) I’he come up with this solution:

1 - create or import your own collection with, at least, a latitude and longitude field



2 - Create a section or a div an give it an ID map
3 - Inside that div put an embed element, a collection list and another embed element
Captura de ecrã 2020-04-10, às 21.07.23
4 - In the embed element, before the collection list, we declare a variable that will store all markers positions in your cms collection

5 - in each collection item, insert another embed element and save there locations:
Captura de ecrã 2020-04-12, às 10.57.34

6 - Finally, in embed element after the collection list, we generate the map and put all the markers inside locations array. This way the map will only be generated one time.
Here’s my code:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&key=YOUR_API_KEY"></script>
<script type="text/javascript">

function init_map(locations, center) {
	var mapStyles=[ YOUR STYLES ]
	var mapOptions = {
		    zoom: 16,
		    scrollwheel: false,
		    center: center,
			styles: mapStyles,
			disableDefaultUI: false          
	};
	var map = new google.maps.Map(document.getElementById("map"), mapOptions);
	var infowindow = new google.maps.InfoWindow();
             var marker, i;

             for (i = 0; i < locations.length; i++) {  
                 marker = new google.maps.Marker({
                     position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                     map: map
                 });

                google.maps.event.addListener(marker, 'click', (function(marker, i) {
                    return function() {
                        infowindow.setContent(locations[i][0]);
                        infowindow.open(map, marker);
                    }
                })(marker, i));
            }
    return map;
    }
var center = {lat:YOUR_LAT_CENTER,lng:lat:YOUR_LNG_CENTER};
init_map(locations, center);
</script>

And you are done!

1 Like

Hey @clara.frazao,

Really cool that your helping, but i’m having some difficulty following your tutorial, can you share a demo webflow test link so i can check it out?

Tks for the help
Rui

Hey @Rui_Almeida, unfortunately I can’t do that but i’ve just reedit so it would be more clear. Hope it helps.

This looks awesome, going to try it out later. Thanks for sharing! I currently have a number of fishing venues which I have had to manually input the lat/long for my desired markers, reusing the same script (with different lat/long) on each venue page. Your solution is much more elegant.

Would you be in a position to share a screenshot of the final outcome using your solution? Do you have any idea if your method supports multiple locations in a single map view? Below is a screenshot of what I currently achieve by doing it all manually - note the fishing icon and the parking icon:

Hey @Andy_Vaughanm just reedit my answer with a screenshot of the final outcome.
If you want to change icons image add one field in cms collection and one more index to your loc array


than on the last embed element, on the cicle just add one more index, “icon”, like this:

      for (i = 0; i < locations.length; i++) {  
             marker = new google.maps.Marker({
                 icon: locations[i][3],
                 position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                 map: map
             });
            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {
                    infowindow.setContent(locations[i][0]);
                    infowindow.open(map, marker);
                }
            })(marker, i));
        }

Hope it helps.

1 Like

@clara.frazao thank you very much for that - perfect! :webflow_heart:

@clara.frazao @brando @zbrah @psoldunov Thanks for your detailed solution. Still a newbie with Webflow. I tried your solution, which seemed less complicated, but it is not working and I am not sure what I am doing wrong. Here are print screens of what I have:

In addition, here’s a link to my project. The map is on a page called maps, a page under OF folder. Any help is greatly appreciated!

https://preview.webflow.com/preview/apostolic-faith?utm_medium=preview_link&utm_source=dashboard&utm_content=apostolic-faith&preview=01f85c0fbec2311a772c0b0f922292f1&mode=preview

@psoldunov Your solution is on map 3. It lists the names but not on a map.

@rmjjkj Hey there. Can you show me your published link of Map page ?

@clara.frazao Sure. Here are the links, trying different ways: https://apostolic-faith.webflow.io/of/map, ahttps://apostolic-faith.webflow.io/of/map-2, https://apostolic-faith.webflow.io/of/map-3, https://apostolic-faith.webflow.io/of/map-4. Thank you!