Home/ Questions/Q 9103113
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T01:33:17+00:00

I am trying to create a heat map using Google Maps API. I am

  • 0

I am trying to create a heat map using Google Maps API. I am getting the map but not the heat values on the co-ordinates. Given below ids the code:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=APIKEY&sensor=true">
      
    </script>
    <script type="text/javascript">

   function initialize() {
  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);
}

function loadScript() {
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "http://maps.googleapis.com/maps/api/js?key=APIKEY&sensor=true&callback=initialize";
  document.body.appendChild(script);
}
window.onload = loadScript;
 </script>

<script>
var heatMapData = [
  {location: new google.maps.LatLng(8.8678, 76.5623 },
  {location: new google.maps.LatLng(9.5674, 77.5623)},
  {location: new google.maps.LatLng(10.7821, 78.447)},
  {location: new google.maps.LatLng(12.4523, 79.443)},
  {location: new google.maps.LatLng(37.782, -122.441)},
  {location: new google.maps.LatLng(37.782, -122.439)},
  {location: new google.maps.LatLng(37.782, -122.435)},
  {location: new google.maps.LatLng(37.785, -122.447)},
  {location: new google.maps.LatLng(37.785, -122.445)},
  {location: new google.maps.LatLng(37.785, -122.441)},
  {location: new google.maps.LatLng(37.785, -122.437)},
  {location: 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);

</script>
  </head>
  <body onload="initialize()">
    <div id="map_canvas" style="width:100%; height:100%"></div>
  </body>
</html>

This is the screenshot of the output. Could anyone help me in this?

enter image description here

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    According to the Google Maps API documentation, you should be passing an array of google.maps.LatLng objects to the HeatmapLayer as data.

    Try this:

    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)
];

    Also, you need to load the google.maps.visualization library by adding &libraries=visualization to the end of the URL when you include the Google Maps API.

    Working example: http://jsfiddle.net/EBQQH/

    • 0