title: Bootstrap tabs and google maps not working
body: <p>Right, i have 2 tabs and inside there i have 2 maps. When i load the page the first map is fine, but when i click on the other tab, the map is not loading all.</p>
  
  <p>After reading online, i tried this but it wont work. Here is the js</p>
  
  <pre><code>    function initialize( )
      {
          var latlng = new google.maps.LatLng(51.386199,0.189108);
          var latlng2 = new google.maps.LatLng(51.133802,-0.179009);
          var myOptions =
          {
              zoom: 13,
              center: latlng,
              mapTypeId: google.maps.MapTypeId.ROADMAP
          };
  
          var myOptions2 =
          {
              zoom: 13,
              center: latlng2,
              mapTypeId: google.maps.MapTypeId.ROADMAP
          };
  
  
          var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  
          var map2 = new google.maps.Map(document.getElementById("map_canvas_2"), myOptions2);
  
          var image = 'images/marker.png';
  
          var myMarker = new google.maps.Marker(
          {
              position: latlng,
              map: map,
              title:"Head Office"
         });
  
          var myMarker2 = new google.maps.Marker(
          {
              position: latlng2,
              map: map2,
              title:"Crawley &amp; Accounts Office"
          });
  
      }
  
      google.maps.event.addDomListener(window, 'load', initialize);
  
  $(document).ready(function() {
  $('#tablist a').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
    resetMap(map);
  });
  function resetMap(m) {
      x = m.getZoom();
      c = m.getCenter();
      google.maps.event.trigger(m, 'resize');
      m.setZoom(x);
      m.setCenter(c);
  }
  });
  </code></pre>