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

Question

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

我尝试调用＆＃34; google.maps.event.trigger（地图，＆＃39;调整大小＆＃39;）;＆＃34;但那并没有做任何事情。

倒塌：

扩展：

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

ctx.response.set('Content-Security-Policy', 'default-src ...');

CSS：

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

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

Answer 1

已回答here。

尤其是，不再需要google.maps.event.trigger（map，'resize'）或成为Maps API的一部分。

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