Google Maps heatmap layer point radius

Ok, I tried some things:

Using the Mercator Projection example (check the source) to extract the x,y pixel coordinates of any point from a latLng, to later use the geometry library, specifically the computeOffset function get another latLng a distance "DM" (in meters) to the right of the previous one, get the difference (in pixels) as an absolute value "DP" and from there you get your "pixelsPerMeter" ratio DP/DM.

So then, if you want your radius to be 100 meters you just set the properties to {radius:Math.floor(desiredRadiusPerPointInMeters*pixelsPerMeter)}

And to handle the change in zoom just use a listener

 google.maps.event.addListener(map, 'zoom_changed', function () {
          heatmap.setOptions({radius:getNewRadius()});
      });

I uploaded a small example (try zooming), you can check if the distance looks right with the button on the bottom.

For anyone who'd like to have a nicely packaged coffeescript version of @lccarrasco's jsbin example, you can view the gist of the MercatorProjection coffeescript class I created using his code.

Once you have the class loaded, you can use it with the following:

map = new google.maps.Map(...)
heatmap = new google.maps.visualization.HeatmapLayer({map: map})
google.maps.event.addListener(map, 'zoom_changed', () ->
  projection = new MercatorProjection()
  heatmap.setOptions(radius: projection.getNewRadius(map, 15))
)

Where '15' is the radius in meters which you can play with or set programmatically by other means to get your heatmap to look like you want it.

I solved this by using the listener that @lccarrasco used but in my getNewRadius() function i made the radius change relative to the zoom.

ie. var radius = (somemultiplicationfactor)/(Math.pow(2,(20-zoom)));

This works as the zoom ratio is 2:1 for each zoom