JSFiddle - React, Tailwind, and code Playground

by amorris

HTML

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBdTuWJjEUMvQZ6VVPGksE12XNgQgs__Qk&amp;sensor=true&amp;libraries=visualization&amp;.js"></script>
<div id="map_canvas" style="width:100%; height:100%"></div>

CSS

html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }

JavaScript

var mapOptions = {
  zoom: 3,
  center: new google.maps.LatLng(8.881928, 76.592758),
  mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

var heatMapData = [
    new google.maps.LatLng(8.8678, 76.5623),
    new google.maps.LatLng(9.5674, 77.5623),
    new google.maps.LatLng(10.7821, 78.447),
    new google.maps.LatLng(12.4523, 79.443),
    new google.maps.LatLng(37.782, -122.441),
    new google.maps.LatLng(37.782, -122.439),
    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.441),
    new google.maps.LatLng(37.785, -122.437),
    new google.maps.LatLng(37.785, -122.435)
];

var heatmap = new google.maps.visualization.HeatmapLayer({
  data: heatMapData
});
heatmap.setOptions({radius: heatmap.get('20')});
heatmap.setMap(map);