Heatmaps

Sample code for Google Maps Platform JavaScript API author(s): Justin Poehnelt

by Ritesh Kashyap

HTML

<!DOCTYPE html>
<!--
 @license
 Copyright 2019 Google LLC. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
-->
<html>
  <head>
    <title>Heatmaps</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <!-- jsFiddle will insert css and js -->
  </head>
  <body>
    <div id="map"></div>

    <!-- 
     The `defer` attribute causes the callback to execute after the full HTML
     document has been parsed. For non-blocking uses, avoiding race conditions,
     and consistent behavior across browsers, consider loading using Promises
     with https://www.npmjs.com/package/@googlemaps/js-api-loader.
    -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&libraries=visualization&v=weekly"
      defer
    ></script>
  </body>
</html>

CSS

/**
 * @license
 * Copyright 2019 Google LLC. All Rights Reserved.
 * SPDX-License-Identifier: Apache-2.0
 */
/* 
 * 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

/**
 * @license
 * Copyright 2019 Google LLC. All Rights Reserved.
 * SPDX-License-Identifier: Apache-2.0
 */
// 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">
let map, heatmap;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 10,
    center: { lat: 26.911, lng: 76.375},
    mapTypeId: "roadmap",
  });
  heatmap = new google.maps.visualization.HeatmapLayer({
    data: getPoints(),
    map: map,
  });
}

// Heatmap data: 500 Points
function getPoints() {
  return [
   new google.maps.LatLng(26.88509843, 75.89542255),
new google.maps.LatLng(26.88371992, 75.90043292),
new google.maps.LatLng(26.91968588, 76.48176594),
new google.maps.LatLng(26.86315841, 76.17753443),
new google.maps.LatLng(26.88333074, 76.23039567),
new google.maps.LatLng(26.95316958, 76.63428691),
new google.maps.LatLng(27.00682807, 76.8496645),
new google.maps.LatLng(26.96684795, 76.75756956),
new google.maps.LatLng(26.90516642, 76.36220019),
new google.maps.LatLng(26.91538803, 76.46526134),
new google.maps.LatLng(26.89590015, 76.28204082),
new google.maps.LatLng(26.86556361, 76.18269476),
new google.maps.LatLng(26.94759846, 76.57682501),
new google.maps.LatLng(26.94858922, 76.58936291),
new google.maps.LatLng(26.89632642, 76.2885836),
new google.maps.LatLng(26.8888986, 75.88090961),
new google.maps.LatLng(26.9491777, 76.59507514),
new google.maps.LatLng(26.85758915, 76.09058441),
new google.maps.LatLng(27.02277099, 76.87867882),
new google.maps.LatLng(26.90663602, 76.32043859),
new google.maps.LatLng(26.96860353, 76.77369859),
new google.maps.LatLng(26.95463048, 76.64791557),
new google.maps.LatLng(26.9996549, 76.84057632),
new google.maps.LatLng(26.95463048, 76.64791557),
new google.maps.LatLng(26.90880722, 76.39386921),
new google.maps.LatLng(26.92057094,...