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

function initialize() {
    geocoder = new google.maps.Geocoder();
  	var mapProp = {
    	center:new google.maps.LatLng(37.782551, -122.445368),
    	zoom:13,
    	//mapTypeId:google.maps.MapTypeId.ROADMAP,
      styles: getGoogleMapStyle()
  	};
  	var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
		var heatMap =  new google.maps.visualization.HeatmapLayer({
    	data: getDataPoint(),
      gradient: getGradient(),
      radius:30,
      map: map
    })
  }
  
  
function getGoogleMapStyle() {
return [
  {
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#212121"
      }
    ]
  },
  {
    "elementType": "labels.icon",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#757575"
      }
    ]
  },
  {
    "elementType": "labels.text.stroke",
    "stylers": [
      {
        "color": "#212121"
      }
    ]
  },
  {
    "featureType": "administrative",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#757575"
      }
    ]
  },
  {
    "featureType": "administrative.country",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#9e9e9e"
      }
    ]
  },
  {
    "featureType": "administrative.land_parcel",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "administrative.locality",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#bdbdbd"
      }
    ]
  },
  {
    "featureType": "administrative.neighborhood",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "labels.text",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#757575"
      }
    ]
  },
  {
    "featureType":...