1

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.

I tried calling "google.maps.event.trigger(map, 'resize');" but that doesn't do anything.

Collapsed: enter image description here

Expanded: enter image description here

This is the JS code that is run when the button is pressed:

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');
    }
}

CSS:

/* 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;
  }

If you want, you can have a look at the code here.

Jan Horčička
  • 671
  • 1
  • 11
  • 26
  • map is undefined. looking at the link you probably want this.map – George Nov 07 '17 at 21:05
  • You are right. I can't believe how obvious the solution was. Thanks. Now it works. However, it doesn't work with the animation (transition). When I remove those 5 lines from css, it works fine. But I would like to have that animation too. – Jan Horčička Nov 07 '17 at 21:18

1 Answers1

0

This has been answered here.

In particular, google.maps.event.trigger(map, 'resize') is no longer required or a part of the Maps API.

Also check that you are resizing the map div, and not the div containing the map div.

intotecho
  • 4,925
  • 3
  • 39
  • 54