Google Maps V3がjQueryタブで読み込まれない

Question

jQueryタブでbeeingしているときにGoogleマップを実行できない。これがなぜであるかわからない。

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

Answer 1

感謝です！あなたが見ている最初のバグはあなたのCSSです。

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

上記のスニペットが読み込まれていないCSSのページを非表示にするために使用されているが、それはまたダウンに達するとクラスの.css-ペインで要素の下にある任意の div要素を隠しています。この場合、display: none;がmap_canvas divに設定されています。このセレクタは、サイジングやカラー情報などの他の要素も、Google Maps APIが描画するすべてのdivを混乱させます。おそらく少し積極的なやり方をして、おそらくpaneクラスを各ペインのdivに追加し、それを直接選択する必要があります。

スタイルシートを少し掃除したら、JavaScriptコンソールでinitialize()関数を実行してマップを手動で読み込むことができます。バインド/イベントのトリガーコードが意図したとおりに起動していないようです。私は単純なconsole.log("Foo");またはさらにalert("Test");を追加して、tabshowイベントのデバッグに役立つinitializeメソッド呼び出しの代わりに使用します。 （私はうまく動かず、jQueryのタブエキスパートでもありません）