如何在 Bootstrap jQuery 选项卡中重新加载谷歌地图

Question

我正在使用 gmaps.js 在 Bootstrap 选项卡中加载 2 个地图。发生的情况是，第一个地图加载正常，但是当第二个选项卡（隐藏）被单击时，地图无法正确加载。经过广泛的谷歌搜索，我意识到这与谷歌地图需要在点击选项卡时调整大小有关，因为谷歌地图不能很好地与隐藏的选项卡配合使用。但是，在尝试了很多事情之后，我就是无法让它工作。这是我的小提琴：http://jsfiddle.net/7PueE/

/**
  * Fort Collins Map
  */
$(document).ready(function () {
map = new GMaps({
  div: '#fort-collins-map',
  lat: 40.574859,
  lng: -105.056756,
  width: '100%',
          height: '500px',
          scrollwheel: false,
    });
    map.addMarker({
      lat: 40.574859,
      lng: -105.056756,
      title: 'Fort Collins Office',
              infoWindow: {
                content: '<div class="bubble-wrap"><p class="office">Fort Collins Office</p><p>1120 E. Elizabeth St.</p><p>Suite F-101</p><p>Fort Collins, CO 80524</p><a href="https://www.google.com/maps/dir//1120+E+Elizabeth+St,+Fort+Collins,+CO+80524/@40.5748591,-105.0567559,17z/data=!4m13!1m4!3m3!1s0x87694ae0b3695899:0x5510539035305077!2s1120+E+Elizabeth+St!3b1!4m7!1m0!1m5!1m1!1s0x87694ae0b3695899:0x5510539035305077!2m2!1d-105.0567559!2d40.5748591">Directions</a></div>'
              }
    });
});
/**
  * Loveland Map
  */
$(document).ready(function () {
map = new GMaps({
  div: '#loveland-map',
  lat: 40.431917,
  lng: -105.078848,
  width: '100%',
          height: '500px',
          scrollwheel: false,
    });
    map.addMarker({
      lat: 40.431917,
      lng: -105.078848,
      title: 'Loveland Office',
              infoWindow: {
                content: '<div class="bubble-wrap"><p class="office">Loveland Office</p><p>3820 N. Grant Ave.</p><p>Loveland, CO 80538</p><a href="https://www.google.com/maps/dir//3820+N+Grant+Ave,+Loveland,+CO+80538/@40.4319173,-105.0788668,17z/data=!4m13!1m4!3m3!1s0x8769528a066dd4ad:0x2b893ca80de0bd33!2s3820+N+Grant+Ave!3b1!4m7!1m0!1m5!1m1!1s0x8769528a066dd4ad:0x2b893ca80de0bd33!2m2!1d-105.0788668!2d40.4319173">Directions</a></div>'
              }
    });
});

Answer 1

当标签页显示时触发窗口的调整大小事件（shown 触发晚于click，当标签页已经可见时）：

$('.nav-tabs').on('shown.bs.tab', function () {
    google.maps.event.trigger(window, 'resize', {});
});

http://jsfiddle.net/BAm69/

Answer 2

试试这个方法

http://jsfiddle.net/7PueE/

<li onclick="loadmap()"><a href="#loveland" id="tab2" role="tab" data-toggle="tab">Loveland</a></li>

function loadmap() {
    var nmap = new GMaps({
        div: '#loveland-map',
        lat: 40.431917,
        lng: -105.078848,
        width: '100%',
        height: '500px',
        scrollwheel: false,
    });
    nmap.addMarker({
        lat: 40.431917,
        lng: -105.078848,
        title: 'Loveland Office',
        infoWindow: {
            content: '<div class="bubble-wrap"><p class="office">Loveland Office</p><p>3820 N. Grant Ave.</p><p>Loveland, CO 80538</p><a href="https://www.google.com/maps/dir//3820+N+Grant+Ave,+Loveland,+CO+80538/@40.4319173,-105.0788668,17z/data=!4m13!1m4!3m3!1s0x8769528a066dd4ad:0x2b893ca80de0bd33!2s3820+N+Grant+Ave!3b1!4m7!1m0!1m5!1m1!1s0x8769528a066dd4ad:0x2b893ca80de0bd33!2m2!1d-105.0788668!2d40.4319173">Directions</a></div>'
        }
    });
}