title: How do I custom animate a groundoverlay Icon on google map API v3
body: <p>I am trying to animate a ground overlay Icon by constantly refreshing it.. so basically this is the idea I am trying to implement.
  1. I have a .png file which I created using masking in PIL (python Image Library)
  2. I constantly update the .png file with my python script after every 10secs to change some features(it's an analogue meter so i am basically moving the indicator every 10secs
  3. I have a KML file that I use to overlay the .png file into google maps.
  4. I was hoping to use the refresh mode in KML to change the .png file after every say 10 seconds or whenever the .png file is changed. I know i can't use refreshmode onInterval for icons, but i have not had any success with refresh onChange or onExpire...
  I don't know what I am doing wrong, and this project is kind of urgent for me.. I have attached my .kml file</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;kml xmlns="http://www.opengis.net/kml/2.2"&gt;
    &lt;Folder&gt;
      &lt;name&gt;Meter Overlays&lt;/name&gt;
      &lt;description&gt;Examples of ground overlays&lt;/description&gt;
      &lt;GroundOverlay&gt;
        &lt;name&gt;Large-scale overlay on terrain&lt;/name&gt;
        &lt;description&gt;Overlay shows Mount Etna erupting 
            on July 13th, 2001.&lt;/description&gt;
        &lt;Icon&gt;
      &lt;href&gt;http://dl.dropbox.com/u/20943178/meter_one.png?version=1.x&lt;/href&gt;
      &lt;refreshMode&gt;onChange&lt;/refreshMode&gt;
      &lt;refreshInterval&gt;10&lt;/refreshInterval&gt;
      &lt;viewBoundScale&gt;0.45&lt;/viewBoundScale&gt;
        &lt;/Icon&gt;
        &lt;LatLonBox&gt;
          &lt;north&gt;41.044967&lt;/north&gt;
          &lt;south&gt;38.869125&lt;/south&gt;
          &lt;east&gt;-121.699475&lt;/east&gt;
          &lt;west&gt;-124.375317&lt;/west&gt;
          &lt;rotation&gt;0&lt;/rotation&gt;
        &lt;/LatLonBox&gt;
      &lt;/GroundOverlay&gt;
    &lt;/Folder&gt;
  &lt;/kml&gt;
  </code></pre>
  
  <p>the Icon shows on the google map, but it does not change every 10secs like i want it to.. i have to refresh the whole page to get it to change, which kind of defeats the purpose of my work... my html script is in javascript which I am also new to... I am making the kml overlay with the following lines</p>
  
  <pre><code>var myParser = new google.maps.KmlLayer('http://dl.dropbox.com/u/20943178/meter.kml');
  myParser.setMap(map);
  </code></pre>
  
  <p>UPDATE:</p>
  
  <p>In my attempt to use AJAX to resolve my problem, I have been reading a lot of HTML, Javascript and AJAX... I came across this example online, and i tried to modify it slight to see how it works. However, for no apparent reason the map will not even load.... Can any body help me understand why this code will not load?</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Untitled&lt;/title&gt;
  &lt;META HTTP-EQUIV="Pragma" CONTENT="no-cache"&gt;
  &lt;META HTTP-EQUIV="Refresh" CONTENT="1000"&gt;
  &lt;meta http-equiv="content-type" content="text/html; charset=iso-8859-1"&gt;
  
  &lt;style&gt;
    #map_canvas { width: 1000px; height: 800px; }
  &lt;/style&gt;
  
  
  &lt;script type="text/javascript" src="http://www.google.com/jsapi?key=AIzaSyCoXqj2n1HGv58B4aImyVa7cbKYuNc4vag&amp;sensor=false"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  //google.load("maps", "2.x");
  var map;
  
  
  function initialize() {
      map = new google.maps.Map(document.getElementById('map_canvas'));
      map.setCenter(new google.maps.LatLng(36, -120),5);
      mapTypeId: google.maps.MapTypeId.ROADMAP
  
      downloadUrl('GET', 'http://dl.dropbox.com/u/20943178/test.xml', function(data) {
      var xmlDoc = data.responseXML;
      var markers = xmlDoc.documentElement.getElementsByTagName("marker");
      for (var i = 0; i &lt; markers.length; i++){
      var point = new google.maps.LatLng(parseFloat(markers.[i].getAttribute("lat")),
      parseFloat(markers.[i].getAttribute("lng")));
      var marker = new google.maps.Marker( {
      map:map, 
      position: point
                  });
              }
          });
  
       }
  
  
  function downloadUrl(url, callback) {
   var request = window.ActiveXobject ?
      new ActiveXObject('Microsoft.XMLHTTP'):
      new XMLHttpRequest;
  
   request.onreadystatechange = function(){
   if (request.readychange = doNothing;
   callback(request, request.status);
     }
   };
  
   request.open('GET', url, true);
   request.send(null);
  
   function doNothing() {}
  
  
  &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body onload="initialize()" &lt;!--onunload="GUnload()"--&gt;&gt;
  
  &lt;div id="map_canvas"&gt;&lt;/div&gt;
  
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>