JSFiddle - React, Tailwind, and code Playground

by Alex Azuero

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false&amp;libraries=visualization&amp;dummy=.js"></script>
<div id="map_canvas"></div>
<a href="#">add/remove</a>

CSS

#map_canvas{
    width:500px;
    height:500px;
}
a.on {
    background:green;
}

JavaScript

var sanFrancisco = new google.maps.LatLng(37.774546, -122.433523);

map = new google.maps.Map(document.getElementById('map_canvas'), {
  center: sanFrancisco,
  zoom: 13,
  mapTypeId: google.maps.MapTypeId.SATELLITE
});

var heatmap;
$('a').click(function(){
       
    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)
    ];
    
    if(!heatmap)
        heatmap = new google.maps.visualization.HeatmapLayer({
            data: heatmapData,
            radius: 200
        });
       
    $(this).toggleClass('on');
       
    if ($(this).hasClass('on')) {
        heatmap.setMap(map);
        
        //This way its working, the heatmap is deleted after 5 sec:
        //setTimeout(function () { heatmap.setMap(null); console.log(heatmap); }, 5000);
    } else {
        heatmap.setMap(null);
    }
    return false;
});