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
Hey guys,
How can i use this with infowindow? I’d like my markers to be clickable once zoomed in.
Any help would be great.
Thanks Ric
Hi,
I would love to use this script, but i have a problem – i need to agregate markers not only by the density of them but also by the type of the marker – can any one poin me in some direction how to do it w/o inicializing 3 markerclusters ?
Very nice script! Thanks a lot , we are using it in our website where we geotag architecture! http://www.architagged.com! It’s working very user friendly!
I am using the clearAllMarkers code and am getting a weird JS error
Here are the offending lines:
if (clusters[i][j].marker)
clusters[i][j].marker.setMap(null);
}
clusters[i][j].hide();
clusters[i][j] = null;
I don’t know what is going on, but FF says: “this[gb] is not a function”
It would be great if we could set max zoom level. At the moment at max zoom I have markers that are still clustered
Very usefull library! Tks a lot for your effort.
Would love to have documentation ;)
@Paul Shriner
The problem is related to the click-listener in Fluster2ClusterMarker. Implement proper onAdd- and onRemove-functions (as per the contract given in googles specification), and remove the listener in the onRemove-function.
You should change the ‘dragend’ event listener to ‘idle’ – then the clustering will be fired when the map’s programmatically moved (i.e. with a map.panToBounds call) – currently it only fires if the user actually drags the map
I add the next line
me.markers.length=0;
before reset me.markers array
me.markers = new Array();
becouse my markers didn’t reset
Can I change the cluster sensitivity. It is clustering when I am zoomed in quite close and clustering 2 together when I don’t want it that sensitive.
Thanks