Google Maps JavaScript API v2Google Maps APIの使い方 - 地図の状態を取得
Google Maps JavaScript APIバージョン2は廃止され、バージョン3に移行しました。
» Google Maps JavaScript API v3の解説はこちら!
地図の表示サイズを取得
2008/5/5
GMap2クラスのgetSize()メソッドは、地図の表示サイズをピクセル値で返します。

<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); /* 地図サイズ(ピクセル単位)を取得 */ var size=map.getSize(); document.getElementById("res").value="幅(width):"+size.width+"\n高さ(height):"+size.height+"\n文字列として取得:"+size.toString(); } } window.onload=load; window.unload=GUnload; //]]> </script> <div id="map" style="width:425px;height:300px"><!-- 地図描画領域 --></div><br> <form action="#"> 【地図サイズ】<br> <textarea cols="64" rows="2" id="res"></textarea> </form>
地図の矩形領域の地理座標を取得
2008/5/5
GLatLngBounds.getSouthWest()
GLatLngBounds.getNorthEast()
GLatLngBounds.getCenter()
GLatLngBounds.toSpan()
地図の南西(左下)と北東(右上)の2つの頂点から成る矩形領域を設定するには、GLatLngBoundsクラスを使用します。
GLatLngBoundsコンストラクタは、GLatLngBoundsクラスのインタンスを生成します。 オプションの第1引数swには、南西の地理座標を指定します。 オプションの第2引数neには、北東の地理座標を指定します。
GLatLngBoundsクラスのgetSouthWest()メソッドは、矩形領域の南西(左下)の頂点の地理座標を返します。
GLatLngBoundsクラスのgetNorthEast()メソッドは、矩形領域の北東(右上)の頂点の地理座標を返します。
GLatLngBoundsクラスのgetCenter()メソッドは、矩形領域の中心地点の地理座標を返します。
GLatLngBoundsクラスのtoSpan()メソッドは、矩形領域のサイズを表す座標を含む地理座標を返します。

<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, bounds; function load() { if(GBrowserIsCompatible()){ /* 地図インスタンス生成 */ map=new GMap2(document.getElementById("map")); /* ピクセル座標 */ var latlng=new GLatLng(35.665246,139.712319); /* 中心地点 */ map.setCenter(latlng, 16); /* コントロール追加 */ map.addControl(new GLargeMapControl()); /* コントロール大 */ map.addControl(new GMapTypeControl()); /* 地図タイプコントロール */ map.addControl(new GOverviewMapControl()); /* 概観地図 */ /* 南西・北東の地理座標を取得 */ fGetLatlng(); GEvent.addListener(map, "moveend", function() { fGetLatlng(); }); } } /* 南西・北東の地理座標を取得 */ function fGetLatlng(){ bounds=map.getBounds(); var sw=bounds.getSouthWest(); /* 南西の地理座標(左下) */ var ne=bounds.getNorthEast(); /* 北東の地理座標(右上) */ var span=bounds.toSpan(); /* 矩形のサイズを表す座標を含む地理座標 */ var ce=bounds.getCenter(); /* 矩形領域の中心地点 */ var s=""; s+="【南西の地理座標(左下)】\n緯度:"+sw.lat()+"/経度:"+sw.lng()+"\n文字列として取得:"+sw.toString()+"\n\n"; s+="【北東の地理座標(右上)】\n緯度:"+ne.lat()+"/経度:"+ne.lng()+"\n文字列として取得:"+ne.toString()+"\n\n"; s+="【矩形のサイズを表す座標を含む地理座標)】\n緯度:"+span.lat()+"/経度:"+span.lng()+"\n文字列として取得:"+span.toString()+"\n\n"; s+="【矩形領域の中心地点)】\n緯度:"+ce.lat()+"/経度:"+ce.lng()+"\n文字列として取得:"+ce.toString(); document.getElementById("res").value=s; } window.onload=load; window.unload=GUnload; //]]> </script> <div id="map" style="width:425px;height:300px"><!-- 地図描画領域 --></div> <form action="#"> <textarea cols="64" rows="14" id="res" style="width:421px;"></textarea> </form>
地図が読み込まれているか調べる
2008/5/5
GMap2クラスのisLoaded()メソッドは、地図が読み込まれているかを調べます。
地図が読み込まれている場合にTRUE、読み込まれていない場合にFALSEを返します。

<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")); /* ★地図が完全に読み込まれているか調べる */ document.getElementById("res").value=map.isLoaded()+"\n"; /* 中心地点 */ map.setCenter(new GLatLng(35.665246,139.712319),14); /* ★地図が完全に読み込まれているか調べる */ document.getElementById("res").value+=map.isLoaded()+"\n"; /* マーカー追加 */ var marker=new GMarker(map.getCenter()); map.addOverlay(marker); /* ★地図が完全に読み込まれているか調べる */ document.getElementById("res").value+=map.isLoaded(); } } window.onload=load; window.unload=GUnload; //]]> </script> <div id="map" style="width:425px;height:300px"><!-- 地図描画領域 --></div><br> <form action="#"> <textarea cols="64" rows="2" id="res" style="width:421px;"></textarea> </form>
指定領域が収まるズーム範囲を取得
2008/5/5
GMap2クラスのgetBoundsZoomLevel()メソッドは、指定範囲に地図が収まるズームレベル(倍率)を返します。 ズームレベルは、現在選択されている地図タイプに合わせて計算されます。

<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, zoom; function load() { if(GBrowserIsCompatible()){ /* 地図インスタンス生成 */ map=new GMap2(document.getElementById("map")); /* 中心地点 */ map.setCenter(new GLatLng(35.665246,139.712319), 14); /* 範囲(新宿駅、恵比寿駅) */ var rectObj=new GLatLngBounds(new GLatLng(35.691034,139.70026), new GLatLng(35.6468,139.710109)); /* 現在のズームレベルを取得 */ document.getElementById("cur").value=map.getZoom(); /* 指定範囲に地図が収まる倍率を取得 */ zoom=map.getBoundsZoomLevel(rectObj) document.getElementById("res").value=zoom; document.getElementById("btn").disabled=false; } } window.onload=load; window.unload=GUnload; //]]> </script> <div id="map" style="width:425px;height:300px"><!-- 地図描画領域 --></div><br> <form action="#"> <p> 現在のズームレベル(倍率):<input type="text" size="8" id="cur" /><br> 指定範囲に地図が収まるズームレベル(倍率):<input type="text" size="8" id="res" /> </p> <p> <input type="button" onclick="map.setZoom(zoom);document.getElementById('cur').value=map.getZoom();" id="btn" value="指定範囲に収まるようにズームレベル変更" disabled="disabled" /> </p> </form>
地図の表示範囲の地理座標を取得
2008/5/5
GMap2クラスのgetBounds()メソッドは、地図の表示範囲の地理座標を返します。

<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); /* ★地図の表示範囲の地理地点を取得 */ var bounds=map.getBounds(); var sw=bounds.getSouthWest(); var ne=bounds.getNorthEast(); /* ★地図の表示範囲の地理地点を取得 */ var s=""; s+="左下の緯度:"+sw.lat()+"\n左下の緯度:"+sw.lng()+"\n\n"; s+="右上の緯度:"+ne.lat()+"\n右上の緯度:"+ne.lng()+"\n\n"; s+="文字列として取得:"+bounds.toString(); document.getElementById("res").value=s; /* 地図を動かした時 */ GEvent.addListener(map, "moveend", function(){ bounds=map.getBounds(); sw=bounds.getSouthWest(); ne=bounds.getNorthEast(); /* ★地図の表示範囲の地理地点を取得 */ s+="左下の緯度:"+sw.lat()+"\n左下の緯度:"+sw.lng()+"\n\n"; s+="右上の緯度:"+ne.lat()+"\n右上の緯度:"+ne.lng()+"\n\n"; s+="文字列として取得:"+bounds.toString(); document.getElementById("res").value=s; }); } } window.onload=load; window.unload=GUnload; //]]> </script> <div id="map" style="width:425px;height:300px"><!-- 地図描画領域 --></div><br> <form action="#"> 【地図の表示範囲の地理座標】<br> <textarea cols="64" rows="7" id="res"></textarea> </form>
地図のズームレベルを取得
2008/5/5
GMap2クラスのgetZoom()メソッドは、地図の現在のズームレベル(倍率)を0~17の整数で返します。

<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; function load() { if(GBrowserIsCompatible()){ /* 地図インスタンス生成 */ map=new GMap2(document.getElementById("map")); /* 中心地点 */ map.setCenter(new GLatLng(35.665246,139.712319), 16); /* コントロール追加 */ map.addControl(new GLargeMapControl()); /* コントロール大 */ /* 地図のズームレベル(倍率)を取得 */ document.getElementById("res").value=map.getZoom(); /* ズームレベルを変更した時 */ GEvent.addListener(map, "zoomend", function(){ /* 地図のズームレベル(倍率)を取得 */ document.getElementById("res").value=map.getZoom(); }); } } window.onload=load; window.unload=GUnload; //]]> </script> <div id="map" style="width:425px;height:300px"><!-- 地図描画領域 --></div><br> <form action="#"> 地図の現在のズームレベル(倍率):<input type="text" size="10" id="res" /> </form>
地図の中心地点の地理座標を取得
2008/5/5
GMap2クラスのgetCenter()メソッドは、地図の中心地点の地理座標を返します。

<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()); /* コントロール大 */ map.addControl(new GMapTypeControl()); /* 地図タイプコントロール */ /* マーカー追加 */ var icon=new GIcon(); icon.image="/content/img/ajax/googlemap/cross.png"; icon.iconSize=new GSize(126, 126); icon.iconAnchor=new GPoint(63, 63); var marker=new GMarker(map.getCenter(), icon); map.addOverlay(marker); /* ★地図の中心地点の地理座標を取得 */ var center=map.getCenter(); document.getElementById("res").value="緯度: "+center.x+"\n経度: "+center.y+"\n文字列として取得:"+center.toString(); /* 地図を動かした時 */ GEvent.addListener(map, "moveend", function(){ /* マーカー削除 */ map.clearOverlays(); /* マーカー追加 */ marker=new GMarker(map.getCenter(), icon); map.addOverlay(marker); /* ★地図の中心地点の地理座標を取得 */ center=map.getCenter(); document.getElementById("res").value="緯度: "+center.x+"\n経度: "+center.y+"\n文字列として取得:"+center.toString(); }); } } window.onload=load; window.unload=GUnload; //]]> </script> <div id="map" style="width:425px;height:300px"><!-- 地図描画領域 --></div><br> <form action="#"> 【地図の中心地点の地理座標】<br> <textarea cols="64" rows="2" id="res" style="width:421px;"></textarea> </form>