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.
Your Link for the Demo “Markerclusterer with custom tooltip” don’t works.
Tnx for your comment, I have fixed the link url for the demo
Hello Alberto,
I’m trying to reproduce your example and I’m wondering how you structured you data.
Hello Bart, thanks for your comment 🙂
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?
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)
Thank you for this. It works 🙂
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.
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 🙂
ok, thank you.
I’ll try to do it and if i dont know anything, i’ll ask you. 🙂
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?
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?
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
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() {
});
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
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
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
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.
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??