Creating a map that uses a collection to display multiple locations

Design help General
1

Has this item been resolved? Can i use Multiple Map Locations with CMS?
I would like to find a solution that does what Rui_Almeida is explaining here.

My company has 50 locations across North America that we offer appointments.

I would like to have one map where people can see all of these locations, and that map would use a CMS Collection to hold the information for the locations and update the map.

For example the collection would be named ‘cities’ and 2 of the attributes would be latitude and longitude. The map would put a pin where the coordinates of the city in the collection indicated.

EG One map that shows New York, Los Angeles, Chicago because the collection holds 3 items (New York, Los Angeles, Chicago) and their corresponding latitudes and longitudes.

So the ‘Collection Page’ test.com/try-it would have a map that showed all the locations on one map.
The individual item pages within the collection e.g. test.com/try-it/chicago would not have a map element on them.

Essentially I am trying to create a UX that is similar to this website Oculus Demo Locations | Oculus.

Please let me know if this is possible with webflow or not. Much appreciated.

Noah

4 Likes
2

Hey @noahkr,

I’ve found a way to do it.

Ok so :slight_smile:

First here is my public share link
https://preview.webflow.com/preview/louiss-awesome-project-e0bb72?preview=37cd5a95e4bbca4c3378ee2357830878
and the preview of my test
http://louiss-awesome-project-e0bb72.webflow.io/

The idea :

You need to pre-create as much fields as possible if you don’t want to change your code everytime.
My example here is with 6 city, if you have like 15 city for your project you should double and pre create 30.
Create a collection Map with 3 fields for each future city.
Be careful, don’t forget to tick any format and allow negative numbers

23
23679×1169 51.6 KB

Now create a new section, add a dynamic list with collection amp and put an embed block inside

08
081488×266 16.5 KB

Paste this code in the embed

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Google Maps Multiple Markers</title> 
  <script src="http://maps.google.com/maps/api/js?sensor=false" 
          type="text/javascript"></script>
</head> 
<body>
  <div id="map" style="width: 500px; height: 400px;"></div>

  <script type="text/javascript">
    var locations = [
      ['Name', Lat1, Long, 4],
      ['Name2', Lat2, Long2, 5],
      ['Name3', Lat3, Long3, 3],
      ['NName4', Lat4, Long4, 2],
      ['Name5', Lat5, Long5, 1],
      ['Name6', Lat6, Long6, 6]
     
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 1,
      center: new google.maps.LatLng(-33.92, 151.25),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    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));
    }
   

  </script>
</body>
</html>

And remplace, Namex, Latx and Longx by dynamic data

1
11324×1024 981 KB

2 Likes
3

Site note :

If you want to add an extra line do this

1
11324×1024 165 KB

4 Likes
4

Hi!

you can do it dynamically using an array from your dynamic collection list:

var locations = Array();

$(“.locations-list .location-item”).each(function(i, v){
locations[i] = Array();
$(this).children(‘div’).each(function(ii, vv){
locations[i][ii] = $(this).text();
});
})

where .locations-list and .location-item are CLASSES of your dynamic collections
(if you got more then one collections on the same page else you can simply use: w-dyn-items and w-dyn-item )

just connect a text block to your collections for name , lat , long, zindex of pins
and hide all view: none… if you don’t need to show them.

2 Likes
6

Does anyone know if it’s possible to style the Google Maps displayed (Snazzy Maps), with this technique?

7

Hey @aaleks, have a look at this

1 Like
8

Hey @zbrah thanks for the link, I’m familiar with Snazzy Maps.
I’m not sure if it’s possible to style the map the way it’s included in the page, since the Snazzy Documentation says:

The first thing you can check is that you are using the Google Maps JavaScript API not their Embed API. Our styles will not work with Google’s Embed API

Is your map using the embed- or JavaScript API?
Thanks again!

9

Hey @aaleks,

I’ve just found a very detailed process written by @cyberdave
Should help you !

10

Hey @zbrah I figured it out, took some Googling and checking different posts, but it’s working! Thanks a lot :smiley:

1 Like
11

Hey there @zbrah, thanks again for your help on this.
I though I had everything figured out, but I’m still struggling with 1 last part and I could use an extra set of brains :slight_smile:

Here’s the thing:
If you check out the Toronto page in the read-only link and scroll to the bottom, you see the google maps embeded code with all the correct pins.
However, now if you go to another city you will still see the Toronto pins, and I can’t really figure out what way to setup the CMS. I thought I could solve this with some reference fields, but I hit the 5 limit super quick, so I’m trying to find another way to solve this.

Any thoughts on this?

Thanks again!

12

Hey @aaleks,

Sorry but what read only link do your refer to ? :smiley:
Can’t find it in the post :stuck_out_tongue:

13

Sorry about that, haha!
Here you go: https://preview.webflow.com/preview/munchmaps?preview=24044f1726ea02db81091a99e73aad19

14

@aaleks,

No problem :slight_smile:
The post above didn’t help you ?
You can create cms fields with lattitude and longitude and map everything with custom code.

23
23679×1169 51.6 KB

Have a deeper look at this

15

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.