Google maps and bootstrap tabs

Question

So I have been trying to fix this problem for hours now. I've been searching Google and here but still am not able to fix the problem.

So this is what I see when I switch to the contact tab in the bootstrap menu.

var locations = [
      ['Bondi Beach', -33.890542, 151.274856, 4],
      ['Coogee Beach', -33.923036, 151.259052, 5],
      ['Cronulla Beach', -34.028249, 151.157507, 3],
      ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
      ['Maroubra Beach', -33.950198, 151.259302, 1]
    ];

    var map = new google.maps.Map(document.getElementById('map-canvas'), {
      zoom: 10,
      center: new google.maps.LatLng(-33.92, 151.25),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
$("#mapTab").on('shown', function() {

  	/* Trigger map resize event */
	google.maps.event.trigger(map, 'resize');
});



$("#maptab").on("shown", function(e) {
	google.maps.event.trigger(map, "resize");
	map.setCenter(center);
      });

#map-canvas img {
  max-width: none !important;
}
#map-canvas {
  min-width: 100% !important;
  max-width: 100% !important;
}
#map-canvas {
  width:100%;
  height:400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://www.web-dsigns.nl/odt/js/bootstrap.min.js"></script>
<link href="http://www.web-dsigns.nl/odt/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
  <header>
<nav id="nav-header" class="navbar-default" role="navigation">
	<div class="container">
	  <div class="row">
	    <div class="col-sm-12">
	      <div class="row">
		
		<!-- Main Menu -->
		<div class="col-sm-8 col-md-9">
		  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
		    <ul id="myTab" class="nav navbar-nav navbar-right">
		      <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
		      <li><a href="#products" data-toggle="tab">Products</a></li>
		      <li><a href="#contact" id="mapTab" data-toggle="tab">Contact</a></li>
		      <li><a href="#disclaimer" data-toggle="tab">Disclaimer</a></li>
		    </ul>
		  </div><!-- /.navbar-collapse -->
		</div><!-- col-sm-8 col-md-9 -->
	      </div><!-- /.row -->
	    </div><!-- /.col-sm-12 -->
	  </div><!-- /.row -->
	</div><!-- /.container -->
      </nav>
    </header>
    <!-- Tab panes -->
    <div class="tab-content tab-container">
      <section class="tab-pane fade in active" id="home">
	
      </section>
      <section class="tab-pane fade" id="products">
        
	  </section>
      <section class="tab-pane fade" id="contact">
	  
	  <!-- Google Map -->
      <div id="map-canvas"></div>
        
      </section>
      <section class="tab-pane fade disclaimer" id="disclaimer">
	
      </section>
      </div>

I tried a lot of things and I know there are a lot of similar questions and answers to this and I tried them but I still couldnt solve the issue..

Here are some that I tried: Google Maps and jQuery Tabs

Google Map in Bootstrap Tab

Multiple Google Maps within Bootstrap Tabs

stackoverflow.com/questions/25727191/bootstrap-tabs-and-google-maps-not-working

Answer 1

the name of the event is shown.bs.tab

Additionally there is no center-variable in your code.

This works for me:

$("#mapTab").on("shown.bs.tab", function(e) {
  var center=map.getCenter();
  google.maps.event.trigger(map, "resize");
  map.setCenter(center);
});