Bootstrap 选项卡内容中的谷歌地图是答案

【问题标题】：Google Maps inside Bootstrap tab-content areBootstrap 选项卡内容中的谷歌地图是
【发布时间】：2014-01-05 20:14:33
【问题描述】：

我正在尝试将 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 放在内容选项卡之外也可以解决问题。然而，我不能确切地说出是什么搞砸了。

这与最大宽度问题as suggested here 无关，因为我使用的引导程序是 2.3.2，它解决了它并默认包含这些行（将它们添加到我自己的 css 也无济于事）：

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

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

任何帮助将不胜感激。

【问题讨论】：

这篇文章可能会解决你的问题：stackoverflow.com/questions/20746698/…
拯救了我的一天。谢谢@MarcellinoBommezijn

标签： css google-maps twitter-bootstrap

【解决方案1】：

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

当Tab（或案例中的模态）内容完成加载呼叫：

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

并且可选：

MAP_OBJECT.setCenter(center);

诚然，地图在短时间内看起来与屏幕截图中的一样，然后看起来很正常。

抱歉，我没有为您提供明确的解决方案！

【讨论】：

正如我在问题中也提到的，我已经尝试过（在您回答后再次尝试），但它对我不起作用。无论如何，感谢您的尝试，但请注意，问题显然与 css 相关，并且 与 javascript 无关
原来它与 css 无关。我只是没有将它绑定到正确的事件

【解决方案2】：

我遇到了同样的问题。如果您绑定到shown 事件而不是click，Joseph 的解决方案将起作用。

【讨论】：

将shown 事件绑定到什么？到setCenter 或$(this).tab('show');？
你是对的。我花了很长时间才到达那里，因为这是一个我有点放弃的项目，但她吹了。我给了@JosephFeeney 正确答案，因为他回答了这个问题。不过你得到了 +1，谢谢！

【解决方案3】：

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

这就是最终对我有用的东西：

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

【讨论】：