Cluster google map pins when using an object of markers instead of an array - google-maps-api-3

Question

I'm managing this website: http://www.gprprojecten.nl
Basically what I'm doing with is is getting a stream of data from a webservice and chaching this. Afterwards I do all kinds of things to this data, including displaying all the projects on a google map.
Problem is, that as the projectnumber grows, the (custom)pins start to overlap (not visible, not clickable).
So I want to cluster my pins.
I started working on a google maps clusterer library using A32.blog as my starting point.
But now a problem arises. As I have chosen a client side filter system called filter.js, I depend on that way of using google maps, which is with objects rather then an array of markers as used in the clusterer library.
Here is the code I use to generate my map in combination with filter.js:
var googleMap = {
center_lat_lng: [52.14, 5.3],
map: null,
markers: {},
addMarker: function (project) {
var that = this;
var image = new google.maps.MarkerImage('#Url.Content("~/Content/img/marker.png")',
new google.maps.Size(63, 27),
new google.maps.Point(0, 0),
new google.maps.Point(23, 27));
var marker = new google.maps.Marker({
position: new google.maps.LatLng(project.loclat, project.loclong),
map: this.map,
title: project.gebouwnaam,
icon: image
});
marker.info_window_content = "<div class=\"gmapcontentwindow\"><h4>" + project.gebouwnaam + "</h4><img src=\"" + project.thumburl + "\" alt=\"" + project.gebouwnaam + "\" /><div class=\"gebouwdata\"><span class=\"date\">" + project.publicatiedatum + "</span><h5>" + project.plaats + "</h5><span>" + project.gebruiksfunctie + " | " + project.gebouwcategorie + "</span><span>" + project.licentiehouder + "</span><span class=\"stars " + project.rating + "\"></span>"
if (project.akkoorddoorexpert == "True") {
marker.info_window_content += "<span class=\"expert\"></span>"
}
var forwardUrl = '#Url.Content("~/Home/Details/")';
marker.info_window_content += "<span class=\"forward\">Lees meer >></b></span></div></div>"
this.markers[project.id] = marker
google.maps.event.addListener(marker, 'click', function () {
that.infowindow.setContent(marker.info_window_content)
that.infowindow.open(that.map, marker);
});
},
updateMarkers: function (filtering_result) {
var google_map = this;
$.each(google_map.markers, function () { this.setMap(null); })
$.each(filtering_result, function () {
google_map.markers[this.id].setMap(google_map.map);
});
},
init: function () {
var options = {
center: new google.maps.LatLng(this.center_lat_lng[0], this.center_lat_lng[1]),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
this.map = new google.maps.Map(document.getElementById("gmap"), options)
this.infowindow = new google.maps.InfoWindow({
});
//var markersarray = $(this.markers).toArray();
//console.log(markersarray);
//doet het nog niet???
//http://a32.me/2012/05/handling-huge-amount-of-markers-on-google-maps-with-clusters/
//var markerCluster = new MarkerClusterer(this.map, markersarray, {
// gridSize: 10,
// minimumClusterSize: 2
//});
}
};
project is an object that is passed to the init function from filter.js

Answer 1

You need to add the Marker Clusterer to the global scope or keep a reference to it in your object.