Nakajiman Software Blog: GMap2 の引数 opts.size が役に立つときとは?

2007-11-27

GMap2 の引数 opts.size が役に立つときとは?

GMap2 クラスのコンストラクタに地図のサイズを指定できますが、この指定したサイズが何に役立つのか知る機会があったので紹介します。

よく見かける Google Maps API のコードは、次のように地図を表示する要素のスタイルに、その地図のサイズを指定しています。Google のサンプルコードも同じです。

<script type="text/javascript">
//<![CDATA[
var map = new GMap2(document.getElementById('map'));
//]]>
</script>
<div id="map" style="width:200px;height:200px;"></div>

ただし、次のようにスタイル display:none; を指定して GMap2 を生成して操作した後、display:block; とすると、地図が期待どおりの位置で表示されなかったり、地図の画像が半分しか表示されないといったことが起こります。

<script type="text/javascript">
//<![CDATA[
var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(y, x), 15);
//]]>
</script>
<div id="map" style="display:none;width:200px;height:200px;"></div>

このようなときは、GMap2 クラスのコンストラクタで地図のサイズを指定すると、期待どおりの結果になります。

<script type="text/javascript">
//<![CDATA[
var map = new GMap2(document.getElementById('map'), {
  size: new GSize(200, 200)
});
map.setCenter(new GLatLng(y, x), 15);
//]]>
</script>
<div id="map" style="display:none;"></div>

何のために存在するのかわからないオプションも、そのケースによって重要な意味を持つのですね。感心してしまいます。