title: Updating existing heatmap in Google Maps API V3 giving TypeError: g[b.x] is undefined
body: <p>I have the following code, which will load the map fine first go, however, any further "runHeatmap()" calls error:</p>
  
  <p><strong>This is the error from Firbug (firefox):</strong></p>
  
  <p>TypeError: g[b.x] is undefined</p>
  
  <p><a href="https://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/14/0/%7Bmain,visualization%7D.js/eval/seq/6" rel="nofollow noreferrer">https://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/14/0/%7Bmain,visualization%7D.js/eval/seq/6</a></p>
  
  <p>Line 3</p>
  
  <p><strong>This is the error from Chrome:</strong></p>
  
  <p>Uncaught TypeError: Cannot read property 'NaN' of undefined</p>
  
  <p>(anonymous function)</p>
  
  <p>H.forEach %7Bmain,visualization%7D.js:28</p>
  
  <p>EQ</p>
  
  <p>TQ</p>
  
  <p>H.aa</p>
  
  <p>(anonymous function) %7Bmain,visualization%7D.js:34</p>
  
  <p><strong>The code:</strong></p>
  
  <pre><code>var map = null, heatmap = null, heatmapData = [];
  
  map = new google.maps.Map(document.getElementById('map'), {
      center: new google.maps.LatLng(20, 12),
      zoom: 3,
      mapTypeId: google.maps.MapTypeId.SATELLITE
  });
  
  function runHeatmap() {
      var pointArray = new google.maps.MVCArray(heatmapData);
      if (!heatmap) {
          heatmap = new google.maps.visualization.HeatmapLayer({
              data: pointArray,
              map: map
          });
      } else {
          heatmap.setData(pointArray);
      }
  }
  
  //receives [["34.3565","-29.23434"],["-3.4857","64.3984"]]
  socket.on('coordArr', function(d){
      if (d.length &gt; 0) {
          var i=0;
          while(i &lt; d.length) {
              var lat = d[i][0].trim();
              var lng = d[i][1].trim();
              heatmapData.push(new google.maps.LatLng(lat,lng));
              i++;
          }
          runHeatmap();
      }
  });
  
  //receives ["-8.284374","94.2837"]
  socket.on('coord', function (d) {
      var lat = d[0].trim();
      var lng = d[1].trim();
      heatmapData.push(new google.maps.LatLng(lat,lng));
      runHeatmap();
  });
  </code></pre>
  
  <ol>
  <li>The google map with satellite loads fine.</li>
  <li>When the socket is opened the browser receives 'coordArr' event and that data pushes properly and generates the heatmap looking like this:
  <img src="https://i.stack.imgur.com/tXHu3.jpg" alt="enter image description here"></li>
  <li>The socket then receives the 'coord' event and the correct data when that function calls "runHeatmap();" it causes the error.</li>
  </ol>
  
  <p>Should I be destroying the heatmap and re-writing it? It seems rather resource wasteful, am I just using the wrong method for updating an existing heatmap?</p>