如何在Bootstrap jQuery标签中重新加载谷歌地图

我使用gmaps.js在Bootstrap标签中加载2个地图。会发生什么，是第一个地图加载正常，但是当第二个标签（隐藏）被点击时，地图不能正确加载。经过广泛的谷歌搜索之后，我意识到这与Google地图在点击标签时需要调整大小有关，因为谷歌地图不能很好地隐藏标签。然而，在尝试了很多事情后，我无法实现它的工作。这里是我的小提琴：http://jsfiddle.net/7PueE/如何在Bootstrap jQuery标签中重新加载谷歌地图

/** 
    * 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>' 
       } 
    }); 
});

来源

2014-07-03 Adam Robertson

触发时，标签显示窗口大小调整事件（shown火灾晚于click，当选项卡我一切已经可见）：

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

http://jsfiddle.net/BAm69/

来源

2014-07-03 08:30:47

非常感谢，这工作！ –

@AdamRobertson，我用上面的示例它根本不工作 –

尝试这种方式

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

来源

2014-07-03 04:25:48

谢谢，但没有运气。仍然是同样奇怪的裁剪。 –

如何在Bootstrap jQuery标签中重新加载谷歌地图

回答

相关问题