Plusieurs Google Maps ne fonctionneront pas avec Bootstrap 3 Onglets

Question

J'ai obtenu ce code mais cela ne marchera pas sur Bootstrap 3 Tabs et je n'arrive pas à comprendre quel est le problème! On dirait que les onglets Javascript est le problème mais la console ne montre aucune erreur! Je suis à bout de nerfs pour savoir pourquoi le deuxième onglet ne se charge pas lorsque je mets le code dans l'onglet, mais les deux cartes fonctionnent lorsque je retire de l'onglet.

Comment résoudre ce problème?

CODEPEN with Tab: https://codepen.io/anon/pen/BwzBym 

Voici le HTML:

<div class="row"> 
    <div class="col-sm-3"> 
    <h5>Some Text here</h5> 
    </div> 
    <div class="col-sm-9"> 
    <div class="contactus"> 
     <ul class="nav nav-tabs"> 
     <li class="active"><a data-toggle="tab" href="#registered">Office1</a></li> 
     <li><a data-toggle="tab" href="#branch">Office2</a></li> 
     </ul> 

     <div class="tab-content"> 
     <div id="registered" class="tab-pane fade in active"> 
      <div id="gmap_canvas" style="height:300px;"></div> 
     </div> 
     <div id="branch" class="tab-pane fade"> 
      <div id="gmap_canvas2" style="height:300px;"></div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

Javascript:

function init_map() { 
     var myOptions = { 
      zoom: 10, 
      styles: [{ 
       stylers: [{ 
        saturation: -50 
       }] 
      }], 
      center: new google.maps.LatLng(22.676028, 77.098720), 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var myOptions2 = { 
      zoom: 10, 
      styles: [{ 
       stylers: [{ 
        saturation: -50 
       }] 
      }], 
      center: new google.maps.LatLng(22.843651, 80.949111), 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions); 
     map2 = new google.maps.Map(document.getElementById('gmap_canvas2'), myOptions2); 

     //FIRST MARKER 

     marker1 = new google.maps.Marker({ 
      map: map, 
      position: new google.maps.LatLng(22.676028, 77.098720) 
     }); 
     infowindow1 = new google.maps.InfoWindow({ 
      content: 'Office 1' 
     }); 
     google.maps.event.addListener(marker1, 'click', function() { 
      infowindow1.open(map, marker1); 
     }); 
     infowindow1.open(map, marker1); 


     //SECOND MARKER 

     marker2 = new google.maps.Marker({ 
      map: map2, 
      position: new google.maps.LatLng(22.843651, 80.949111) 
     }); 
     infowindow2 = new google.maps.InfoWindow({ 
      content: 'Office 2' 
     }); 
     google.maps.event.addListener(marker2, 'click', function() { 
      infowindow2.open(map2, marker2); 
     }); 
     infowindow2.open(map2, marker2); 

    } 
    google.maps.event.addDomListener(window, 'load', init_map); 

Lorsque je retire la DIV qui accompagne le script onglet, il fonctionne comme indiqué ci-dessous:

Working CODEPEN without Tab: https://codepen.io/anon/pen/RLRbrp 

Answer 1

L'onglet non affiché est un div pas encore déchirer ered. Vous devez déclencher le rendu de l'onglet de carte de caché avec la fonction de redimensionnement de l'API: ajouter ce qui suit à votre code - il vérifie la rubrique de l'onglet indiqué et déclenche de la carte correspondante redimensionne:

$('.nav-tabs a').on('shown.bs.tab', function(event){ 
    if($(event.target).text() == 'Office2') 
     { 
     google.maps.event.trigger(map2, 'resize'); 
     map2.setCenter(new google.maps.LatLng(22.843651, 80.949111)); 
     } 
    else if($(event.target).text() == 'Office') 
     { 
     google.maps.event.trigger(map, 'resize'); 
     map.setCenter(new google.maps.LatLng(22.676028, 77.098720)); 
     } 
}); 

Code de travail: https://codepen.io/anon/pen/NarKyO