Bootstrap Tabs

by Loan Burger

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
 <div class="tabbable" id="tabs-331065">
    <div class="tab-content">
                <div class="tab-pane active" id="panel-127823">                 
                        <div id="map-city" ></div>                   
                </div>
                <div class="tab-pane" id="panel-737549">                 
                        <div id="map-box"></div>                  
                </div>
                <div class="tab-pane" id="panel-737589">                  
                        <div id="map-forest"></div>                 
                </div>
            </div>
            <ul class="nav nav-tabs" id="map-tabs">
                <li class="active tabLink" id="map-tab1">
                    <a href="#panel-127823" class="tabLink" role="tab" data-toggle="tab">CITY</a>
                </li>
                <li class="tabLink" id ="map-tab2">
                    <a href="#panel-737549" role="tab" data-toggle="tab">BOX HILL</a>
                </li>
                <li class="tabLink" id="map-tab3">
                    <a href="#panel-737589" role="tab"  data-toggle="tab">FOREST HILL</a>
                </li>
            </ul>
        </div>

CSS

#map-city,#map-box,#map-forest
{
    width:450px;
    height:250px;
}

JavaScript

// declare your maps outside of the functions like this and remove 
// your var where you create them.
var map1, map2,map3;



 function initialize() 
{
  
      var myLatlng1 = new google.maps.LatLng(-37.8122172,144.965374);
      var myLatlng2 = new google.maps.LatLng(-37.818535,145.12194);
      var myLatlng3 = new google.maps.LatLng(-37.834697,145.165394);
    
      var mapOptions1 = {
        zoom: 17,
        center: myLatlng1
      }
      var mapOptions2 = {
        zoom: 17,
        center: myLatlng2
      }
      var mapOptions3 = {
        zoom: 17,
        center: myLatlng3
      }

      // Note I removed the var
      map1 = new google.maps.Map(document.getElementById('map-city'), mapOptions1);
      map2 = new google.maps.Map(document.getElementById('map-box'), mapOptions2);
      map3 = new google.maps.Map(document.getElementById('map-forest'), mapOptions3);

     
      var marker1 = new google.maps.Marker({
          position: myLatlng1,
          map: map1,

      });
       var marker2 = new google.maps.Marker({
          position: myLatlng2,
          map: map2,

      });
       var marker3 = new google.maps.Marker({
          position: myLatlng3,
          map: map3,

      });
    
    attachTabClick();
   
}

function attachTabClick()
{
    
   $('.nav-tabs').bind('click', function (e) 
    {
        // e.target is the link
        // so use its parent to check which map to show

       var tabId = e.target;      
    
        //TODo check the ID and only call the resize you need - 
    //   if(tabId == 'panel-127823')
    //   {
          resizeMap(map1)
    //   }
     //  else if(tabId == 'panel-737549')
//       {
           resizeMap(map2);
      // }
     //  else if(tabId == 'panel-737589')
     //  {
           resizeMap(map3)
      // }           
     });
}

function resizeMap(map)
{
    setTimeout(function()
               {
    var center = map.getCenter();
    google.maps.event.trigger(map, "resize");
   ...