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 Community Software Fusonic Connect 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
[...] Clustering many markers with Google Maps v3 Category: Google Maps, Java Script — Giulio Pons @ 12:36 pm I’ve found this blog where Matthias Burtscher converted the Marker Cluster (like the Phoogle2) for Google Maps API v.3. Since I’m starting to develop some v3 application, I’m very happy: http://blog.fusonic.net/archives/195 [...]
@Dave, try the gridSize property of the Fluster2 object. The default is 60 but I set mine to 20 to keep my clusters smaller.
Not sure if you can post code here, but I use a slightly more dynamic method of selecting the gridSize based on the current zoom of the map with the following:
google.maps.event.addListener(map, “zoom_changed”, function() {
var zoomLevel = map.getZoom();
switch(true){
case zoomLevel > 13:
fluster.gridSize = 0;
break;
case zoomLevel > 12:
fluster.gridSize = 10;
break;
case zoomLevel > 7:
fluster.gridSize = 20;
break;
case zoomLevel > 5:
fluster.gridSize = 40;
break;
default:
fluster.gridSize = 60;
break;
}
});
Hi all,
I’m using fluster2 and the clearAllMarkers method,
1 week ago it’s work great but today i got “this[qb] is not a function” error
This error happend only when the markers are clustered
And when i zoom at the maximum and show only some markers (but no clustered markers) it work great !
I try @Luis application ( http://ktulu.com.ar/locales/ ) last week it works geat but today I got the same error !
Someone knows this error ?
Thanks for your help (Sorry for my bad english)
Sam.
Hi all !
I resolve the bug,
It works with 3.0 but not 3.1, someone know why ?
Thanks !
Hi all…
I could make this script work fine but now I have got a issue that we need to solve, here we go and I hope someone can help us:
We have a number for each point wich is going to be added on the map, so what we need to do is sum each one of this number when more than a point is clustered. For example, if we have two points and they both have numbers 3 and 4 when it is clustered we will have number 7 on the marker.
Does anyone have an idea to help us doing that?
Kind Regards. Luis!
Hi, great link that was!!! Thanks a ton!!
a quick note to acknowledge use of code and say thanks
you can see it running here: http://thecuebball.co.uk
a quick note to acknowledge use of code and say thanks
you can see it running here: http://thecueball.co.uk
(hmmm – only 1 b in ball!)
OK, so before I go too far, do you know if this will work with the iPhone version of Google Maps? I am intending on integrating it with the Appclerator API, has anyone else at least tried to do this? I am getting somewhere, this will probably mean nothing to anyone but its currently falling at this error:
Terminating app due to uncaught exception ‘org.mapfluster.TiMapViewProxy’, reason: ‘Invalid type passed to function. expected: (null), was: NSObject in -[TiMapViewProxy zoom:] (TiMapViewProxy.m:91)’
Any insight from anyone would be great, send me good news!!
I noticed that in firefox 3.6.14 and 3.6.6 also in chrome. You have to double click to zoom into a fluster multiple times. Is there a work around to correct this so it functions like IE with a single click?
As a temporary fix I loaded the previous version of the google maps api to fix the double click issue in firefox and chrome that I explained previously.
like this:
http://maps.google.com/maps/api/js?v=3.3&sensor=false
For more info on changes to the api.
http://code.google.com/p/gmaps-api-issues/wiki/JavascriptMapsAPIv3Changelog
If anyone has a better fix please let me know.
hello, im just start with js and fluster2. i have qestion how i add my markers to map ? and how i add my own map. I know it`s really duum question but pleas forgive me i`m really new
@m Yes, I too have noticed that fluster2 clusters are no longer clickable in firefox and chrome. I guess there’s been an upgrade to the default google maps. Thanks for the workaround, but would good to see a proper fix.
Frank
Hi,
i am using the google.maps.event namspace for grouping of makers ant its working perfect in all Browser,
but some days before(Due to any updates from Google) it’s now working in Other then IE.
Whould you please provide us suggestion or solution for this Please :).
Thanks in Advance..
Thanks m, nice catch!
After downgrade at v3.3, single click works again…
But I agree with Frank, Fluster need a fix
Hi,
I wanted to say thanks for your work: I’m using Fluster2 in my project GuidebookPlus (online cartographic index to travel guidebooks) http://www.guidebookplus.com and acknowledged you at http://www.guidebookplus.com/mapmybook/?p=390. Thanks again.
PS I agree that it would be nice if onclicking still worked in Chrome & Firefox too – but Fluster2′s still great.
Peter Jenkin
GuidebookPlus
Note, per the clearAll() function at comment 6, I had to change a couple lines to make it work correctly. First, update this line
for(var i = 0; i<21; i++) // Used to be 15, however zoom level extends to 21
…and comment out this one:
//clusters[i][j].marker.setMap(null);
The first change fixes a problem where clusters wouldn't clear themselves if zoomed in past zoom level 15. The second was triggering an error in the Google code when left as-is – there's probably a little memory waste commenting it out but it works =)
Been using this for about a year now and it's still going strong with the Google Maps API v3. Some updates would be great but even as is it hits the spot!
sorry I’m not so technical — but how and where do I add my own map URL or something.. basically I want to load my own google map with markers already in place…
[...] For this feature, we will be using an add on library called “Fluster2″. You can download this for free here: http://blog.fusonic.net/2009/12/clustering-for-google-maps-v3-with-fluster2/ [...]
will to pay anyone who can help me fix the double click problem with fluster2. google has discontinued v3.3 so the quick fix no longer works….any takers?
Hi, clusters are working fine. But the issue is that, the clusters[markers] gets disappeared in the first zoom level, ie., in the full world map view. Kindly anyone suggest. I checked your example link. the issue appearing in your example link also.
Hi,
I’m trying to implement Fluster2 which seems to work … except I’m getting some weird situations while zooming in and out. Especially when zooming out … some times no markers show at all … or just 2 normal markers …
I’ve tried to implement de clearMarkers function but I didn’t really figure out when I should call this function…
http://www.quatsch.fr/4lcarto_dev/
Anybody can give me some info?
Hi
Thanks for the awesome script. It is exactly what I was looking for!