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

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 の状態)では、ほとんど地図画像が読み込まれないという状態になると思われます。

• 
• ツイートで共有

著者について

F.Ko-Ji

Webエンジニアやってます。最近は ドットインストール の開発がお仕事です。その傍ら、個人で Meity や 電車遅延なう、梅酒.in、 #グラドル自画撮り部 の部室といったネットサービスを開発・運営してます。梅酒と草野球とリアル脱出ゲームが好きです。

» 詳しいプロフィールや運営サービスの一覧など