Google 地图 API - 如何更改地图高度？答案

【问题标题】：Google maps API - how to change map height?Google 地图 API - 如何更改地图高度？
【发布时间】：2018-04-20 09:32:56
【问题描述】：

我在我的网站上使用 Google Maps 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：

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

如果需要，可以查看代码here。

【问题讨论】：

地图未定义。查看您可能想要的链接this.map
你是对的。我无法相信解决方案是如此明显。谢谢。现在它起作用了。但是，它不适用于动画（过渡）。当我从 css 中删除这 5 行时，它工作正常。但我也想要那个动画。

标签： javascript css google-maps-api-3

【解决方案1】：

已回答here。

特别是，google.maps.event.trigger(map, 'resize') 不再是必需的，也不再是 Maps API 的一部分。

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

【讨论】：