Я хотел бы иметь карту Google на навигационной вкладке, но она не может полностью загрузиться и всегда отображается в верхнем левом углу тега div> (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>
Попробуйте запустить:
google.maps.event.trigger(map, 'resize');
После загрузки карты.