jquery - modal - tab and pills bootstrap

Cómo volver a cargar Google Map en Bootstrap jQuery Tab

Question

Estoy usando gmaps.js para cargar 2 mapas en pestañas Bootstrap. Lo que ocurre es que el primer mapa se carga bien, pero cuando se hace clic en la segunda pestaña (oculta), el mapa no se carga correctamente. Después de una extensa búsqueda en Google, me doy cuenta de que esto tiene que ver con el mapa de Google que debe cambiar de tamaño al hacer clic en la pestaña, ya que los mapas de Google no funcionan bien con pestañas ocultas. Sin embargo, después de probar muchas cosas, simplemente no puedo hacer que funcione. Aquí está mi violín: 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

Prueba de esta manera

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

Answer 2

desencadenar el resize-event de la ventana cuando se muestra una pestaña (se shown después de click , cuando la pestaña ya está visible):

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

http://jsfiddle.net/BAm69/