Heatmaps

by Lawrence Ross

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Heatmaps</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=&callback=Theatmap&libraries=visualization&v=weekly"
      defer
    ></script>
    <!-- jsFiddle will insert css and js -->
  </head>
  <body>
     <div id="map"></div>
  </body>
</html>

CSS

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
#map {
  height: 100%;
}

/* Optional: Makes the sample page fill the window. */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: "Roboto", "sans-serif";
  line-height: 30px;
  padding-left: 10px;
}

#floating-panel {
  background-color: #fff;
  border: 1px solid #999;
  left: 25%;
  padding: 5px;
  position: absolute;
  top: 10px;
  z-index: 5;
}

JavaScript

// This example requires the Visualization library. Include the libraries=visualization
  // parameter when you first load the API. For example:
  // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=visualization">
  function Theatmap() {
    var heatmap;
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 8,
      center: {
        lat: 19.076656,
        lng: 72.877176
      },
      mapTypeId: 'hybrid'
    });
    var spreadsheetID = '1iiTSauIbSLKFAuhSJkDd-tNv4r1rUD3XAf1FXHSgtPg';
    var worksheetID = 'od6';
    var i;
    var url = 'https://spreadsheets.google.com/feeds/list/' + spreadsheetID + '/' + worksheetID + '/public/values?alt=json';
    var locations = [
      ['Andheri Fire Station', 19.112269, 72.840663],
      ['B Ward Office', 18.9614551, 72.8333212],
      ['Bandra Fire Station', 19.0503912, 72.8374773],
      ['Bhandup Complex', 19.1599078, 72.9239095],
      ['BKC Fire Station', 19.0703913, 72.8681195],
      ['Borivali Fire Station', 19.2296608, 72.8406847],
      ['Britannia Storm Water Pumping Station Mumbai', 18.9784538, 72.8121079],
      ['Building Proposal Office Vikhroli', 19.1176878, 72.92642],
      ['Byculla Fire Station', 18.9724232, 72.8319586],
      ['C Ward Office', 18.946123, 72.8249009],
      ['Chembur Fire Station', 19.0545687, 72.89359],
      ['City Institute Of Disaster Management parel', 18.9949756, 72.8405544],
      ['Chincholi Fire Station', 19.112269, 72.840663],
      ['Colaba Fire Station', 18.9154742, 72.8260795],
      ['Colaba Pumping Station', 18.9076674, 72.8178695],
      ['Cooper Hospital', 19.1077678, 72.8362055],
      ['D Ward Office', 19.0222358, 72.8664991],
      ['Dadar Fire Station', 19.014298, 72.8455827],
      ['Dahisar Fire Station', 19.2475989, 72.8625351],
      ['Dharavi Fire Station', 19.039303, 72.8499501],
      ['Dindoshi Fire Station', 19.1750357, 72.8609866],
      ['F North Ward Office', 19.0294197, 72.8546058],
      ['F South...