JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false&amp;libraries=visualization"></script>
<div id="control-panel">
        <button  onclick="toggleHeatmap()" type="button">
            Toggle Heatmap</button>
        <button onclick="changeGradient()" type="button">
            Change gradient</button>
        <button onclick="changeRadius()" type="button">
            Change radius</button>
        <button onclick="changeOpacity()" type="button">
            Change opacity</button>
    </div>
    <div id="map-canvas">
    </div>

CSS

html, body, #map-canvas {
        height: 100%;
        width: 100%;
        margin: 0px;
        padding: 0px
      }
      #control-panel {
        position: absolute;
        top: 50px;
        left: 50%;
        margin-left: -180px;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
      }

JavaScript

var map, pointarray, heatmap;

        var gradient = [
            'rgba(0, 255, 255, 0)',
            'rgba(0, 255, 255, 1)',
            'rgba(0, 191, 255, 1)',
            'rgba(0, 127, 255, 1)',
            'rgba(0, 63, 255, 1)',
            'rgba(0, 0, 255, 1)',
            'rgba(0, 0, 223, 1)',
            'rgba(0, 0, 191, 1)',
            'rgba(0, 0, 159, 1)',
            'rgba(0, 0, 127, 1)',
            'rgba(63, 0, 91, 1)',
            'rgba(127, 0, 63, 1)',
            'rgba(191, 0, 31, 1)',
            'rgba(255, 0, 0, 1)'
        ]

 var taxiData = [
new google.maps.LatLng(43.3128954, 10.5320177),
new google.maps.LatLng(43.4121300, 10.4157520),
new google.maps.LatLng(43.1089952, 10.5426590),
new google.maps.LatLng(43.3302380, 10.5042550),
new google.maps.LatLng(43.3644680, 10.8124930),
new google.maps.LatLng(43.3541120, 10.4531410),
new google.maps.LatLng(43.3062850, 10.5210529),
new google.maps.LatLng(43.3062850, 10.5210529),
new google.maps.LatLng(43.3273157, 10.5083930),
new google.maps.LatLng(43.2342041, 10.6222460),
new google.maps.LatLng(43.1572106, 10.6169308),
new google.maps.LatLng(43.4967050, 10.3423048),
new google.maps.LatLng(43.3253940, 10.6299960),
new google.maps.LatLng(43.3955456, 10.4400270),
new google.maps.LatLng(43.3143960, 10.6326760),
new google.maps.LatLng(43.3051776, 10.5043640),
new google.maps.LatLng(43.4072170, 10.4715550),
new google.maps.LatLng(43.3163522, 10.4949865),
new google.maps.LatLng(43.2963952, 10.6142673),
new google.maps.LatLng(43.3953170, 10.4335930),
new google.maps.LatLng(43.3089914, 10.5342037),
new google.maps.LatLng(43.3074491, 10.5198081),
new google.maps.LatLng(43.4091705, 10.4721192),
new google.maps.LatLng(43.3026992, 10.5276579),
new google.maps.LatLng(43.3304470, 10.5045050),
new google.maps.LatLng(43.3127912, 10.5140792),
new google.maps.LatLng(43.3085300, 10.5188593),
new google.maps.LatLng(43.3293600, 10.5041670),
new google.maps.LatLng(43.8924585, 11.0941855),
new google.maps.LatLng(43.3085300,...