Google map w/ circle that changes every second?
<p>How do I create a google map with a circle whose center changes every 
second? I tried the below: (also at 
<a href="http://test.barrycarter.info/sunstuff2.html" rel="nofollow">http://test.barrycarter.info/sunstuff2.html</a>) </p>

<pre><code>&lt;!DOCTYPE html&gt; 
&lt;html&gt; 
&lt;head&gt; 
&lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no" /&gt; 
&lt;style type="text/css"&gt; 
  html { height: 100% } 
  body { height: 100%; margin: 0px; padding: 0px } 
  #map_canvas { height: 100% } 
&lt;/style&gt; 
&lt;script type="text/javascript" 
    src="http://maps.google.com/maps/api/js?sensor=false"&gt; 
&lt;/script&gt; 
&lt;script type="text/javascript"&gt; 

function updateJ () { 
 j = j+0.5; 
 x.center = new google.maps.LatLng(j,0); 
} 

function initialize() { 
  var myLatLng = new google.maps.LatLng(0,0); 
  var myOptions = {zoom:2,  
    center: myLatLng, 
    mapTypeId: google.maps.MapTypeId.TERRAIN 
  }; 

  var map = new google.maps.Map(document.getElementById("map_canvas"), 
      myOptions); 

j = 20.18 

x = new google.maps.Circle({ 
 center: new google.maps.LatLng(j,-18.5037550725315), 
 radius: 10018760, 
 map: map, 
 strokeWeight: 2, 
 fillOpacity: 0.2, 
 fillColor: "#ffffff" 
}); 

} 

&lt;/script&gt; 
&lt;/head&gt; 
&lt;body onload="initialize(); updateJ(); setInterval('updateJ()', 1000)"&gt; 
  &lt;div id="map_canvas" style="width:100%; height:100%"&gt;&lt;/div&gt; 
&lt;/body&gt; 
&lt;/html&gt; 
</code></pre>

<p>Firebug confirms that 'j' increases every second, but this line: </p>

<pre><code>x.center = new google.maps.LatLng(j,0); 
</code></pre>

<p>does nothing. Is there a google.maps.PleaseRedrawThisObjectBecauseIHaveChangedStuff method? </p>
