title: changing the height of the div where google maps is drawn in
body: <p>I'm using Google Mpas Api v3 to display a map in a 200px high div:</p>
  
  <pre><code>&lt;div id='propertyKaart'&gt;&lt;/div&gt;
  </code></pre>
  
  <p>With the normal javascript i'm using this div to display the map:</p>
  
  <pre><code>$(document).ready(function(){
          var map = new google.maps.Map(document.getElementById("propertyKaart"),
                      mapOptions);
                      map.setCenter(punt);
                      map.setZoom(14);
  })
  </code></pre>
  
  <p>With a click on a button with class <code>.mapPuller</code> I want to change the height of the chart to  lets say 600px:</p>
  
  <pre><code>var mapState        
  $('.mapPuller').click(function(e){
          if(mapState == 'klein'){
              $('#propertyKaart').animate({height: '600px'}, 200);
              mapState = 'groot'
  
          }else{
              $('#propertyKaart').animate({height: '200px'}, 200);
              mapState = 'klein';
  
          }
           //---- here
      })
  </code></pre>
  
  <p>Works like a charm, with only one problem. The map (the tiles, so to say) still think the div is 200px high.</p>
  
  <p>In the <a href="https://developers.google.com/maps/documentation/javascript/reference#Map%22documentation%22" rel="nofollow">documentation</a>  I found I had to trigger the resize event when changing the container div. So I added the following code in the .mapPuller function on the <code>//------ here</code> spot.</p>
  
  <pre><code>google.maps.event.trigger(map, 'resize');
  </code></pre>
  
  <p><strong>But this doesn't work......
  Am I missing something?</strong></p>
  
  <p>When I resize my browser window, the event gets triggered and the tiles seem to do their work.....</p>