Google Maps APIで地図が中途半端にしか読み込まれないときの原因

過去に書いたような気もしなくもないけど、最近ハマってしまったので原因と解決策をメモ。

Google Maps APIではidつきのdivタグなどを指定して地図を表示させます。

var map = new GMap2(document.getElementById("map");
map.setCenter(new GLatLng(lat, lng), 15);

小難しいことをしていなければ問題なく表示できるのですが、小難しいことをしていると、たまに地図が中途半端にしか表示されない状態に出くわすことがあります。

今回私がハマった原因は、表示対象のdiv要素の高さと幅が決定していない状態で、地図を表示させようとしていたためでした。

たとえば document.createElement でdivタグを動的に生成する場合や、ブラウザのサイズにあわせて表示領域のデフォルトサイズを決定する場合などがあります。このとき、divタグの高さと幅を決める前に上記のようなコードを実行してしまうと、地図が表示されたときに読み込みが中途半端になってしまいます。

おそらく対象のdivタグの初期サイズによって、最初にロードする地図画像の範囲を制御しているんだと思います。なので、サイズが決まっていない状態(つまり 0 の状態)では、ほとんど地図画像が読み込まれないという状態になると思われます。