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>
