如何在Bootstrap jQuery标签中重新加载谷歌地图 [英] How to reload Google Map in Bootstrap jQuery Tab

问题描述

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

I'm using gmaps.js to load 2 maps in Bootstrap tabs. What happens, is the first map loads fine, but when the second tab (hidden) is clicked, the map doesn't load properly. After extensive Googling, I realize that this has to do with the Google map needing to be resized upon the click of the tab, as Google maps don't play nicely with hidden tabs. However, after trying many things, I just can't get it to work. Here's my fiddle: 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>'
              }
    });
});

推荐答案

触发窗口的resize事件显示 （显示晚于点击时触发，当该选项卡已经可见时）：

trigger the resize-event of the window when a tab is shown(shown fires later than click, when the tab is already visible):

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

http://jsfiddle.net/BAm69/

这篇关于如何在Bootstrap jQuery标签中重新加载谷歌地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！