Google Maps JavaScript API v2Google Maps APIの使い方 - 地図生成、サイズ、カーソル
Google Maps JavaScript APIバージョン2は廃止され、バージョン3に移行しました。
» Google Maps JavaScript API v3の解説はこちら!
ブラウザサイズに合わせて地図をリサイズ
2008/5/5

サンプルを見る
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAvABrzCnRluKK0Cj97fTMThTNR7aHVSEFb0WbViWwc6F-_w9PjBSogZu_7UgOTbx25ka46X-fnGmyvw" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ var map; var obj; function load() { if(GBrowserIsCompatible()){ obj=document.getElementById("map"); fResize(); /* 地図インスタンス生成 */ map=new GMap2(obj); /* 中心地点 */ map.setCenter(new GLatLng(35.665246,139.712319), 14); /* コントロール追加 */ map.addControl(new GLargeMapControl()); /* コントロール大 */ map.addControl(new GScaleControl()); /* スケールコントロール */ map.addControl(new GMapTypeControl()); /* 地図タイプコントロール */ map.addControl(new GOverviewMapControl()); /* 折りたたみ可能な概観地図 */ } } function fResize(){ /* ウィンドウの幅と高さを取得 */ var width, height; if(window.innerWidth){ width=window.innerWidth; height=window.innerHeight; }else if(document.documentElement && document.documentElement.clientWidth){ width=document.documentElement.clientWidth; height=document.documentElement.clientHeight; }else if(document.body && document.body.clientWidth){ width=document.body.clientWidth; height=document.body.clientHeight; } /* 地図のサイズをウィンドウの幅と高さにリサイズ */ obj.style.width=width+"px"; obj.style.height=height+"px"; } window.onload=load; window.unload=GUnload; window.onresize=fResize; //]]> </script> <style type="text/css"> body { margin:0; padding:0; } </style> <div id="map"><!-- 地図描画領域 --></div>
地図生成時に「サイズ」「地図タイプ」「カーソル」を設定
2008/5/5
GMapOptionsクラスは、地図のサイズ、カーソル、地図タイプなどの地図のオプション設定をする場合に、GMap2コンストラクタの第2引数として指定します。
プロパティ | タイプ | 説明 | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
size | GSize | 地図の縦横サイズをピクセル単位で指定します。デフォルトは、地図描画領域(div要素など)のサイズが適用されます。 | ||||||||||
mapTypes | 地図タイプの配列 |
地図で使用する地図タイプの配列を指定します。デフォルトは、「G_DEFAULT_MAP_TYPES」が適用されます。
|
||||||||||
draggableCursor | String | 地図がドラッグ可能な場合に表示されるカーソル。 | ||||||||||
draggingCursor | String | 地図のドラッグ中に表示されるカーソル。 |

サンプルを見る
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAvABrzCnRluKK0Cj97fTMThTNR7aHVSEFb0WbViWwc6F-_w9PjBSogZu_7UgOTbx25ka46X-fnGmyvw" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ function load() { if(GBrowserIsCompatible()){ var opts={ /* サイズ */ size:new GSize(400,200), /* 地図タイプ */ mapTypes:[G_HYBRID_MAP], /* カーソル */ draggableCursor:"crosshair", draggingCursor:"move" }; /* 地図インスタンス生成 */ var map=new GMap2(document.getElementById("map"),opts); /* 中心地点 */ map.setCenter(new GLatLng(35.665246,139.712319), 14); /* コントロール追加 */ map.addControl(new GSmallMapControl()); } } window.onload=load; window.unload=GUnload; //]]> </script> <div id="map" style="width:425px;height:300px"><!-- 地図描画領域 --></div>
地図インスタンス生成
2008/5/5
new GMap2(container[, opts])
地図を表示するには、GMap2クラスを使用します。
GMap2コンストラクタは、GMap2クラスのインスタンスを生成します。
第1引数containerには、地図を描画するHTMLコンテナ(div要素など)を指定します。
オプション引数opts.mapTypesには、地図タイプを指定します。 省略した場合は、デフォルトのG_DEFAULT_MAP_TYPESが適用されます。
オプション引数opts.sizeには、地図のサイズを指定します。
省略した場合は、HTMLコンテナ(地図を表示するdiv要素)に定義されているサイズが適用されます。

サンプルを見る
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAvABrzCnRluKK0Cj97fTMThTNR7aHVSEFb0WbViWwc6F-_w9PjBSogZu_7UgOTbx25ka46X-fnGmyvw" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ function load() { if(GBrowserIsCompatible()){ /* ★地図インスタンス生成 */ var map=new GMap2(document.getElementById("map")); /* 中心地点 */ map.setCenter(new GLatLng(35.665246,139.712319), 14); /* コントロール追加 */ map.addControl(new GLargeMapControl()); /* コントロール大 */ } } window.onload=load; window.unload=GUnload; //]]> </script> <div id="map" style="width:425px;height:300px"><!-- 地図描画領域 --></div>