Solutions for many markers in the same coordinate, Google Map mashup

Question

I am making a mashup where thumbnails will be shown over a google map.

The problem is that many thumbnails will share the same coordinate. So if I plot them like markers, they will be one on top of the other.

Have you seen any creative solution for this problem? Thanks

Answer 1

You'll want to look up the term Clustering. You basically just show one marker that indicates there are actually more than one marker at that location. Then at an appropriate zoom level the markers start to appear separately.

If they are at the exact same coordinates and will never diverge, then you will need to implement something that pops-up on the screen when you hover over the clustered marker (like a floating DIV that contains a list of the thumbnails for the person to select/view, or even a context menu where they can right click the cluster and select an individual item)

Answer 2

There are a few Javascript libraries that implement Clustering and are very easy to integrate into an existing mashup:

• MarkerClusterer - I used this for a mashup and found it easy to integrate, with a nice set of default icons.
• ClusterMarker - I haven't used this one, but it seems pretty functional.

You can also read this blog post which goes over the various alternatives.