Google Map API V3のdisplay:hidden

もっと良いBlog記事はいっぱいありますが、アホな私にはさっぱりわからなかった。
そして、この記事はもしかしたらいるかもしれない同レベルな方向け。
※中央ズレについて追記しました。やっぱりIE9がだめだったので追記。

Google MAP API v3にて、

<div style="width:960px; height:300px">
<!-- google map が入るよ! -->
</div>

というのを設定して、アコーディオンやらで最初は非表示(display:hidden)にしたい場合に、
GoogleMapの描画が左上1/6みたいな微妙な描画をされてしまう。

これを解決するには色々種類があるらしいですが、もうまどろっこしいのは無しで結論から。
アコーディオンの場合、ボタンをクリックする際に表示させるScriptがあると思います。


<script>
$(function(){
  $('p.btn').on('click',function(){
  //アコーディオン展開script
  });
}
</script>

ここに1行を入れます。


google.maps.event.trigger(MAPを描画しているobject配列, 'resize');

これで解決です。
私は結構これではまりましたので、備忘録としてメモメモ。

なんでもこれバグ?らしくて、
Google Mapが描写を行う前に、それを包んでいるDIVが display:Hiddenしていると描写が指定のdivサイズにならないというモノのようです。

解決方法としては、display:hidden ではなく、position: absolute, left: -99999px みたいに表示はするけど画面外が定番のようです。

今回の案件ではそれが使えなかったのでハマりましたとさ。

これだと中央ズレが治らないよ

上の方法までだとreloadによる描画エラーはなおるけれど、マーカーが中央にいかなかった…。
治す方法はこちら


google.maps.event.trigger((MAPを描画しているobject配列, 'resize');
map.setCenter(座標が格納されているオブジェクトを指定);

例えば、

var lat01 = xx.xxxxx,
lng01 = xx.xxxxx;
googleMap.center = google.maps.LatLng(lat01, lng01);

を指定しているならば、

map.setCenter(googleMap.center);

それでもIE9だけ治らないよ

結局これでもIE9だけは動作が怪しかった状況が今回です。
結局stackoverflowにかかれていた1行で回避できました。


google.maps.event.trigger(mapObj, 'resize')
mapObj.setCenter(googleMap.center);
mapObj.setZoom(mapObj.getZoom()); // 追加したstackoverflowの1行

こんな感じにするとオッケーデス!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です