title: Google Maps don't render the whole map upon full screen
body: <p>I'm having some problems with the resize of the Google Maps JavaScript API v3. If I set the CSS "parameters" right on load (just in the <a href="https://developers.google.com/maps/documentation/javascript/tutorial#HelloWorld" rel="nofollow noreferrer">documentation</a>) the map will show 100% height and width - no problem. But when I try to get the same result by clicking on a link it's not showing the whole map.</p>
  
  <p><img src="https://i.stack.imgur.com/HcZgY.jpg" alt="This is how the map shows upon click on the link to toggle full screen"></p>
  
  <p>I have tested both <code>css()</code> and <code>toggleClass()</code> in jQuery on this event. <code>toggleClass()</code> makes the map goes invisible (hides the map completely rather than makes it full screen) with this code:</p>
  
  <pre><code>// jQuery
  $('#weather-map').toggleClass('test');
  
  // CSS
  #weather-map.test {
      height : 100%;
      width : 100%;
      top : 0;
      left : 0;
      position : absolute;
      z-index : 200;
  }
  </code></pre>
  
  <p><code>css()</code> works (the map goes full screen) but the image above shows how the map renders upon full screen:</p>
  
  <pre><code>$('#weather-map').css({
                         'height' : '100%',
                         'width' : '100%',
                         'top' : '0',
                         'left' : '0',
                         'position' : 'absolute',
                         'z-index' : '200'
                        });
  </code></pre>
  
  <p>I wonder now, why does it act like this? Have I missed something or is this method not the right one to toggle full screen of the map?</p>
  
  <p>Thanks in advance.</p>