多个 Google 地图无法与 Bootstrap 3 选项卡一起使用

Question

我得到了这段代码，但它无法在 Bootstrap 3 Tabs 上运行，而且似乎无法弄清楚问题所在！感觉就像 Tabs Javascript 是问题，但控制台没有显示任何错误！

我不知道为什么当我将代码放在选项卡中时第二个选项卡没有加载，但是当我从选项卡中删除时两个地图都可以工作。

我该如何解决这个问题？

CODEPEN with Tab: https://codepen.io/anon/pen/BwzBym

这是 HTML：

<div class="row">
  <div class="col-sm-3">
    <h5>Some Text here</h5>
  </div>
  <div class="col-sm-9">
    <div class="contactus">
      <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#registered">Office1</a></li>
        <li><a data-toggle="tab" href="#branch">Office2</a></li>
      </ul>

      <div class="tab-content">
        <div id="registered" class="tab-pane fade in active">
          <div id="gmap_canvas" style="height:300px;"></div>
        </div>
        <div id="branch" class="tab-pane fade">
          <div id="gmap_canvas2" style="height:300px;"></div>
        </div>
      </div>
    </div>
  </div>
</div>

Javascript：

function init_map() {
        var myOptions = {
            zoom: 10,
            styles: [{
                stylers: [{
                    saturation: -50
                }]
            }],
            center: new google.maps.LatLng(22.676028, 77.098720),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var myOptions2 = {
            zoom: 10,
            styles: [{
                stylers: [{
                    saturation: -50
                }]
            }],
            center: new google.maps.LatLng(22.843651, 80.949111),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);
        map2 = new google.maps.Map(document.getElementById('gmap_canvas2'), myOptions2);

        //FIRST MARKER

        marker1 = new google.maps.Marker({
            map: map,
            position: new google.maps.LatLng(22.676028, 77.098720)
        });
        infowindow1 = new google.maps.InfoWindow({
            content: 'Office 1'
        });
        google.maps.event.addListener(marker1, 'click', function() {
            infowindow1.open(map, marker1);
        });
        infowindow1.open(map, marker1);


        //SECOND MARKER

        marker2 = new google.maps.Marker({
            map: map2,
            position: new google.maps.LatLng(22.843651, 80.949111)
        });
        infowindow2 = new google.maps.InfoWindow({
            content: 'Office 2'
        });
        google.maps.event.addListener(marker2, 'click', function() {
            infowindow2.open(map2, marker2);
        });
        infowindow2.open(map2, marker2);

    }
    google.maps.event.addDomListener(window, 'load', init_map);

当我删除标签脚本附带的 DIV 时，它的工作方式如下所示：

Working CODEPEN without Tab: https://codepen.io/anon/pen/RLRbrp

Answer 1

未显示的选项卡是尚未呈现的 div。您需要使用 API 中的 resize 函数触发隐藏选项卡地图的呈现：将以下内容添加到您的代码中 - 它检查显示选项卡的标题并触发相应地图的 调整大小：

$('.nav-tabs a').on('shown.bs.tab', function(event){
   if( $(event.target).text() == 'Office2')
       {
         google.maps.event.trigger(map2, 'resize');
         map2.setCenter( new google.maps.LatLng(22.843651, 80.949111) );
       }
   else if( $(event.target).text() == 'Office')
       {
         google.maps.event.trigger(map, 'resize');
         map.setCenter( new google.maps.LatLng(22.676028, 77.098720) );
       }
});

工作代码笔：https://codepen.io/anon/pen/NarKyO