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.

This entry was posted in Google Map, Javascript and tagged , , . Bookmark the permalink.

19 Responses to Google Map V3: Markerclusterer with custom tooltip/title

  1. Frauke Geisler says:

    Your Link for the Demo “Markerclusterer with custom tooltip” don’t works.

  2. Alberto says:

    Tnx for your comment, I have fixed the link url for the demo

  3. Bart Stoll says:

    Hello Alberto,
    I’m trying to reproduce your example and I’m wondering how you structured you data.

  4. Alberto says:

    Hello Bart, thanks for your comment 🙂

  5. Garve Scott-Lodge says:

    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?

  6. Alberto says:

    Hi Garve Scott-Lodge, if you inspect the demo page with Firebug net panel, you can see the json at url http://www.piste-ciclabili.com/test/api/api.php?method=getPathCenterAll (it is a simple array of latitude,longitude,and others data)

  7. mellorine says:

    Thank you for this. It works 🙂

  8. Johanes Mai says:

    How to write api.php and load it.
    Can you help me about it step by step and if you can, please send me api.php.
    Thank you very much and best regards.

    • Alberto says:

      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 🙂

  9. Rohit Bhosale says:

    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?

  10. Alberto says:

    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?

  11. Nand kishor says:

    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

  12. Alberto says:

    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() {

    });

  13. Nand kishor says:

    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

  14. Nand says:

    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

  15. Alberto says:

    Hello Nand,

    I recommend to try to use new trunk of Markerclusterer library, that include mousover events and more functionality. You can find it on github: https://github.com/adamalbrecht/MarkerClusterer

    p.s. sorry for the delay

  16. 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.

  17. Bekir says:

    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. Required fields are marked *