Google Maps无法完全加载到jquery nav-tab中

Question

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 div> tag (div id="map").

<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script src="http://maps.google.com/maps/api/js?key=AIzaSyDQDs5U7y5bfR068ckOGwK39C_Dj3jIyJw&sensor=false" type="text/javascript"></script>

<script type="text/javascript">
$(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;
});

});
</script>


<?php 
$geocode=file_get_contents('http://maps.google.com/maps/api/geocode/json?    address='.$add.',+'.$city.',+'.$state.',+'.$country.'&sensor=false');

$output= json_decode($geocode); //Store values in variable



if($output->status == 'OK'){ // Check if address is available or not
//echo "<br/>";
"Latitude : ".$lat = $output->results[0]->geometry->location->lat; //Returns Latitude
//echo "<br/>";
"Longitude : ".$long = $output->results[0]->geometry->location->lng; // Returns Longitude

}

?> 

<script type="text/javascript">
$(document).ready(function () {
    // Define the latitude and longitude positions
    var latitude = parseFloat("<?php echo $lat; ?>"); // Latitude get from above variable
    var longitude = parseFloat("<?php echo $long; ?>"); // 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"
    });
});
</script>


<div class="container">
    <ul class="tabs">
        <li><a href="#tab1"> About the store </a></li>
        <li><a href="#tab2"> Video </a></li>
        <li><a href="#tab3"> Map </a></li>
    </ul>
    <div class="tab_container">
        <div id="tab1" class="tab_content"></div>
        <div id="tab2" class="tab_content"></div>   
        <div id="tab3" class="tab_content">
            <div id="map"></div>
        </div>
    </div>
</div>

Answer 1

Try running:

google.maps.event.trigger(map, 'resize');

After the map has loaded.