埋め込みGoogleマップをdisplay: none;にすると座標がズレる件。

By エックン on 2011.08.18 Thu - 11:28  |   Facebook

DEMO を見てもらうと分かりやすいのだけど、埋め込み Google マップを jQuery などでタブ化して複数枚を埋め込むと何故か座標がズレる。
その原因が Javascript でタブとかモーダルを使用する際、ブロックを隠すために併用する CSS の display: none であるらしい。※定かではない
ってことは display: none で隠すのはブロックだけにして、地図を表示する箇所は Javascript で 1 回 1 回読み込めば好いと言うことらしい。

方法 (1): iFrame の要素 REL に URL を埋込み、クリックファンクションで REL -> SRC に変換する
方法 (2): クリックファンクションで HTML を読み込んで表示する

どちらもズレなくなった。

DEMO

via 埋め込みGoogle マップの座標がズレる場合のメモ。 – ゆず日記
via jQuery UI TabsにGoogleMap埋め込むと表示位置ズレる | 世田谷のエンジニア ブログ

In web  |   Tagged , , , , , ,

facebook