How to avoid Heatmap layers in google maps stacking over each other - google-maps-api-3

Question

I am trying to implement a HTML slider and attaching the slider value with the radius of the location's heatmap. As I increase the slider , the radius is increasing properly. But as I reduce it, instead of reducing, it is overlaying on the existing heatmap, Hence could not see any difference.
HTML Code
<div class="slidecontainer">
<style="text-align:center; font: 5px; padding-top: 0px;"> Choose the Time range </style>
<br><input type="range" min="1" max="24" value="0" class="slider" name="sder" form="form1" id="myRange" onchange="updateTextInput(this.value);"></div>
JS Code
var chenai = new google.maps.LatLng(13.051126, 80.195590);
map = new google.maps.Map(document.getElementById('map'), {
center: chenai,
zoom: 13,
mapTypeId: 'satellite'
});
function updateTextInput(val) {
var testheatMapData = [
{location: new google.maps.LatLng(13.034603, 80.207509), weight: 20},
{location: new google.maps.LatLng(13.071126, 80.195590), weight: 15},
{location: new google.maps.LatLng(13.025914, 80.156675), weight: 10} ];
heatmap = new google.maps.visualization.HeatmapLayer({
data: heatMapData,
radius: val,
});
heatmap.setMap(map);
}

Answer 1

Create the heatmap layer and
Update its radius in the update function called by the slider
var map;
var heatmap;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(37.783, -122.445),
zoom: 13
};
map = new google.maps.Map(document.getElementById('map'), mapOptions);
var heatmapData = [
new google.maps.LatLng(37.782, -122.447),
new google.maps.LatLng(37.782, -122.445),
new google.maps.LatLng(37.782, -122.443),
new google.maps.LatLng(37.782, -122.441),
new google.maps.LatLng(37.782, -122.439),
new google.maps.LatLng(37.782, -122.437),
new google.maps.LatLng(37.782, -122.435),
new google.maps.LatLng(37.785, -122.447),
new google.maps.LatLng(37.785, -122.445),
new google.maps.LatLng(37.785, -122.443),
new google.maps.LatLng(37.785, -122.441),
new google.maps.LatLng(37.785, -122.439),
new google.maps.LatLng(37.785, -122.437),
new google.maps.LatLng(37.785, -122.435)
];
heatmap = new google.maps.visualization.HeatmapLayer({
data: heatmapData,
radius: 10,
map: map
});
}
function updateTextInput(val) {
heatmap.setOptions({
radius: val
});
}
#map {
height: 170px;
}
<div id="map"></div>
<input type="range" min="1" max="24" value="10" class="slider" name="sder" form="form1" id="myRange" onchange="updateTextInput(this.value);">
<!-- Replace the value of the key parameter with your own API key. -->
<script src="//maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initialize&libraries=visualization" async defer></script>