Feel free to use it!
https://webflow.com/website/Google-Maps-with-Multiple-locations-and-CMS?s=map-cms
Thanks,
Renan
This, Sir, is amazing. Youâre a rockstar !!! 
Do you know though if itâs possible to open the markers when clicking on the lists elements under the map ? Currently it just reloads the maps, which is probably not what you intended to do with it.
Also ave you tried if this solution is compatible with the marker-clustering in Maps ?
2 Likes
Hello @Pasint, thank you. Actually I did this long time ago, It was supposed to work like you said (when click on the car, scroll up to the map and open the modal). But Iâm not sure why isnât working right now. Maybe some JS will do the jobâŠ
About marker-clustering - no I didnât. Sorry for that.
Renan
@Renan_M_falo, Iâve sent you a PM. Lemme know what you think.
This is awesome! Could you make a video explaining the steps? When I open the Webflow project, there is no map embed or modal⊠so Iâm not sure how you did this.
1 Like
Wow!!! this is really great!!! Iâm having a little hard time to implement it since Iâm no coder, can you explain it a little bit how this works?
1 Like
Circling back to this in 2020. The paid solutions for this functionality are like $30/mo, which is ridiculous. If you shoot a quick walkthrough demonstrating how to implement this, it would be huge!
If not, no worries!
Cyan
Hi @Cyan, I managed to get a solution for this to work here.
I donât remember if the setup is similar to Renanâs as itâs been a while, but it works for me. If thatâs the way you want it to work, I can share the info.
Let me knowâŠ
Hey @Pasint, this is great, I would be very interested to see how you built it!
What I am trying to create is this: https://www.travishyde.com/ (Scroll to the bottom to see the map)
Using your method, would it be possible to include all the same type of information you see when you click on one of those map pins? (Address, URL, phone number, etc.)
1 Like
Iâm not sure if itâs the est way to share all this, but Iâll try hereâŠ
1. Page setup
Make sure to name your elements properly.
2. CMS setup
I use 2 Collections here, one for list of members and one for member categories. Categories are then pulled into members info with a reference element. For me the map pin images are saved in the Categories.
To point members on the map, youâll need latitude and longitude elements.
3. Calling CMS data on page
Youâll need a Collection on the page calling the data from the CMS. The map will need this âon pageâ data to be populated. Once created, you can hidde this Collection using âdisplay : hiddenâ. Itâs what I did.
4. Script calling CMS data
Inside your Collection, youâll have the following script calling your data
Hereâs the actual script you can copy:
<div class="bg-pic-membre" style="background: url('CMS ELEMENT') center/cover no-repeat"></div>
<script>
membres.push({
'name' : 'CMS ELEMENT',
'slug' : 'CMS ELEMENT'',
'url' : 'CMS ELEMENT'',
'lat' : 'CMS ELEMENT'',
'lng' : 'CMS ELEMENT'',
'pin' : 'CMS ELEMENT'',
'photo' : 'CMS ELEMENT',
'category' : 'CMS ELEMENT'',
});
</script>
5. Script for page
Finally, youâll need to add the following scripts to the header and footer sections of your page. Youâll find the full scripts below so you can copy paste.
Inside head tag
<script>
// Array to store all members on page. Do not remove!
var membres = [];
</script>
<style>
#map_wrapper {
height: 720px;
}
#map_canvas {
display: block;
width: 90%;
height: 100%;
margin-left: auto;
margin-right: auto;
}
.bg-pic-membre {
max-width:100%;
min-height:300px;
background-size:cover;
}
#map_canvas .bg-pic-membre {
min-height: 0;
height: 80px;
margin-bottom: 5px;
}
@media screen and (min-width: 1200px) {
.w-container {
max-width: 1400px;
}
}
@media screen and (max-width: 1280px) and (min-width:1025px) {
.dynamic-item-membre {
width: 31.8%!important;
}
.w-container {
max-width: 1240px;
}
h1 {
font-size: 31px!important;
}
}
@media screen and (max-width:1024px) and (min-height:768px) {
.dynamic-item-membre {
width: 47.5%!important;
}
.container-header-page {
padding:0px!important;
}
}
</style>
Before body tag
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize&key=YOUR-MAP-API-KEY" async defer></script>
<script>
// Variables for Google maps
var map, mapElem, markerImg, infoWindow, marker;
var markers = [], infoWindows = [];
var mapOptions = {
mapTypeId: 'roadmap',
//zoom: 13,
//scrollwheel: false,
};
function initialize() {
markerImg = {
//url: 'https:// YOUR-PIN-IMAGE.png',
size: new google.maps.Size(50, 50),
anchor: new google.maps.Point(23, 54),
}
// Display a map on the page
mapElem = document.getElementById('map_canvas');
map = new google.maps.Map(mapElem, mapOptions);
map.setTilt(45);
// Loop through our array of members
for(i = 0; i < membres.length; i++) {
var membre = membres[i];
// Generate an infowindow content for the marker
var infoWindow = new google.maps.InfoWindow();
infoWindow.setContent(
'<a href="https://cdp-maquette-v2.webflow.io/membres/'+membre.url+'"><div class="bg-pic-membre" style="background:url('+membre.photo+') center/cover no-repeat"></div></a>' +
'<a href="https://cdp-maquette-v2.webflow.io/membres/'+membre.url+'"><h3 class="c-membreblock_title">'+membre.name+'</h3> <p class="c-membreblock_title subtitle">'+membre.category+'</p></a>'
);
infoWindows.push(infoWindow);
// Place a marker on the map
createMarker(membre.lat, membre.lng, i);
}
// Center the map fitting all markers on the screen
fitToMarkers();
}
function createMarker(x, y, i) {
marker = new google.maps.Marker({
map: map,
icon: membres[i].pin,
position: new google.maps.LatLng(x,y),
title: membres[i].name
});
marker._index = i;
markers.push(marker);
// Click event on marker
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
// Close last opened infowindow if any
if(infoWindow) infoWindow.close();
// Open clicked infowindow
infoWindow = infoWindows[i];
infoWindow.open(map, marker);
}
})(marker, i));
}
function mapResize() {
google.maps.event.trigger(map, "resize");
fitToMarkers();
}
function fitToMarkers() {
map.setZoom(15);
var bounds = new google.maps.LatLngBounds();
for(var i = 0; i < markers.length; i++) {
bounds.extend(markers[i].getPosition());
}
map.fitBounds(bounds);
map.setZoom(14); // zoom out when done so markers on the top can be seen
}
// When Webflow has loaded,
Webflow.push(function() {
// Resize event
$(window).resize(function() {
// Do nothing if mobile
if($(window).width() < 768) return;
// Resize map if function is defined
if(typeof mapResize === 'function') mapResize();
});
});
</script>
2 Likes
Just to confirm, this is indeed using @Renan_M_falo solution. I take no credit here, itâs all thanks to his solution.
And to answer your last question @Cyan, I think itâs possible to the information you want when clicking on the map pin.
Youâll need to configure the âinfowindowâ element properly in the code 'Before Body Tag, and make sure you have all the info you need pulled from the CMS in the script thatâs inside the Collection.
1 Like
Thank you for taking the time to write this out! I will try implementing and let you know how it goes!
1 Like
Super nice idea, but that one doesnât work for us unfortunately⊠A possible solution might be this dynamic map with location pins on it (https://ncf-map-demo.webflow.io/)). Every pin is a Webflow CMS item. Every aspect except for how the actual map looks can be modified native within the Webflow designer. We designed it as a cloneable component with a little video tutorial to implement it â should take you around 10 minutes to get started.
For us having this component definitely was a game changer, because we often get the customer request to display their different locations on a map and we found this was the best possible way to do it within Webflow.
