css - Bootstrap 选项卡内容中的 Google map 是

Question

我正在尝试将 Google map 放入 Bootstrap 内容选项卡 ( this )。这是我的 map 代码:

<style>
#map_canvas {
    width: 500px;
    height: 400px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
function initialize() {
    var map_canvas = document.getElementById('map_canvas');
    var mapOptions = {
      center: new google.maps.LatLng(44.5403, -78.5463),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(map_canvas, mapOptions);
};

google.maps.event.addDomListener(window, 'load', initialize);
</script>

这是我放置 map_canvas div 的地方:

<div class="tab-content">
    ...other divs here...

    <div class='tab-pane fade' id='contact'>
     <div class="row">
         <div id="send_email" class='span4 pull-right'>
          ...blablabla a form here...
         </div>
         <div id="information" class='span8'>
         <ul>...contact info...</ul>
         <div id="map_canvas"></div>       
     </div>
    </div>
</div>

这是 div 的代码:

$('#navtabs a').click(function (e) {
  e.preventDefault();
  $(this).tab('show');
});

真的，没什么特别的。然而由于某种原因， map 偏离了一边，看起来像这样:

如果我尝试移动它，它会自动将自己固定在半个外面，就像图片中那样。省略 bootstrap.css 解决了这个问题。将 #map_canvas 放在内容选项卡之外也可以解决问题。但是我不能确切地说出是什么搞砸了。

它与最大宽度问题无关as suggested here ，因为我使用的是 bootstrap is 2.3.2，它解决了它并默认包含这些行(将它们添加到我自己的 css 也无济于事):

#map_canvas img,
.google-maps img {
  max-width: none !important;
}

我尝试使用 chrome 开发人员工具并扫描 div 及其父项，我检查了 bootstrap css 中的 .tab-content，我尝试省略了 bootstrap 中的所有 img 属性。 css，我试过了many other solutions从 SO 开始，无济于事。

如有任何帮助，我们将不胜感激。

Answer 1

当我的 map 在 Bootstrap 模式中发生这种情况时，我有一个针对此问题的 hacky 解决方案。

当Tab(或我的情况下的模式)内容完成加载调用时:

 google.maps.event.trigger(MAP_OBJECT, "resize");

并且可选:

MAP_OBJECT.setCenter(center);

无可否认，该 map 暂时看起来与您的屏幕截图中的一样，然后看起来很正常。

抱歉，我没有适合您的最终解决方案!