title: Google Map displaying just partially
body: <p>Hello I have this problem, when I load a page with a map that is in a hidden div the map loads just partially, top-left 1/4 of the map, how ever the map render well when it is loaded with the container not hidden.</p>
  
  <p>I prepare this jsFiddle example page:</p>
  
  <p><a href="http://jsfiddle.net/Z5AGP/2/" rel="nofollow">http://jsfiddle.net/Z5AGP/2/</a></p>
  
  <pre><code>$("#toggleAdvanced").click(function(){
      $("#advancedSearch").slideToggle( "fast", function() {
          google.maps.event.trigger(map, 'resize');
      });
  });
  </code></pre>
  
  <p>if you try, click on the "Click" text, and you will see the map just partially loaded, how ever try changing the CSS from #map_wrapper { display: none; }  to #map_wrapper { display: block; } and the map click hiden and show button works perfect.</p>
  
  <p>And as you can see, Im triggering the google.maps.event.trigger(map, 'resize') event after the slide effect so it sould be working... (as told in other quetions I found)</p>
  
  <p>what's wrong? or how can I solve this?</p>