title: Animated heatmap with new data sets
body: <p>I have created a simple heatmap (using google maps api v3), into which I would like to add an element of basic animation.</p>
  
  <p>I have a number of collections of datapoints, each collection representing a time period (say 30 minutes). </p>
  
  <p>I want to "replay" the heatmaps corresponding to one collection of data, followed by the next collection, and the next, and so on. Almost like replaying video frames.</p>
  
  <p>I have tried doing this with an MVCArray, which I clear and update with the new datapoints. Something like this</p>
  
  <pre><code>data = new google.maps.MVCArray(datapoints);
  </code></pre>
  
  <p>then after a few seconds:</p>
  
  <pre><code>for (i=0;i&lt;data.getLength();i++){
          data.removeAt(i);
      }
  </code></pre>
  
  <p>This does not work, because the new heatmap data will simply be added ontop of the old heatmap in the browser, even though the data array was succesfully cleared. </p>
  
  <p>This problem, and a basic solution is described here:
  <a href="https://stackoverflow.com/questions/14104547/remove-heatmaplayer-from-google-maps">Remove HeatmapLayer from google maps</a></p>
  
  <p>The solution is to clear the heatmap using:</p>
  
  <pre><code>heatmap.setMap(null)
  </code></pre>
  
  <p>However, this does not work for me, since this will completely clear the heatmap, and leave the map empty for a second or two. That is to say, the animation effect is lost. </p>
  
  <p>Any suggestions out there on what I could do?</p>