Comment recharger Google Map dans Bootstrap Onglet jQuery

Question

J'utilise gmaps.js pour charger 2 cartes dans les onglets Bootstrap. Ce qui se passe, c'est que la première carte se charge bien, mais lorsque le deuxième onglet (caché) est cliqué, la carte ne se charge pas correctement. Après de nombreuses recherches sur Google, je me rends compte que cela a à voir avec la carte Google qui doit être redimensionnée sur le clic de l'onglet, car les cartes Google ne jouent pas bien avec des onglets cachés. Cependant, après avoir essayé beaucoup de choses, je ne peux tout simplement pas le faire fonctionner. Voici mon violon: 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

déclencheur redimensionné événement de la fenêtre lorsqu'un onglet est montré (shown incendies plus tard que click, lorsque l'onglet i s déjà visible):

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

http://jsfiddle.net/BAm69/

Answer 2

Essayez cette façon

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