0

I want to generate heatmap using a predefined array (locations in this case) if the data coming from google sheets is satisfying an if condition. Heatmap gets generated if I click on the Map or Satellite buttons provided by google maps. The HTML code snippet is :

   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 Ward Office', 19.0059017, 72.8396856],
       ['G South Ward Office', 19.0083734, 72.8304087], ['Gawanpada Fire Station', 19.1720498, 72.9663645], ['Grant Road Eye Hospital', 18.9661863, 72.8195919], ['H West Ward Office', 19.0561063, 72.8352939], ['Haji Ali Pumping Station', 18.9784538, 72.8121079], ['HBT Trauma Hospital', 19.1410465, 72.8541015],
       ['K East Ward Office', 19.1203811, 72.8523182],['K West Ward Office', 19.1195001, 72.844486], ['Kandivali Fire Station', 19.2059829, 72.8504328], ['Kandivali Workshop', 19.2069415, 72.8244548], ['Kurla Fire Station', 19.0844942, 72.8860674], ['L Ward Office', 19.0704672, 72.8790936],
       ['M East Ward Office', 19.0563545, 72.920824], ['M West Ward Office', 19.0611012, 72.8993043], ['Malbar Hill', 18.9547975, 72.7984522], ['Malwani Fire Station', 19.196032, 72.8221149], ['Mandavi Fire Station', 18.9582963, 72.838941], ['Marol Fire Station', 19.1094559, 72.8776018],
       ['Memonwada Fire Station', 18.9579624, 72.8327018], ['Mulund Fire Station', 19.1753292, 72.942664], ['Municipal Head Office, Mumbai', 18.9403642, 72.834503], ['N Ward Office', 19.0839316, 72.9064422], ['Nair Hospital', 18.9712447, 72.8209136], ['Nariman Point Fire Station', 18.9230687, 72.826101],
       ['P North Ward Office', 19.1877853, 72.8423072], ['P South Ward Office', 19.1626595, 72.8464575], ['Prabodhankar Thackeray Natya Mandir', 19.2329298, 72.8546206], ['Rawali Camp Fire Station', 19.0355154, 72.8668983], ['S Ward Office', 19.1390295, 72.9304517], ['SWM Santacruz Workshop', 19.0843377, 72.8359724],
       ['SWD Workshop Dadar', 19.0125054, 72.8373092], ['Versova Pumping Station', 19.142988, 72.820361], ['Vikhroli Fire Station', 19.1009895, 72.918176], ['Vile Parle Fire Station', 19.0926029, 72.8440694], ['Wadala Fire Station', 19.0248942, 72.8702793], ['Worli Fire Station', 19.0133214, 72.8236434]];
       var ht;
       var htdata = [];
       $.getJSON(url,function(data){
         $.each(data.feed.entry,function(i,val){
          var n = parseFloat(val.gsx$hr_4.$t);
          if(n>0){
              if(i<40){  ht = new google.maps.LatLng(locations[i][1], locations[i][2]);
                htdata.push(ht);}
                }
         });
       })
    var pointArray = new google.maps.MVCArray(htdata);
     heatmap = new google.maps.visualization.HeatmapLayer({
                 data: pointArray,
                 map: map,
                 radius: 200
               });
    }

I am attaching screenshots for the result, Rainfall heatmap calls this function but doesn't generate the heatmap until I click the Map or Satellite button.

Before clicking the Map or Satellite button enter image description here

geocodezip
  • 158,664
  • 13
  • 220
  • 245
Yogesh Poonia
  • 3
  • 2

1 Answers1

0

The $.getJSON function is asynchronous. You need to create the heatmap in the callback function, when/where the data is available.

$.getJSON(url, function(data) {
  $.each(data.feed.entry, function(i, val) {
    var n = parseFloat(val.gsx$hr_4.$t);
    if (n > 0) {
      if (i < 40) {
        ht = new google.maps.LatLng(locations[i][1], locations[i][2]);
        htdata.push(ht);
      }
    }
  });
  var pointArray = new google.maps.MVCArray(htdata);
  heatmap = new google.maps.visualization.HeatmapLayer({
    data: pointArray,
    map: map,
    radius: 200
  });
});

Related question: Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference

proof of concept fiddle

code snippet:

// 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 Ward Office', 19.0059017, 72.8396856],
    ['G South Ward Office', 19.0083734, 72.8304087],
    ['Gawanpada Fire Station', 19.1720498, 72.9663645],
    ['Grant Road Eye Hospital', 18.9661863, 72.8195919],
    ['H West Ward Office', 19.0561063, 72.8352939],
    ['Haji Ali Pumping Station', 18.9784538, 72.8121079],
    ['HBT Trauma Hospital', 19.1410465, 72.8541015],
    ['K East Ward Office', 19.1203811, 72.8523182],
    ['K West Ward Office', 19.1195001, 72.844486],
    ['Kandivali Fire Station', 19.2059829, 72.8504328],
    ['Kandivali Workshop', 19.2069415, 72.8244548],
    ['Kurla Fire Station', 19.0844942, 72.8860674],
    ['L Ward Office', 19.0704672, 72.8790936],
    ['M East Ward Office', 19.0563545, 72.920824],
    ['M West Ward Office', 19.0611012, 72.8993043],
    ['Malbar Hill', 18.9547975, 72.7984522],
    ['Malwani Fire Station', 19.196032, 72.8221149],
    ['Mandavi Fire Station', 18.9582963, 72.838941],
    ['Marol Fire Station', 19.1094559, 72.8776018],
    ['Memonwada Fire Station', 18.9579624, 72.8327018],
    ['Mulund Fire Station', 19.1753292, 72.942664],
    ['Municipal Head Office, Mumbai', 18.9403642, 72.834503],
    ['N Ward Office', 19.0839316, 72.9064422],
    ['Nair Hospital', 18.9712447, 72.8209136],
    ['Nariman Point Fire Station', 18.9230687, 72.826101],
    ['P North Ward Office', 19.1877853, 72.8423072],
    ['P South Ward Office', 19.1626595, 72.8464575],
    ['Prabodhankar Thackeray Natya Mandir', 19.2329298, 72.8546206],
    ['Rawali Camp Fire Station', 19.0355154, 72.8668983],
    ['S Ward Office', 19.1390295, 72.9304517],
    ['SWM Santacruz Workshop', 19.0843377, 72.8359724],
    ['SWD Workshop Dadar', 19.0125054, 72.8373092],
    ['Versova Pumping Station', 19.142988, 72.820361],
    ['Vikhroli Fire Station', 19.1009895, 72.918176],
    ['Vile Parle Fire Station', 19.0926029, 72.8440694],
    ['Wadala Fire Station', 19.0248942, 72.8702793],
    ['Worli Fire Station', 19.0133214, 72.8236434]
  ];
  var ht;
  var htdata = [];
  $.getJSON(url, function(data) {
    $.each(data.feed.entry, function(i, val) {
      var n = parseFloat(val.gsx$hr_4.$t);
      if (n > 0) {
        if (i < 40) {
          ht = new google.maps.LatLng(locations[i][1], locations[i][2]);
          htdata.push(ht);
        }
      }
    });
    var pointArray = new google.maps.MVCArray(htdata);
    heatmap = new google.maps.visualization.HeatmapLayer({
      data: pointArray,
      map: map,
      radius: 200
    });
  })

}
/* 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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=Theatmap&libraries=visualization&v=weekly" defer></script>
<!-- jsFiddle will insert css and js -->
<div id="map"></div>
geocodezip
  • 158,664
  • 13
  • 220
  • 245