Google Maps incorrect overlay after panning

Question

I am putting an overlay heatmap on top of a Google Map. More specifically I am using this plugin: http://www.patrick-wied.at/static/heatmapjs/example-heatmap-googlemaps.html

Now, my implementation is slightly different from the demo, as I am updating the map each time something changes, thus

google.maps.event.addListenerOnce(map, 'idle', function(event){ updateHeatMap();});

became:

google.maps.event.addListener(map, 'idle', function(event){ updateHeatMap();});

Whilst zooming and panning refreshes as it should, I noticed that whenever I dragged the map, the overlay 'colours' move twice the distance moved by the map. On the other hand, zooming works perfect so zooming in and back out corrects the position again.

This is happening only when the data is refreshed whenever the idle event is triggered. The demo works fine as it only loads the map once, unlike my implementation.

I am suspecting something wrong in the following code, but I haven't managed to detect the actual problem.

HeatmapOverlay.prototype.setDataSet = function(data){

var me = this,
    currentBounds = me.map.getBounds(),
    mapdata = {
        max: data.max,
        data: []
    },
    d = data.data,
    dlen = d.length,
    projection = me.getProjection(),
    latlng, point;

me.latlngs = [];

while(dlen--){    
  latlng = new google.maps.LatLng(d[dlen].lat, d[dlen].lng);
    if(!currentBounds.contains(latlng)) { 
        continue; 
    }

  me.latlngs.push({latlng: latlng, c: d[dlen].count});    point = me.pixelTransform(projection.fromLatLngToContainerPixel(latlng));
  mapdata.data.push({x: point.x, y: point.y, count: d[dlen].count});
}
me.heatmap.clear();
me.heatmap.store.setDataSet(mapdata); }

I would appreciate insight from you, as I've wasted too many hours trying to solve this now...

Thanks a lot, really appreciate it!

Answer 1

Never mind as such for the above.

I realised that Google have their own heatmap library, and I converted my code to use that. Works great!

https://developers.google.com/maps/documentation/javascript/layers#JSHeatMaps