title: How do I force redraw with Google Maps API v3.0?
body: <p>I have a fairly sophisticated Maps application that handles multiple custom markers and such. I have a function called resizeWindow that I call in a listener to that whenever the screen is changed, the map redraws itself by calculating new bounds and forcing a resize. It looks like this:</p>
  
  <pre><code>window.onresize = function(event) { fitmap(); };
  </code></pre>
  
  <p>and the function to resize is:</p>
  
  <pre><code>function fitmap(id) {
      var coords = [];
      var newlatlng = new google.maps.LatLng(projlat, projlng);
      coords.push(newlatlng);
  
          for (var i=0; i&lt;markers[id].length; i++) {
              newlatlng = new google.maps.LatLng(markers[id][i].latitude, markers[id][i].longitude);
              coords.push(newlatlng);
          }
      }   
  
      var bounds = new google.maps.LatLngBounds ();
      for (var i = 0, LtLgLen = coords.length; i &lt; LtLgLen; i++) {
          bounds.extend (coords[i]);
      }
      map.fitBounds(bounds);
  </code></pre>
  
  <p>and this works great when I actually resize the window. But...</p>
  
  <p>I have a menu going down the right side of the window. I use jquery.animate to move that menu off the screen. I call the fitmap function as a step process (or just once at the end) and it will not redraw the map. </p>
  
  <pre><code>$('#rightSide').animate({ right:"-240px" }, { 
      duration:1000, 
      step: function(now,fx) {
          fitmap();
      } 
  });
  </code></pre>
  
  <p>I have read and read on this and it seems that there is an oddity of Google Maps API v3.0 that redrawing will not happen if nothing actually changes. In this case, my available window does change from screen width - menu to actual full screen. But no redraw happens.</p>
  
  <p>I've tried google.maps.event.trigger(map, 'resize'); and that doesn't work either. </p>
  
  <p>Is there a way to absolutely force Google Maps to redraw? </p>