Javascript 谷歌地图API-如何更改地图高度？

我在我的网站上使用谷歌地图API。我想有一个按钮，可以展开和折叠地图。问题是，如果我以较小的高度加载地图，当我增加高度（通过JS）时，地图不会填充整个区域，而是有一个灰色空间（见下图）。有趣的是，尽管div从200px开始（在CSS中设置），但它下面的映射（扩展后）更大。它有一些价值，我不知道它是从哪里来的

我试着调用“google.maps.event.trigger（map，'resize'）；”，但那没有任何作用

倒塌：

扩大：

这是按下按钮时运行的JS代码：

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:

如果您愿意，可以查看代码。

这已经得到了回答

特别是，不再需要google.maps.event.trigger（映射“resize”），也不再是MapsAPI的一部分

还要检查您是否正在调整映射div的大小，而不是包含映射div的div。

这已得到回答

特别是，不再需要google.maps.event.trigger（映射“resize”），也不再是MapsAPI的一部分

---

还要检查是否正在调整映射div的大小，而不是包含映射div的div。

map未定义。看看链接，你可能想要这个。你是对的。我真不敢相信这个解决方案有多明显。谢谢现在它起作用了。但是，它不适用于动画（过渡）。当我从css中删除这5行时，效果很好。但我也想有动画。地图是未定义的。看看链接，你可能想要这个。你是对的。我真不敢相信这个解决方案有多明显。谢谢现在它起作用了。但是，它不适用于动画（过渡）。当我从css中删除这5行时，效果很好。但我也希望有这样的动画。

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