CODEWITHSUNDEEP
javascriptgoogle-maps-api-3
slandau
slandau

Reputation: 24082

Google Maps API - Markers

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?

Upvotes: 0

Views: 609

Answers (3)

Kevin
Kevin

Reputation: 341

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

Upvotes: 0

evan
evan

Reputation: 4297

Like a heat map?

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

Upvotes: 1

ChristopheCVB
ChristopheCVB

Reputation: 7305

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.

Upvotes: 0

Related Questions