HiddenDivのGoogleマップAPI V3（jQuery-uiタブ）

Question

この問題は古代であることは知っていますが、明確な指示を見つけることができないようです。

問題の要点は、Googleマップが隠された（表示：なし）div、たとえばjqueryタブなどにロードされた場合、完全に（部分的に表示されない）ロードされないことです。

API V3はCheckResize（）を受け入れません。「左：-1000px」はエレガントなソリューションではありません。

マップの構築を遅らせるのを聞いて、タブをクリックするとマップをリロードしましたが、正確なコードで助けてください。

Answer 1

なぜあなたは言うのですか 「左：-1000px 'はエレガントなソリューションではありません」？ API V2で大いに機能し、API V3でも機能するはずです（テストされていないので、機能しないかどうかを教えてください）。

RedRaw、IE API V2 checkResize() この方法でAPI V3で達成されます：

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

Jquery-uiタブ用の私のCSSの例は次のとおりです（に触発されたhttp://jqueryui.com/demos/tabs/):

.ui-tabs .ui-tabs-hide#my_tabs-1 { /* my_tabs-1 contains google map */
    display: block !important;
    position: absolute !important;
    left: -10000px !important;
    top: -10000px !important;
}

Answer 2

タブショーイベントに依存できない場合に備えて、呼び出しの代わりにタブリンククリックイベントにイベントを追加できます initialize() ページの準備ができています。

$('#TabLink').click(function() {
    initialize();
});