Google Maps V3 未使用 jQuery 选项卡加载答案

【问题标题】：Google Maps V3 not loading with jQuery tabsGoogle Maps V3 未使用 jQuery 选项卡加载
【发布时间】：2012-01-04 20:23:07
【问题描述】：

在 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;  
}

【问题讨论】：

这在我的脑海中很难在 jQuery、标签和谷歌地图之间拼接起来。您能否提供一个指向重现问题的示例页面的链接？
嗨。我已经快速设置了一个 html 文件。你可以在这里访问它 -> www2.caveconditions.com/test.html

标签： jquery google-maps-api-3

【解决方案1】：

感谢您的示例页面！！！我看到的第一个错误是在您的 CSS 中。

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

上面的 sn-p 用于隐藏未加载的 css 页面，但它也向下隐藏并隐藏在具有类 .css- 的元素下的 any div窗格。在这种情况下，display: none; 被设置在 map_canvas div 上。这个选择器选择了其他元素，例如尺寸和颜色信息，也弄乱了 Google Maps API 绘制的所有 div。您可能应该做一些不那么激进的事情，并可能在每个窗格 div 中添加一个 pane 类并直接选择它。

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

【讨论】：