title: Google Maps from JSON File
body: <p>I'm trying to create a heatmap map with 2 layers using google maps API and heatmaps.js.  I'm able to create my map by hard-coding my lat/lon variables, but ultimately I'd like to have my layers fed from JSON files that can easily be refreshed.</p>
  
  <p>Here is my current HTML, which works great.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;meta name="description" content=""&gt;
      &lt;meta name="author" content=""&gt;
  
      &lt;link href='css/bootstrap.css' rel='stylesheet' type='text/css'&gt;&lt;/link&gt;
      &lt;link href='css/bootstrap-responsive.css' rel='stylesheet' type='text/css'&gt;&lt;/link&gt;
  
      &lt;script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'&gt;&lt;/script&gt;
      &lt;script type='text/javascript' src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false&amp;libraries=visualization&amp;.js"&gt;&lt;/script&gt;
  
      &lt;style type="text/css"&gt;
        body {
          padding-top: 60px;
          padding-bottom: 40px;
        }
        .sidebar-nav {
          padding: 9px 0;
        }
  
        @media (max-width: 980px) {
          /* Enable use of floated navbar text */
          .navbar-text.pull-right {
            float: none;
            padding-left: 5px;
            padding-right: 5px;
          }
        }
      &lt;/style&gt;
  
      &lt;script&gt;
        var map, pointarray, heatmap;
  
        var layer1 = [
          {location: new google.maps.LatLng(42.071523,-72.624257), weight:13.747727085},
          {location: new google.maps.LatLng(42.37686,-72.46914), weight:6.6332495807},
          {location: new google.maps.LatLng(42.40524,-72.528427), weight:5.1961524227},
          {location: new google.maps.LatLng(42.383945,-72.511834), weight:1.7320508076},
          {location: new google.maps.LatLng(42.433317,-72.114488), weight:5.6568542495}
        ];
  
        var layer2 = [
          {location: new google.maps.LatLng(41.513113,-74.37616), weight:2.4494897428},
          {location: new google.maps.LatLng(41.147711,-73.941171), weight:10},
          {location: new google.maps.LatLng(41.329376,-74.347207), weight:4.8989794856},
          {location: new google.maps.LatLng(41.338977,-73.987248), weight:1.7320508076}
        ];
  
  
        function initialize() {
          var mapOptions = {
            zoom: 4,
            center: new google.maps.LatLng(38.82, -99.408660),
            mapTypeId: google.maps.MapTypeId.ROADMAP
          };
  
          map = new google.maps.Map(document.getElementById('map-canvas'),
              mapOptions);
  
          pointArray1 = new google.maps.MVCArray(layer1);
          pointArray2 = new google.maps.MVCArray(layer2);
  
          heatmap1 = new google.maps.visualization.HeatmapLayer({
            data: pointArray1
          });
          heatmap2 = new google.maps.visualization.HeatmapLayer({
            data: pointArray2
          });
  
          heatmap1.setMap(map);
          heatmap2.setMap(map);
        }
  
      //FUNCTION TO CHANGE LAYERS
      function changeMap(layerNum) {
  
      if (layerNum == 1) {
      updateMap(heatmap1);
      }
      if (layerNum == 2) {
      updateMap(heatmap2);
      }
      }
  
      //FUNCTION TO UPDATE LAYERS
      function updateMap(layer) {
         var layerMap = layer.getMap();
         if (layerMap) {
            layer.setMap(null);
         } else {
            layer.setMap(map);
         }
      } 
      &lt;/script&gt;
  
      &lt;link href='css/DT_bootstrap.css' rel='stylesheet' type='text/css'&gt;&lt;/link&gt;
  
      &lt;!-- HTML5 shim, for IE6-8 support of HTML5 elements --&gt;
      &lt;!--[if lt IE 9]&gt;
        &lt;script src="../assets/js/html5shiv.js"&gt;&lt;/script&gt;
      &lt;![endif]--&gt;
  
   &lt;/head&gt;
  
    &lt;body&gt;
  
      &lt;div class="navbar navbar-inverse navbar-fixed-top"&gt;
        &lt;div class="navbar-inner"&gt;
          &lt;div class="container-fluid"&gt;
            &lt;button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
            &lt;/button&gt;
            &lt;a class="brand" href="#"&gt;Test Page&lt;/a&gt;
            &lt;div class="nav-collapse collapse"&gt;
              &lt;p class="navbar-text pull-right"&gt;
                Logged in as &lt;a href="#" class="navbar-link"&gt;...&lt;/a&gt;
              &lt;/p&gt;
              &lt;ul class="nav"&gt;
                &lt;li class="active"&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#about"&gt;About&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;&lt;!--/.nav-collapse --&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;body class="container-fluid"&gt;
      &lt;div class="row"&gt;
          &lt;div class="span12" style="float: none; margin: 0 auto;"&gt;
            &lt;body onload="initialize()"&gt;
            &lt;h3&gt;Test Layers&lt;/h3&gt;
              &lt;input type='checkbox' name='system_type17' value='1' onclick="changeMap(this.value);" checked="checked" /&gt;
              &lt;span style="width:100px;display:inline-block;"&gt;Layer 1&lt;/span&gt;
              &lt;input type="checkbox" name="system_type3" value="2" onclick="changeMap(this.value);" checked="checked" /&gt;
              &lt;span style="width:100px;display:inline-block;"&gt;Layer 2&lt;/span&gt;
              &lt;br&gt;&lt;br/&gt;
              &lt;div id="map-canvas" style="height: 575px; width: 1000px;"&gt;&lt;/div&gt;
            &lt;/body&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>What I would like to do is replace var layer1 and layer2 with a single JSON file that I would be able to just query, I'm just unsure how to execute something like this.  For example, a JSON file that would look something like this:</p>
  
  <pre><code>{
      "datapoints": [
          {
              "lat": "38.1513366000",
              "lon": "-97.4341659000",
              "weight": "0",
              "layer":"1"
          },
          {
              "lat": "38.1513748000",
              "lon": "-97.4341125000",
              "weight": "0",
              "layer":"1"
          },
          {
              "lat": "38.1513938000",
              "lon": "-97.4341125000",
              "weight": "0",
              "layer":"1"
          },
          {
              "lat": "38.1493263000",
              "lon": "-97.4339447000",
              "weight": "0",
              "layer":"1"
          },
          {
              "lat": "38.1493339000",
              "lon": "-97.4339447000",
              "weight": "0",
          "layer":"2"
          },
          {
              "lat": "38.1493377000",
              "lon": "-97.4339447000",
              "weight": "0",
              "layer":"2"
          },
          {
              "lat": "38.1483650000",
              "lon": "-97.4358291000",
              "weight": "0",
              "layer":"2"
          },
          {
              "lat": "38.1484031000",
              "lon": "-97.4358062000",
              "weight": "0",
              "layer":"2"
          }
      ]
  }
  </code></pre>
  
  <p>Updated code per Yehia's suggestions:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;meta name="description" content=""&gt;
      &lt;meta name="author" content=""&gt;
  
      &lt;link href='css/bootstrap.css' rel='stylesheet' type='text/css'&gt;&lt;/link&gt;
      &lt;link href='css/bootstrap-responsive.css' rel='stylesheet' type='text/css'&gt;&lt;/link&gt;
  
      &lt;script type='text/javascript' src='js/jquery-1.8.3.js'&gt;&lt;/script&gt;
      &lt;script type='text/javascript' src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false&amp;libraries=visualization&amp;.js"&gt;&lt;/script&gt;
  
      &lt;style type="text/css"&gt;
        body {
          padding-top: 60px;
          padding-bottom: 40px;
        }
        .sidebar-nav {
          padding: 9px 0;
        }
  
        @media (max-width: 980px) {
          /* Enable use of floated navbar text */
          .navbar-text.pull-right {
            float: none;
            padding-left: 5px;
            padding-right: 5px;
          }
        }
      &lt;/style&gt;
  
      &lt;script&gt;
        var map, pointarray, heatmap;
  
        /*var layer1 = [
          {location: new google.maps.LatLng(42.071523,-72.624257), weight:13.747727085},
          {location: new google.maps.LatLng(42.37686,-72.46914), weight:6.6332495807},
          {location: new google.maps.LatLng(42.40524,-72.528427), weight:5.1961524227},
          {location: new google.maps.LatLng(42.383945,-72.511834), weight:1.7320508076},
          {location: new google.maps.LatLng(42.433317,-72.114488), weight:5.6568542495}
        ];
  
        var layer2 = [
          {location: new google.maps.LatLng(41.513113,-74.37616), weight:2.4494897428},
          {location: new google.maps.LatLng(41.147711,-73.941171), weight:10},
          {location: new google.maps.LatLng(41.329376,-74.347207), weight:4.8989794856},
          {location: new google.maps.LatLng(41.338977,-73.987248), weight:1.7320508076}
        ];*/
  
        function initialize() {
          var mapOptions = {
            zoom: 4,
            center: new google.maps.LatLng(38.82, -99.408660),
            mapTypeId: google.maps.MapTypeId.ROADMAP
          };
  
          map = new google.maps.Map(document.getElementById('map-canvas'),
              mapOptions);
        }
  
      //FUNCTION TO CHANGE LAYERS
      function changeMap(layerNum) {
  
      if (layerNum == 1) {
      updateMap(heatmap1);
      }
      if (layerNum == 2) {
      updateMap(heatmap2);
      }
      }
  
      //FUNCTION TO UPDATE LAYERS
      function updateMap(layer) {
         var layerMap = layer.getMap();
         if (layerMap) {
            layer.setMap(null);
         } else {
            layer.setMap(map);
         }
      } 
      &lt;/script&gt;
  
      &lt;link href='css/DT_bootstrap.css' rel='stylesheet' type='text/css'&gt;&lt;/link&gt;
  
      &lt;!-- HTML5 shim, for IE6-8 support of HTML5 elements --&gt;
      &lt;!--[if lt IE 9]&gt;
        &lt;script src="../assets/js/html5shiv.js"&gt;&lt;/script&gt;
      &lt;![endif]--&gt;
  
   &lt;/head&gt;
  
    &lt;body&gt;
  
      &lt;div class="navbar navbar-inverse navbar-fixed-top"&gt;
        &lt;div class="navbar-inner"&gt;
          &lt;div class="container-fluid"&gt;
            &lt;button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
            &lt;/button&gt;
            &lt;a class="brand" href="#"&gt;Test Page&lt;/a&gt;
            &lt;div class="nav-collapse collapse"&gt;
              &lt;p class="navbar-text pull-right"&gt;
                Logged in as &lt;a href="#" class="navbar-link"&gt;...&lt;/a&gt;
              &lt;/p&gt;
              &lt;ul class="nav"&gt;
                &lt;li class="active"&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#about"&gt;About&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;&lt;!--/.nav-collapse --&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;body class="container-fluid"&gt;
      &lt;div class="row"&gt;
          &lt;div class="span12" style="float: none; margin: 0 auto;"&gt;
            &lt;body onload="initialize()"&gt;
            &lt;h3&gt;Test Layers&lt;/h3&gt;
              &lt;input type='checkbox' name='system_type17' value='1' onclick="changeMap(this.value);" checked="checked" /&gt;
              &lt;span style="width:100px;display:inline-block;"&gt;Layer 1&lt;/span&gt;
              &lt;input type="checkbox" name="system_type3" value="2" onclick="changeMap(this.value);" checked="checked" /&gt;
              &lt;span style="width:100px;display:inline-block;"&gt;Layer 2&lt;/span&gt;
              &lt;br&gt;&lt;br/&gt;
              &lt;div id="map-canvas" style="height: 575px; width: 1000px;"&gt;&lt;/div&gt;
            &lt;/body&gt;
          &lt;/div&gt;
      &lt;/div&gt;
        &lt;script type="text/javascript"&gt;
          $.getJSON("testdata.json").then(function(data) {
                $.each(data, function(i,datapoints) {
                  $.each(datapoints, function(j,datapoint) {
                    layers.push({
                      location: new google.maps.LatLng(datapoint.lat, datapoint.lng),
                      weight: datapoint.weight,
                      layerID: datapoint.layer
                    });
                  });
                });
              });
      &lt;script&gt;
  &lt;/body&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Alright, almost there I think.  Thanks so much for your help so far, I know this is painful.  Here is my initialize function, I'm still getting Uncaught ReferenceError: layers is not defined </p>
  
  <pre><code>&lt;script type='text/javascript'&gt;
        var map, pointarray, heatmap;
  
        function initialize() {
  
              function loadData() {
              var layers = [ ];
              $.ajax({
                url: 'testdata.json',
                async: false,
                dataType: 'json',
                success: function (data) {
                  for (var i=0; i&lt;data.datapoints.length; i++) {
                    var datapoint = data.datapoints[i];
                    if (layers[datapoint.layer]===undefined) {
                      layers[datapoint.layer] = [];
                    }
                    layers[datapoint.layer].push({
                      location: new google.maps.LatLng(datapoint.lat, datapoint.lon),
                      weight: datapoint.weight,
                      layerID: datapoint.layer
                    });
                  }
                }
              });
              return layers;
            }
          var mapOptions = {
            zoom: 4,
            center: new google.maps.LatLng(38.82, -99.408660),
            mapTypeId: google.maps.MapTypeId.ROADMAP
          };
  
          map = new google.maps.Map(document.getElementById('map-canvas'),
              mapOptions);
  
          pointArray1 = new google.maps.MVCArray(layers[1]);
          pointArray2 = new google.maps.MVCArray(layers[2]);
  
          heatmap1 = new google.maps.visualization.HeatmapLayer({
            data: pointArray1
          });
          heatmap2 = new google.maps.visualization.HeatmapLayer({
            data: pointArray2
          });
  
          heatmap1.setMap(map);
          heatmap2.setMap(map);
        }
  
      //FUNCTION TO CHANGE LAYERS
      function changeMap(layerNum) {
  
      if (layerNum == 1) {
      updateMap(heatmap1);
      }
      if (layerNum == 2) {
      updateMap(heatmap2);
      }
      }
  
      //FUNCTION TO UPDATE LAYERS
      function updateMap(layer) {
         var layerMap = layer.getMap();
         if (layerMap) {
            layer.setMap(null);
         } else {
            layer.setMap(map);
         }
      } 
      &lt;/script&gt;
  </code></pre>