Google Maps Clustering - google-maps

Question

Hi I am making a map view for my classified ads site and I am having trouble adding a clustering function to the map. I was wondering if anybody could help me and offer some advice as to how I can edit my code to make the clustering work for all the ads on my site because as it is right now it displays all my ads accordingly but it just doesn't cluster them when I add cluster code for some reason, I'm a bit of a newb so I'm obviously inputting the code wrong. Any help would be greatly appreciated. Thanks in advance.
Here is my code:
$(document).ready(function() {
var markersInfo = $('.ia-card').map(function() {
var info = {
id: $(this).data('map-id'),
address: $(this).data('map-address'),
title: $(this).data('map-title'),
price: $(this).data('map-price'),
latitude: $(this).data('map-latitude'),
longitude: $(this).data('map-longitude'),
html: "<img src=" + $(this).data('map-image') + ">",
link: $(this).data("map-link"),
contentHtml: "<div class='image'>" + "<img src=" + $(this).data('map-image') + ">" + "</div>" + '<b>' + $(this).data('map-title') + '</b><br>' + $(this).data('map-price') + "<br><a href='" + $(this).data("map-link") + "'>More>></a>"
};
return info;
}).get();
initGoogleMap(markersInfo);
// GMAP ON SEARCH RESULTS PAGE
function initGoogleMap(markersInfo) {
var mapOptions = {
// zoom: 2,
// center: new google.maps.LatLng(53.334430, -7.736673) // center of Ireland
},
bounds = new google.maps.LatLngBounds(),
mapElement = document.getElementById('map-canvas'),
map = new google.maps.Map(mapElement, mapOptions);
var geocoder = new google.maps.Geocoder();
$.each(markersInfo, function(key, val) {
var marker = new google.maps.Marker({
map: map,
position: {lat: parseFloat(val.latitude), lng: parseFloat(val.longitude)},
title: val.title,
info: new google.maps.InfoWindow({
content: val.contentHtml
})
});
google.maps.event.addListener(marker, 'click', function() {
marker.info.open(map, marker);
});
loc = new google.maps.LatLng(val.latitude, val.longitude);
bounds.extend(loc);
});
map.fitBounds(bounds);
map.panToBounds(bounds);
var markerCluster = new MarkerClusterer(map, markersInfo, {
zoomOnClick: true,
gridSize: 40,
maxZoom: 15,
imagePath: 'images/m',
minimumClusterSize: 2
});
};
});

Answer 1

Well the when passing the marker list to the MarkerClusterer you need to pass it as an array of actual google markers.
So you need to store the markers (not their info, but the actual markers) in an array and pass that on.
You also should not set the map property of each marker as that adds it to the map directly, while you want the MarkerClusterer to handle that.
$(document).ready(function() {
var markersInfo = $('.ia-card').map(function() {
var info = {
id: $(this).data('map-id'),
address: $(this).data('map-address'),
title: $(this).data('map-title'),
price: $(this).data('map-price'),
latitude: $(this).data('map-latitude'),
longitude: $(this).data('map-longitude'),
html: "<img src=" + $(this).data('map-image') + ">",
link: $(this).data("map-link"),
contentHtml: "<div class='image'>" + "<img src=" + $(this).data('map-image') + ">" + "</div>" + '<b>' + $(this).data('map-title') + '</b><br>' + $(this).data('map-price') + "<br><a href='" + $(this).data("map-link") + "'>More>></a>"
};
return info;
}).get();
initGoogleMap(markersInfo);
// GMAP ON SEARCH RESULTS PAGE
function initGoogleMap(markersInfo) {
var mapOptions = {
// zoom: 2,
// center: new google.maps.LatLng(53.334430, -7.736673) // center of Ireland
},
bounds = new google.maps.LatLngBounds(),
mapElement = document.getElementById('map-canvas'),
map = new google.maps.Map(mapElement, mapOptions),
markerList = []; // create an array to hold the markers
var geocoder = new google.maps.Geocoder();
$.each(markersInfo, function(key, val) {
var marker = new google.maps.Marker({
/*map: map,*/ // do not set the map on each marker
position: {
lat: parseFloat(val.latitude),
lng: parseFloat(val.longitude)
},
title: val.title,
info: new google.maps.InfoWindow({
content: val.contentHtml
});
});
markerList.push(marker); // add the marker to the list
google.maps.event.addListener(marker, 'click', function() {
marker.info.open(map, marker);
});
loc = new google.maps.LatLng(val.latitude, val.longitude);
bounds.extend(loc);
});
map.fitBounds(bounds);
map.panToBounds(bounds);
var markerCluster = new MarkerClusterer(map, markerList, {
zoomOnClick: true,
gridSize: 40,
maxZoom: 15,
imagePath: 'images/m',
minimumClusterSize: 2
});
};
});