CLOCKWORK TOY

そもそも、

• 表示エリアの有効利用
• ページ（項目）切り替えのナビゲーション
• 見た目のデザイン的配慮

などの目的から、TAB切り替えのデザインを行うことがある。
これは、ソフトウェアもWebページも同様だ。
PC向けソフトウェアなんて作れないkAzzであるから、当然話題は後者のWebページ。

TAB切り替えは一般的に

• 各表示エリアをブロック要素（DIVやPタグ）囲む
• 初期エリア以外はSTYLEのDISPLAY要素をNONEに指定
• タブ切り替えはDISPLAYのNONE/BLOCK（またはinlineなど）による

という流れだ。

ここで困ったのが、Google地図さん。
初期状態で表示されているエリアに地図が有る場合は、特に問題は起こらない。
初期状態で非表示のエリアの場合は少々、やっかいな状態となる。
kAzzの感触では、指定ズームでの地図画像の1片分しか表示しないのだ。
正確に言えば、地図を表示させるブロックのサイズを取得できていない様子。
なので強制的に最小単位の分のエリアサイズで動作するのだろう。

解決策として、まず思い浮かぶのは、該当エリアのDISPLAYをNONEにしないこと。
ここで、VISIBILITY制御しようとするとハマル。
基本的にVISIBILITYは、そのエリアを確保しつつ非表示にするだけだ。
なので、ブラウザ上の表示は間抜けな長い白紙部分が続くことになる。

このご時世、イチからJavaScriptを書く人はいないだろう。
賢人のご厚意を有り難く受けるのが吉だ。
ご多分に漏れず、kAzzもjQuery.jsをはじめ、色々なライブラリを使わせて頂いている。
当然だが、ここにTAB表示用のJavaScriptも該当するワケだ。

試行錯誤したが、結論から言えば、地図の描画とTABのDISPLAY制御（初期化）のタイミングが問題。
当然だがPCの性能は元より、OSやブラウザ、果ては回線速度など、様々なことを考えると制御は至難の業だ。
イチから作っていれば、そうでも無いのかもしれないが…

そこで閃いたのが、地図の描画が完了した後に、TAB制御（初期化）を呼び出すこと。
自前のCSSでは、DIPLAYの制御は行わず、ライブラリに任せる。
その上で、地図描画の完了を待って、TABライブラリの初期化を起動する。
これでなんとかなると思われる。

そこで、Google先生にお伺いを。
やはり、地図描画の完了をラッチしたい人はいるようで、すぐに情報が見つかる。
ここに自分用のメモとして置いておく。

google.maps.event.addListener(map,’tilesloaded’,function() {
やりたい処理（今回はTABライブラリの初期化）
});

※「map」は「new google.maps.Map(表示エリアブロック,パラメータ)」にて作られたオブジェクト