title: Google Maps unable to fully load in jquery nav-tab
body: <p>I would like to have my Google map in the nav-tab but however it is unable to fully load and always shows at the top left corner of the <code>div&gt;</code> tag (div id="map"). </p>
  
  <pre><code>&lt;script type="text/javascript" src="js/jquery-1.8.2.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://maps.google.com/maps/api/js?key=AIzaSyDQDs5U7y5bfR068ckOGwK39C_Dj3jIyJw&amp;sensor=false" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  $(document).ready(function() {
  
  //Default Action
  $(".tab_content").hide(); //Hide all content
  $("ul.tabs li:first").addClass("active").show(); //Activate first tab
  $(".tab_content:first").show(); //Show first tab content
  
  //On Click Event
  $("ul.tabs li").click(function() {
      $("ul.tabs li").removeClass("active"); //Remove any "active" class
      $(this).addClass("active"); 
      //Add "active" class to selected tab
      $(".tab_content").hide(); 
      //Hide all tab content
      var activeTab = $(this).find("a").attr("href"); 
      //Find the rel attribute value to identify the active tab + content
      $(activeTab).fadeIn(); //Fade in the active content
      return false;
  });
  
  });
  &lt;/script&gt;
  
  
  &lt;?php 
  $geocode=file_get_contents('http://maps.google.com/maps/api/geocode/json?    address='.$add.',+'.$city.',+'.$state.',+'.$country.'&amp;sensor=false');
  
  $output= json_decode($geocode); //Store values in variable
  
  
  
  if($output-&gt;status == 'OK'){ // Check if address is available or not
  //echo "&lt;br/&gt;";
  "Latitude : ".$lat = $output-&gt;results[0]-&gt;geometry-&gt;location-&gt;lat; //Returns Latitude
  //echo "&lt;br/&gt;";
  "Longitude : ".$long = $output-&gt;results[0]-&gt;geometry-&gt;location-&gt;lng; // Returns Longitude
  
  }
  
  ?&gt; 
  
  &lt;script type="text/javascript"&gt;
  $(document).ready(function () {
      // Define the latitude and longitude positions
      var latitude = parseFloat("&lt;?php echo $lat; ?&gt;"); // Latitude get from above variable
      var longitude = parseFloat("&lt;?php echo $long; ?&gt;"); // Longitude from same
      var latlngPos = new google.maps.LatLng(latitude, longitude);
      // Set up options for the Google map
      var myOptions = {
          zoom: 10,
          center: latlngPos,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          zoomControlOptions: true,
          zoomControlOptions: {
              style: google.maps.ZoomControlStyle.LARGE
          }
      };
      // Define the map
      map = new google.maps.Map(document.getElementById("map"), myOptions);
      // Add the marker
      var marker = new google.maps.Marker({
          position: latlngPos,
          map: map,
          title: "test"
      });
  });
  &lt;/script&gt;
  
  
  &lt;div class="container"&gt;
      &lt;ul class="tabs"&gt;
          &lt;li&gt;&lt;a href="#tab1"&gt; About the store &lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#tab2"&gt; Video &lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#tab3"&gt; Map &lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;div class="tab_container"&gt;
          &lt;div id="tab1" class="tab_content"&gt;&lt;/div&gt;
          &lt;div id="tab2" class="tab_content"&gt;&lt;/div&gt;   
          &lt;div id="tab3" class="tab_content"&gt;
              &lt;div id="map"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>