Clustering for Google Maps v3 with Fluster2
Everyone knows the pain of displaying a lot of markers in a Google Map. For this problem there is MarkerClusterer which merges multiple markers to one cluster marker if there are a lot of markers at one place – as long as you use Google Maps v2. We used MarkerClusterer in our applications too but wanted to migrate to Google Maps v3. So we had to write our own clusterer logic or adapt MarkerClusterer to work for v3. The result is Fluster2, a new clusterer built from scratch but based on the same logic as MarkerClusterer.
The result
This is a screenshot of a map displaying 200 markers in Africa/Europe. As you can see, Fluster2 combines them to a much lower number of markers and shows the marker count, just as MarkerClusterer does.
We are using the same images as MarkerClusterer by default. You can try the live demo of this example here.
Download
You can download Fluster2 here.
License
Fluster2 is released under the LGPL license, so you’re free to use it in any application.
Tags: Clustering, Fluster, Google Maps
Hello,
Very nice !!
I wanted to develop a version of ClusterMarkerer adapted to API V3 and I am not able to function properly (I am not a javascript expert !!). Fortunately you did it! Thank you very much, I’ll save time.
Philippe (France)
thats a very nice script! thank you for your effort…
Thanks,very good
Hi, thanks for the great tool.
I have a question. How can I add infowindow when I click on a single marker?
Thank you.
I will use this new MarkerClusterer at http://www.standbeelden.be
Hi – I’ve added a function to clear the markers. I’m not a javascript expert, so I’m sure this can be cleaned up…
Add this to Fluster2.js.
function clearAll()
{
//me.debug(‘Clearing markers…, zoomlevel = ‘+me.currentZoomLevel);
for(var i = 0; i<15; i++)
{
for (var j=0; clusters[i] && j<clusters[i].length; j++)
{
//me.debug(‘Clearing markers…, i=’+i+’, j=’+j);
if (clusters[i][j].marker)
clusters[i][j].marker.setMap(null);
clusters[i][j].hide();
clusters[i][j] = null;
}
clusters[i]= null;
}
for (i = 0; i < me.markers.length; i++) {
me.markers[i].setMap(null);
}
me.markers = new Array();
clusters = new Object();
}
/**
* Remove all markers
*/
this.clearMarkers = function()
{
clearAll();
};
Found Bug In IE Complains x is null ??
@Donno: How to reproduce this bug?
Hi Matthias, this is a great plugin but I had two quick questions.
First, I’d like to have it so that when you click on a cluster that has 5 markers or less in it, an infoWindow pops open with a list of the markers (formatted however I want), but if the cluster has more than 5, I’d like a click to zoom in like the normal behavior. I’m sure that to do this I just need to modify DomListener in the draw() method, but I can’t figure out how to have infoWindow call back to the map so it knows where to open.
Second, I’ve noticed that on mobile browsers (specifically iPhone), clusters and markers start to go missing. For example, when I’m looking at the map in Firefox, the console output tells me that I have 62 clusters initialized for the zoom level I’m at, whereas on the iPhone it doesn’t initialize any clusters at all. Any ideas on how to fix this?
It’s really nice Fluster2. I’ve used it here: http://ktulu.com.ar/locales with the clearMarkers function Kevin posted.
Nice script, I really like the principles, a couple of items that I would love to see :
Disable Cluster at zoom level x
Change cluster capture area
Documentation
A solution to clusters at the exact same location which can be reached.
I have the code ready to go, but will hold out a little longer for the next release of fluster 3