Clustering for Google Maps v3 with Fluster2

Filed under: Google Maps — Matthias Burtscher @ 11. December 2009 18:36 | Comments (11)

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.

Fluster2 in action

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: , ,

11 Comments »

  1. Comment by Philippe — 12. December 2009 @ 15:23

    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)

  2. Comment by Lefteriz — 20. December 2009 @ 19:49

    thats a very nice script! thank you for your effort…

  3. Comment by Hoho — 26. December 2009 @ 09:42

    Thanks,very good

  4. Comment by gm — 6. January 2010 @ 04:48

    Hi, thanks for the great tool.
    I have a question. How can I add infowindow when I click on a single marker?
    Thank you.

  5. Comment by cloetensbrecht — 13. January 2010 @ 22:58

    I will use this new MarkerClusterer at http://www.standbeelden.be

  6. Comment by Kevin — 21. January 2010 @ 15:04

    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();
    };

  7. Comment by Donno — 25. January 2010 @ 06:59

    Found Bug In IE Complains x is null ??

  8. Comment by Matthias Burtscher — 29. January 2010 @ 14:56

    @Donno: How to reproduce this bug?

  9. Comment by Dave — 18. February 2010 @ 16:47

    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?

  10. Comment by Luis — 18. February 2010 @ 17:19

    It’s really nice Fluster2. I’ve used it here: http://ktulu.com.ar/locales with the clearMarkers function Kevin posted.

  11. Comment by William — 22. February 2010 @ 18:36

    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

Leave a comment