Array not being able to generate heat map in google maps

Question

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

Answer 1

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>