谷歌地图V3没有加载jQuery标签

我不能让谷歌地图在jQuery选项卡中运行时运行。不知道这是为什么。谷歌地图V3没有加载jQuery标签

<script type="text/javascript"> 
$(document).ready(function() { 
    var map = null; 
    $("ul.css-tabs").tabs("div.css-panes > div"); 
    $("div.css-panes > div").bind('tabsshow', function(event, ui) { 
     if (ui.panel.id == 'map_tab' && !map) 
     { 
      map = initialize(); 
      google.maps.event.trigger(map, 'resize'); 
     } 
    }); 
}); 

    function initialize() { 
    var latlng = new google.maps.LatLng({latitude},{longitude}); 

    var myOptions = { 
     zoom: 8, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    var map = new google.maps.Map(document.getElementById("map_canvas"), 
     myOptions); 

    var marker = new google.maps.Marker({ 
     position: latlng, 
     map: map, 
     title:"{CaveTitle}" 
    }); 

    return map; 
    }; 

    //google.maps.event.addDomListener(window, 'load', initialize); 

</script>

这是我的HTML

<ul class="css-tabs"> 
    <li style="list-style-image: none;"><a href="#">Information</a></li> 
    <li style="list-style-image: none;"><a href="#">Description</a></li> 
    <li style="list-style-image: none;"><a href="#">Map</a></li> 
    <li style="list-style-image: none;"><a href="#">Images</a></li> 
</ul> 
<!-- panes --> 
<div class="css-panes"> 
    <div><p>{ImportantInfo}</p></div> 
    <div><p>{description}</p></div> 
    <div style="height:300px;" id="map_tab"> 
     <p>Longitude: {longitude}<br /> 
     Latitude: {latitude}<br /></p> 
     <p><div id="map_canvas" style="width: 500px; height: 200px"></div></p> 
    </div> 
    <div><p> 
    {start block images} 
      <a href="images/original/{image}" class="thickbox"><img src="images/thumbnail/{image}" width="100" alt="{title}"/></a> 
    {end block images} 
     </p></div> 
</div>

这里是一些CSS

/* root element for tabs */ 
ul.css-tabs { 
    margin-left:10px; 
    padding:0; 
    height:30px; 
    width: 750px; 
    border-bottom:1px solid #666; 
} 

/* single tab */ 
ul.css-tabs li { 
    float:left; 
    padding:0; 
    list-style-type:none; 
} 

/* link inside the tab. uses a background image */ 
ul.css-tabs a { 
    float:left; 
    font-size:13px; 
    display:block; 
    padding:5px 30px; 
    text-decoration:none; 
    border:1px solid #666; 
    border-bottom:0px; 
    height:18px; 
    color:#777; 
    margin-right:2px; 
    position:relative; 
    top:1px;  
    outline:0; 
    -moz-border-radius:4px 4px 0 0; 
    background: #bbbbbb url(nav.jpg) repeat-x; 
    color: #FFF; 
    text-align: left; 
    white-space:nowrap; 
} 

ul.css-tabs a:hover { 
    background-color:#F7F7F7; 
    color:#333; 
} 

/* selected tab */ 
ul.css-tabs a.current { 
    background-color:#ddd; 
    border-bottom:1px solid #ddd; 
    color:#000; 
    cursor:default; 
} 


/* tab pane */ 
.css-panes div { 
    display:none; 
    border:1px solid #666; 
    border-width:0 1px 1px 1px; 
    min-height:800px; 
    padding:15px 20px; 
    background-color:#ddd; 
    margin-left: 10px; 
    width: 710px; 
    position: absolute; 
    left: -1000px; 
}

来源

2012-01-04 Chris

这是很难在jQuery，标签和谷歌地图之间拼凑在一起。你能提供一个链接到一个样例页面来重现问题吗？ – bamnet 2012-01-05 05:30:32

嗨。我很快设置了一个html文件。你可以在这里访问 - > http://www2.caveconditions.com/test.html – Chris 2012-01-05 15:20:37

谢谢你的样品页！我看到的第一个错误是在你的CSS中。

/* tab pane */ 
.css-panes div { 
    display: none; 
    ... 
}

以上被用来隐藏那些没有被加载CSS的网页，但它也达到了下来，躲在任何的div是一个阶级的CSS-窗格元素下的片段。在这种情况下，display: none;正在map_canvas div上设置。这个选择其他元素，例如尺寸和着色信息，也混淆了Google Maps API绘制的所有div。你应该做一些不那么积极的事情，并且可能会在每个窗格div中添加一个pane类，然后直接在其上进行选择。

清理好样式表后，我可以通过在JavaScript控制台中运行initialize()函数来手动加载地图。它看起来像你的绑定/事件触发器代码没有按预期发射。我会添加一个简单的console.log("Foo");甚至alert("Test");来代替initialize方法调用，以帮助调试tabshow事件。（我没有得到它的任何运气，我也不是一个jQuery选项卡专家）

来源

2012-01-06 00:47:50 bamnet

你能告诉我你已经完成的清理吗？ – Chris 2012-01-06 11:22:48

谷歌地图V3没有加载jQuery标签

回答

相关问题