Google Maps API - Markers

Question

I'm trying to add markers to a map on my page using Google's Javascript API. I know how to do this simply, just with little marker images in various spots on the map, however, I want this to be a little bit cooler.

I want to place transparent circles (tiny ones), on the map in place of markers, but make it so when they are crowded in one area, they layer on top of each other (obviously), and create a darkening effect, so you can kind of see where things are more crowded at a high level, not just a crazy amount of the same exact image marker (which would look really sloppy and weird).

Have any of you done anything like this before, or should I be approaching this differently?

Answer 1

Like a heat map?

http://code.google.com/p/gheat/ or http://www.heatmapapi.com/

Answer 2

try making it a shadow. Shadows layer on top of each other like your described. Example:

var shadow = new google.maps.MarkerImage('/images/pin_shadow.png',
    new google.maps.Size(27,30),
    new google.maps.Point(0,0),
    new google.maps.Point(0, 19));

var marker = new google.maps.Marker({
    shadow: shadow,
    (otherproperties here),
});

Let me know if this works.

Kevin

Answer 3

Have a look on that page: http://florent.clairambault.fr/add-a-circle-overlay-to-google-maps-api-v3

I think this is what you want.