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

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埋め込むと表示位置ズレる | 世田谷のエンジニア ブログ