谷歌地圖干擾Twitter的引導程序

我有一個頁面上我使用引導，我添加了一個地圖（API v3）。谷歌地圖干擾Twitter的引導程序

它起初工作正常，但當我摺疊地圖 - 我無法重新打開它。

我已經看過類似的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只加載地圖。

A fiddle to demonstrate

來源

2012-11-25 JNF

嘗試在控制檯中觸發resize事件並查看是否修復了它：google.maps.event.trigger（$（'＃map_canvas'）[0]，'resize'）' – Oliver

Thanks @Oliver，but that沒有工作。 – JNF

的問題是，引導崩潰插件未註冊爲您的地圖畫布的尺寸，因此不知道將它擴大到什麼高度。爲了解決這個問題，添加一些尺寸您#map_canvas像這樣：

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

編輯：作爲OP下面的評論，需要#map_canvas容器上的具體高度，以使摺疊集裝箱的正確擴展。

來源

2012-11-25 15:34:36

我永遠不會想到它。您應該編輯以強調*特定*高度是需要的，而不是我在那裏的百分比。 – JNF

@JNF編輯了我的答案，很高興幫助你！ –

你還可以解釋爲什麼當#map_canvas有文本並且沒有初始化爲地圖時它工作 - 即使使用相同的CSS？ – JNF

谷歌地圖干擾Twitter的引導程序

回答

相關問題