谷歌地图干扰了Twitter Bootstrap

Question

我有一个页面,我使用bootstrap,我添加了一个地图(API v3).

它起初工作正常,但是当我折叠地图时 - 我无法重新打开它.

我查看了类似的SO问题,但找不到解决这个问题.

我的HTML:

<div id="mapHeader" data-toggle="collapse" data-target="#map">
    Header
</div>
<div id="map" class="collapse in">
    <div id="map_canvas"></div>
</div>

CSS:

#map_canvas { height: 100% }
#map {height: 30em; width: 50%;max-height:100%;}

Javascript只加载地图.

一个小提琴演示

似乎相关,但我无法实现相同的解决方案

Answer 1

问题是bootstrap collapse插件没有为你的地图画布注册一个维度,所以它不知道将它扩展到什么高度.要解决此问题,请添加一些尺寸,#map_canvas以便:

#map_canvas { height: 30em; width: 100%; }

编辑:如下面的OP所述,#map_canvas容器上需要特定的高度以允许可折叠容器的正确扩展.