Bootstrap选项卡内容中的Google Maps是

Question

我正在尝试将Google地图置于Bootstrap内容标签（this）中。这是我的地图代码：

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

真的，没什么特别的。然而由于某种原因，地图偏向一边，看起来像这样：

如果我尝试移动它，它只是自动修复自己在图片中的半外部。省略bootstrap.css解决了这个问题。将#map_canvas置于内容标签之外也可以解决问题。然而，我无法准确地说出是什么让它搞砸了。

它与max-width问题as suggested here无关，因为我使用的bootstrap是2.3.2，它解决了它并默认包含这些行（将它们添加到我自己的css中没有帮助要么）：

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

我尝试使用chrome开发人员工具并扫描div及其父母，我查看了.tab-content内部bootstrap css，我试着在bootstrap.css中省略了整个img属性，我试过{{来自SO的3}} many other，无济于事。

非常感谢任何帮助。

Answer 1

当我在地图中以自举模式发生这个问题时，我遇到了一个hacky解决方案。

当标签（​​或我的情况下的模态）内容已完成加载调用时：

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

并且可选：

MAP_OBJECT.setCenter(center);

不可否认，短暂的地图看起来就像在你的屏幕截图中那样，看起来很正常。

抱歉，我没有明确的解决方案！

Answer 2

我遇到了同样的问题。如果你绑定shown事件而不是click，约瑟夫的解决方案将有效。

Answer 3

@freakycue是对的。我需要做约瑟夫的答案，但将它绑定到所显示的事件。

最终为我工作的是：

$("#navtabs a").on("shown", function(e) {
    google.maps.event.trigger(MAP_OBJECT, "resize");
});