Remove HeatmapLayer from google maps

Question

I'm using the HeatmapLayer api https://developers.google.com/maps/documentation/javascript/layers#JSHeatMaps

I generate the heatmap like this:

heatmap = new google.maps.visualization.HeatmapLayer({
    data: heatmapData,
    radius: 50
});
heatmap.setMap(google_map);

When i want to display another heat map using the same function as above (i'm using ajax and i have new markers to display, so i need to change the heatmap too) the heat map layer stays on the map and in this case i have 2 overlapping heatmaps on my map. How can i remove the current heatmaplayer first?

Here is my demo code, if you click on the link below the map, the heatmap is added, of you click on it again, it should remove it, but its just duplicated over and over again:

http://jsfiddle.net/LpL3P/

Answer 1

You need to declare the heatmap globally and then when you want to display new data on the heatmap do this:

let heatmap;

setData(heatmapData) {
    if (heatmap) {
      // Clear heatmap data
      heatmap.setMap(null);
      heatmap.setData([]);
    }
    heatmap = new google.maps.visualization.HeatmapLayer({
      data: heatmapData
    });

    heatmap.setMap(this.map);
}

Answer 2

For anyone else searching for a solution years after the original post I found the following worked. Begin by declaring the variable as a global that will hold the heatmap MVCObject.

var mvcObj;

Then, in the function you use to add the heatmap

if( typeof( mvcObj )=='object' ) mvcObj.clear();
/* locations is an array of latlngs */
mvcObj = new google.maps.MVCArray( locations );

/* this.map is a reference to the map object */
var heatmap = new google.maps.visualization.HeatmapLayer({
    data: mvcObj,
    map: this.map
});