title: Google maps API - how to change map height?
body: <p>I am using Google Maps API on my website. I want to have a button that expands and collapses the map. The problem is that if I load the map with small height, when I increase the height (via JS), the map doesn't fill the whole area and there is instead a gray space (see pic below). Interesting is that although the div starts at 200px (as set in CSS), the map below it (after expansion) is bigger. It has some value that I don't know from where it got it.</p>
  
  <p>I tried calling "google.maps.event.trigger(map, 'resize');" but that doesn't do anything.</p>
  
  <p>Collapsed: <a href="https://i.stack.imgur.com/76o54.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/76o54.jpg" alt="enter image description here"></a></p>
  
  <p>Expanded: <a href="https://i.stack.imgur.com/kWDHP.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kWDHP.jpg" alt="enter image description here"></a></p>
  
  <p>This is the JS code that is run when the button is pressed:</p>
  
  <pre><code>changeMapSize(btn) {
      if (this.size === 'expanded') {
          this.css('height', '200px');
          google.maps.event.trigger(map, 'resize');
          this.size = 'collapsed';
          btn.text('Expand map');
      }
      else {
          this.css('height', '400px');
          google.maps.event.trigger(map, 'resize');
          this.size = 'expanded';
          btn.text('Hide map');
      }
  }
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>/* Always set the map height explicitly to define the size of the div
     * element that contains the map. */
     #map {
      height: 200px;
      -moz-transition: height .5s;
      -ms-transition: height .5s;
      -o-transition: height .5s;
      -webkit-transition: height .5s;
      transition: height .5s;
    }
    /* Optional: Makes the sample page fill the window. */
    html, body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </code></pre>
  
  <p>If you want, you can have a look at the code <a href="http://gmaps.ipdive.com/" rel="nofollow noreferrer">here</a>.</p>