display:noneの要素にGoogle Mapsを貼り付ける

jQuery逆引きマニュアル」の読者の方から、「タブパネルにGoogle Maps APIを掲載すると、ポイントが真ん中に表示されず、左上にずれて表示されます」と質問を受けました。

書籍ではタブパネルの作成方法のみを解説しており、Google Maps部分は読者の方の応用ですが、次のような方法で解決可能です。

基本的にGoogle Maps APIをdisplay:noneの要素に貼り付けるそのような状態(ポイントが真ん中に表示されず左上にずれる)になります(1度キャッシュされるとちゃんと表示されると思います)。

サンプル

そいうった場合はdisplay:blockにするタイミングで次のような命令を行うとちゃんと表示されるようになります。

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

サンプル

jQuery MobileやThickBoxを使ってる場合は次のような方法でも対応可能です。

jQuery Mobileのマークアップの基本とCSSの変更 Googleマップの設置
Google MapをThickBox上に表示する方法 - とあるWEBクリエイターのblog

関連エントリー

jQuery基礎文法最速マスター
jQueryを良くする25のTIPS
jQueryのコードを良くする5つのTIPS
8のjQueryのすごいTIPS

スポンサードリンク

«Re:jQueryでセレクタを再指定する方法 | メイン | Xcode4.2インストール後にiPhone4以下のiOSシミュレータを利用する»