Bootstrap 3导航栏中的谷歌地图答案

【问题标题】：Google Maps in Navbar in Bootstrap 3Bootstrap 3导航栏中的谷歌地图
【发布时间】：2013-11-02 11:01:28
【问题描述】：

我刚刚从 Bootstrap 2 迁移到 Bootstrap 3。我知道在 Bootstrap 中显示 Google 地图很棘手，我花了一段时间才让它与 Bootstrap 2 一起工作，但现在我又迷路了。

有关于这个主题的相关问题，参见例如以下链接，但可以看出问题似乎是多层次的，因为答案差异很大：

Showing a Google Map in a modal created with Twitter Bootstrap

Bootstrap 3.0 and Google maps javascript API V3 styling

我认为我的代码很标准：

<nav class="navbar navbar-default navbar-fixed-bottom visible-xs" role="navigation">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#lowerNavBar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>
    <div class="collapse navbar-collapse  visible-xs" id="lowerNavBar">
        <ul class="nav navC navbar-nav">
            <li id ="listTab" class="active"><a href="#listTabContent" data-toggle="tab">List</a></li>
            <li id ="mapTab"><a href="#mapTabContent" data-toggle="tab">Map</a></li>
        </ul>
    </div>
</nav>

<div class="tab-content">
    <div class="tab-pane active" id="listTabContent">
        <div class="container" id="postsGoHere">
        </div>
    </div>
    <div class="tab-pane" id="mapTabContent">
        <div id="mapCanvas" class="google-map-canvas"></div>
    </div>
</div>

所以，我的问题是：要达到地图正确显示的地步，究竟需要做什么？我在绝缘和一起尝试了上述两种解决方案，但没有可用。我目前的结果是“灰色框”，屏幕左上角显示了部分地图。

【问题讨论】：

标签： google-maps twitter-bootstrap-3

【解决方案1】：

我终于找到了可行的方法：

$("#mapTab").on("shown.bs.tab", function () {
    var center = map.getCenter();
    google.maps.event.trigger(map, "resize");
    map.setCenter(center);
});

Bootstrap 2 和 Bootstrap 3 的区别在于需要将事件从“shown”改为“shown.bs.tab”。

【讨论】：

【解决方案2】：

$(".navbar-toggle").on("click", function () {       
    setTimeout(
      function() 
      {
        initialize();
      }, 500);
});

【讨论】：