Google Maps and Bootstrap tabs, but with a 3rd party Map Generator

Question

I'm aware that GoogleMap has some glitch with Bootstrap hidden tabs and a triggered resize is required (google.maps.event.trigger(map, 'resize');)

I'm using a 3rd party Map Generator for ease of use, and of course I have those glitches too: in short, Google Map is not even displayed on Bootstrap hidden tab (it's just not misaligned: it doesn't show at all): here it is

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!--Google Map Generator scripts-->
<script src="//maps.googleapis.com/maps/api/js?key=AIzaSyA222wozVyNudm3i0A2Tr_Vlmh_RipQ284"></script>
<script src="//www.map-generator.org/map/iframejs/65305168-032a-400b-9698-f5c2fcba4477?key=AIzaSyA222wozVyNudm3i0A2Tr_Vlmh_RipQ284&amp;width=100%&amp;height=200px"></script>

<!--Core JS-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="container">
  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#map" aria-controls="map" role="tab" data-toggle="tab">Map</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">
      <p>This is the original shown tab: Map pane is hidden, so Google Map doesn't work well</p>
    </div>
    <div role="tabpanel" class="tab-pane" id="map">
      <p>The map doesnt even show (except the map frame)</p>
      <div id="mapid-65305168-032a-400b-9698-f5c2fcba4477"></div>
    </div>
  </div>
</div>

With the previous google.maps.event.trigger(map, 'resize'); the Map is shown but... misaligned: like this

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!--Google Map Generator scripts-->
<script src="//maps.googleapis.com/maps/api/js?key=AIzaSyA222wozVyNudm3i0A2Tr_Vlmh_RipQ284"></script>
<script src="//www.map-generator.org/map/iframejs/65305168-032a-400b-9698-f5c2fcba4477?key=AIzaSyA222wozVyNudm3i0A2Tr_Vlmh_RipQ284&amp;width=100%&amp;height=200px"></script>

<!--Core JS-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script>
$(document).ready(function(){
  $('[href="#map"]').on('shown.bs.tab', function() {
      google.maps.event.trigger(map65305168032a400b9698f5c2fcba4477, 'resize');
  });
});
</script>

<div class="container">
  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#map" aria-controls="map" role="tab" data-toggle="tab">Map</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">
      <p>This is the original shown tab: Map pane is hidden, so Google Map doesn't work well</p>
    </div>
    <div role="tabpanel" class="tab-pane" id="map">
      <p>The map is here, but misaligned...</p>
      <div id="mapid-65305168-032a-400b-9698-f5c2fcba4477"></div>
    </div>
  </div>
</div>

So: any idea how to make this work, please?

Answer 1

You should restore map center, after trigger 'resize', i.e. change your on 'shown.bs.tab' method:

$(document).ready(function(){
    $('[href="#map"]').on('shown.bs.tab', function() {
        var mapCenter = map65305168032a400b9698f5c2fcba4477.getCenter();
        google.maps.event.trigger(map65305168032a400b9698f5c2fcba4477, 'resize');
        map65305168032a400b9698f5c2fcba4477.setCenter(mapCenter);
    });
});    

full snippet:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!--Google Map Generator scripts-->
<script src="//maps.googleapis.com/maps/api/js?key=AIzaSyA222wozVyNudm3i0A2Tr_Vlmh_RipQ284"></script>
<script src="//www.map-generator.org/map/iframejs/65305168-032a-400b-9698-f5c2fcba4477?key=AIzaSyA222wozVyNudm3i0A2Tr_Vlmh_RipQ284&amp;width=100%&amp;height=200px"></script>

<!--Core JS-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script>
$(document).ready(function(){
  $('[href="#map"]').on('shown.bs.tab', function() {
  console.log(map65305168032a400b9698f5c2fcba4477.getCenter().lat());
      var mapCenter = map65305168032a400b9698f5c2fcba4477.getCenter();
      google.maps.event.trigger(map65305168032a400b9698f5c2fcba4477, 'resize');
      map65305168032a400b9698f5c2fcba4477.setCenter(mapCenter);
  });
});
</script>

<div class="container">
  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#map" aria-controls="map" role="tab" data-toggle="tab">Map</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">
      <p>This is the original shown tab: Map pane is hidden</p>
    </div>
    <div role="tabpanel" class="tab-pane" id="map">
      <p>The map is here, and centered after shown...</p>
      <div id="mapid-65305168-032a-400b-9698-f5c2fcba4477"></div>
    </div>
  </div>
</div>