关于CSS：Bootstrap标签内容内的Google Maps


Google Maps inside Bootstrap tab-content are

我正在尝试将Google Map放在Bootstrap内容标签中(此)。这是我的地图代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
#map_canvas {
    width: 500px;
    height: 400px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false">

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

这是我放置map_canvas div的地方：

1
2
3
4
5
6
7
8
9
10
11
12
    ...other divs here...

   
     
         
          ...blablabla a form here...
         
         
         
<ul>
...contact info...
</ul>

这是div的代码：

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

真的，没什么特别的。但是由于某种原因，地图偏向侧面，看起来像这样：

enter

它与此处建议的最大宽度问题无关，因为我使用的Bootstrap是2.3.2，它解决了该问题并默认包含了这些行(将它们添加到我自己的CSS中不会帮助之一)：

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

我尝试使用chrome开发人员工具并扫描div及其父级，我在bootstrap css中浏览了.tab-content，我尝试省略了bootstrap.css中的img属性的全部内容，并尝试了许多其他解决方案所以，无济于事。

任何帮助将不胜感激。

相关讨论

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

相关讨论

当我的地图以自举模式出现时，我有一个针对此问题的解决方案。

当的标签(或在我的情况模态)的内容加载完成呼叫：

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

并且可选：

1
MAP_OBJECT.setCenter(center);

诚然，一会儿地图看起来像它在屏幕截图中的样子，然后看起来很正常。

对不起，我没有确定的解决方案！

相关讨论

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

这就是为我工作的结果：

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