JSFiddle - React, Tailwind, and code Playground

by rexonms

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=visualization"></script>
<div id="googleMap"></div>

CSS

html, body, #googleMap {
        height: 100%;
        margin: 0px;
        padding: 0px
      }

JavaScript

var MIN_NO_ACC = 520;
  var MAX_NO_ACC = 6119;
function initialize() {
    geocoder = new google.maps.Geocoder();
  var mapProp = {
    center:new google.maps.LatLng(40.785091,-73.968285),
    zoom:15,
    mapTypeId:google.maps.MapTypeId.ROADMAP
  };
  var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
  codeAddress("10001", 520);
  codeAddress("10002", 6119);


   function codeAddress(zip, intensity) {
    //var address = document.getElementById("address").value;
geocoder.geocode( { 'address': zip}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
  			
        var longLat = results[0].geometry.location;
        map.setCenter(longLat);
				//console.log('console.log(results[0].geometry.location' + results[0].geometry.location)
        //var hotSpot = results[0].geometry.location;

        var heatMapZip = [
        	{location: longLat, weight: intensity}
        ]
        //];

       //var color =[
         //   "#ff0000",
           // "#00ff00"
        //];

        var heatmap = new google.maps.visualization.HeatmapLayer({
          data: heatMapZip,
          radius: 50,
          dissapating: false
        });
          
        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)'
            ]
        heatmap.set('gradient', gradient);
        heatmap.setMap(map);

      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });
  }


}

google.maps.event.addDomListener(window, 'load', initialize);