title: Resizing Google Maps api v3 DIV with jquery - tiles not refreshing properly
body: <p>I'm using the Google Maps api v3 to create a map which can be resized (the div is expanded and contracted using a jQuery toggle).  Through research I found that I should call google.maps.event.trigger(map, 'resize'); when resizing the map.  I have done so, but I still have problems with the tiles refreshing.</p>
  
  <p>The code I am using is:</p>
  
  <pre><code>&lt;script&gt;
  document.write('&lt;a id="expandMap" href="#" target="_blank" title="Expand the map"&gt;+ expand map&lt;/a&gt;');
  
  /* Expand map_canvas DIV */
  
  jQuery('#expandMap').toggle(function(){
  jQuery('a#expandMap').text('- contract map');
  jQuery('a#expandMap').attr('title', 'Contract the map');
  jQuery('#map_canvas').animate({'height': '600px'}, 750, 'swing');
  google.maps.event.trigger(map, 'resize');
  }, function(){
  jQuery('a#expandMap').text('+ expand map');
  jQuery('a#expandMap').attr('title', 'Expand the map');
  jQuery('#map_canvas').animate({'height': '193px'}, 750, 'swing');
  google.maps.event.trigger(map, 'resize');
  });
  
  /* Expand map_canvas DIV End */
  &lt;/script&gt;
  </code></pre>
  
  <p>Can anyone suggest any ideas? When expanded, if you click the contract button there is a flash where all the tiles are properly visible, so it looks like the resize event is triggered when contracting.  In contracted state, the map works perfectly; panning around all the tiles refresh as they should.</p>
  
  <p>Really appreciate any help with this!</p>
  
  <p>Cheers!</p>