谷歌地图无法完全加载jQuery导航标签 [英] Google Maps unable to fully load in jquery nav-tab

问题描述

我希望在导航标签中拥有自己的Google地图，但无法完全加载并始终显示在 div> 标记的左上角（div id =map）。

 < script type =text / javascriptsrc =js / jquery-1.8.2.min.js> ;< /脚本> 
< script src =http://maps.google.com/maps/api/js?key=AIzaSyDQDs5U7y5bfR068ckOGwK39C_Dj3jIyJw&sensor=falsetype =text / javascript>< / script> 
 
< script type =text / javascript> 
 $（document.ready）（function（）{
 
 //默认动作
 $（。tab_content）。hide（）; //隐藏所有内容
 $（ul.tabs li：first）。addClass（active）。show（）; //激活第一个标签
 $（。tab_content：first）。show（）; //显示第一个标签内容
 
 //点击事件
 $（ul.tabs li）。click（function（）{
 $（ul.tabs li） .removeClass（active）; //删除任何活动类
 $（this）.addClass（active）; 
 //将活动类添加到选定标签
 $（。tab_content）。hide（）; 
 //隐藏所有标签内容
 var activeTab = $（this）.find（a）。attr（href）; 
 //找到rel属性值以标识活动标签+内容
 $（activeTab）.fadeIn（）; //淡入活动内容
返回false; 
}）; 
 
}）; 
< / script> 
 
 
<？php 
 $ geocode = file_get_contents（'http://maps.google.com/maps/api/geocode/json？address ='。$ add 。 '+' $城市 '+' $状态 '+' $国家 '&安培;传感器=假'。。。）; 
 
 $ output = json_decode（$ geocode）; //将值存入变量
 
 
 
 if（$ output-> status =='OK'）{//检查地址是否可用
 // echo< br />; 
Latitude：。$ lat = $ output-> results [0]  - > geometry-> location-> lat; //返回Latitude 
 // echo< br />; 
Longitude：。$ long = $ output-> results [0]  - > geometry-> location-> lng; //返回经度
 
} 
 
？> 
 
< script type =text / javascript> 
 $（document）.ready（function（）{
 //定义纬度和经度位置
 var latitude = parseFloat（<？php echo $ lat;？>） ; //纬度从变量
获得var longitude = parseFloat（<？php echo $ long;？>）; //经度来自同一
 var latlngPos = new google.maps.LatLng （纬度，经度）; 
 //为Google地图设置选项
 var myOptions = {
 zoom：10，
 center：latlngPos，
 mapTypeId：google .maps.MapTypeId.ROADMAP，
 zoomControlOptions：true，
 zoomControlOptions：{
 style：google.maps.ZoomControlStyle.LARGE 
} 
}; 
 //定义地图
 map = new google.maps.Map（document.getElementById（map），myOptions）; 
 //添加标记
 var marker = new google.maps .Marker（{
 position：latlngPos，
 map：map，
 title：test
}）; 
}）; 
< / script> 
 
 
< div class =container> 
< ul class =tabs> 
< li>< a href =＃tab1>关于商店< / a>< / li> 
< li>< a href =＃tab2>影片< / a>< / li> 
< li>< a href =＃tab3>地图< / a>< / li> 
< / ul> 
< div class =tab_container> 
< div id =tab1class =tab_content>< / div> 
< div id =tab2class =tab_content>< / div> 
< div id =tab3class =tab_content> 
< div id =map>< / div> 
< / div> 
< / div> 
< / div> 
  

解决方案

试试跑：

  google.maps.event.trigger（map，'resize'）; 
  

地图加载后。

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>

解决方案

Try running:

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

After the map has loaded.

这篇关于谷歌地图无法完全加载jQuery导航标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！