Google Map V3: Markerclusterer with custom tooltip/title

Markerclusterer, part of Google Maps Utility Library, is a Javascript library that helps developers to manage a large number of markers, grouping near markers into a single “cluster”.

I’ve made some user testing sessions, and I’ve found that many non advanced users need a tooltip, to explain the meaning of the number showed on the cluster icon.

I use Markerclusterer in a site based on Google Map v3 APIs and I find that is impossible to customize tooltip (html title tag) showed when users stop the cursor over a cluster.

So, I have modified the markerclusterer javascript library, adding an optional parameter ‘description’ that specifies the tooltip. Nothing was changed in the class interface, so the backward compatibility is guaranteed:

var markerClustererOptions = { 
	description: ' tracks: click to show',
	maxZoom: 12,
	gridSize: 50
};
var markerClusterer = new MarkerClusterer(map, markers, markerClustererOptions);

Demos

Markerclusterer with custom tooltip

Update (7 jan 2011)

I have written to google map’s team to submit my code. On january 4th Luke Mahé from google said me that my modify will be add to the markerclusterer javascript library.

19 Replies to “Google Map V3: Markerclusterer with custom tooltip/title”

  1. Hi Alberto, the demo looks really good, and it works, whereas Google’s demos don’t seem to. Could you show me an example of your json for the demo please?

    1. Hello Johanes Mai
      The api.php file simply read a list of position on my databases, and convert it to json array like
      [
      [2160,40.6502,17.6058,”title1″,1],
      [2159,43.2263,13.1425,”title2″,1]
      ]
      You can replace my api.php with a static .html or .js file 🙂

  2. I am trying out this map for showing the sample data that has #responses per region. In the zoomed out version – the cluster shows the number of markers grouped and not the #responses beneath!

    Is there any way I can tweak it to show #responses represented by all the markers it has grouped at any point of time?

    Or Alternatively, can I just make that number appearing on the cluster vanish and mention the #responses under tooltip?

  3. Hello Rohit, the number of marker grouped in a single cluster is dynamic (the grouping is made in realtime) and is based on zoom level.

    For example, the same map at minimum zoom (the entire world) has 1 cluster with all marker. When zoom che number of cluster increment, and the marker-per-cluster decrement.

    There is online demo of your code?

  4. Everything seems working but now default cluster mouseover:

    google.maps.event.addListener(markerCluster, "mouseover", function (c) {

    is not working anymore… can you please help ?

    Nand

  5. When i start to extend MarkerClusterer, there is no mouserover / mouseout function.

    So, i have extend ClusterIcon prototype, modifying the onAdd method:

    google.maps.event.addDomListener(this.div_, 'mouseover', function() {

    });
    google.maps.event.addDomListener(this.div_, 'mouseout', function() {

    });

  6. I tried to use it this way but … it says
    “TypeError: this.cluster_ is undefined”

    google.maps.event.addDomListener(this.div_, 'mouseover', function() {
    var markerClusterer = this.cluster_.getMarkerClusterer();
    var cMarkers=markerClusterer.getMarkers();
    alert(cMarkers);
    });

    Can you please help … I would like to show all cluster Names onmouseover of a cluster icons?

    Thanks in advance,
    Nand

  7. Hi Alberto,

    Can you please help me on this …. I am just stuck at this point … I need your help to solve my issue…

    Thanks in advance

    Nand

  8. I do trust all of the concepts you have introduced in your post. They’re really convincing and can definitely work. Nonetheless, the posts are too quick for novices. Could you please lengthen them a little from subsequent time? Thanks for the post.

  9. Hi, thank you for your work .
    i replaced the php api with a static html. but i can not get the data?? what is wrong??

Leave a Reply

Your email address will not be published.