JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Heatmaps</title>
  </head>
  <body>
    <div id="floating-panel">
      <button onclick="createHeatmap()">Create Heatmap</button>
      <button onclick="deleteHeatmap()">Delete Heatmap</button>
    </div>
    <div id="map" style="height: 600px; width: 800px;"></div>
    <script>
var map, heatmap;
        var heatmapdata;
var array=[];
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: {lat: 37.775, lng: -122.434},
    mapTypeId: google.maps.MapTypeId.SATELLITE
  });
}
function createHeatmap(){
        heatmapdata = [
                       new google.maps.LatLng(37.782551, -122.445368),
                       new google.maps.LatLng(37.782745, -122.444586),
                       new google.maps.LatLng(37.782842, -122.443688),];
        heatmap = new google.maps.visualization.HeatmapLayer({
        data: heatmapdata,
        });
        array.push(heatmap);
        console.log(heatmap)
        heatmap.setMap(map);
}

function deleteHeatmap(){
    
         for (var k = 0; k < array.length; k++) {
                 array[k].setMap(null);
     
    }
     array=[];
                                          
}
    </script>
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?signed_in=true&libraries=visualization&callback=initMap">
    </script>
  </body>
</html>