2005年09月17日
display:none の状態で初期化するとバグる Google Maps API さん
症状
Google Maps を表示させる div タグのスタイルに "display : none" が設定された状態で GMap オブジェクトを作成するとマップの中心がずれてしまう。具体的には次のような症状が発生する。
- コントロールが描画されなかいことがある。
- 地図の一部分がロードされないことがある。ロードされていない部分をドラッグしても地図は移動しない。
- 地図上でダブルクリックすると、通常はダブルクリックした場所が中心になるが、変な場所に移動する(こちらの環境では中心が地図の左上に移動した)。
通常は、"display : none" のまま作成させるようなことはないかもしれないが、Google Maps の表示・非表示を動的に切り替えようと思っている人は注意。
対処法
初期化する前に div タグを表示してやる。これだけ。
・ダメな例
<div id="map" style="display : none"></div>
<script>
var mapElement = document.getElementById("map");
new GMap(mapElement);
// その他 Google Map 初期化処理
mapElement.style.display = "block";
・いい例
<div id="map" style="display : none"></div>
<script>
// 先に表示する
var mapElement = document.getElementById("map");
mapElement.style.display = "block";
new GMap(mapElement);
// その他 Google Map 初期化処理
追記
[GoogleMapsAPI]GoogleMapを非表示でロードする - もぎゃろぐ によると、
GMap2だと、sizeプロパティを指定できるので、非表示のままロードすることも可能になっています。
だそうです。