座標を取得して表示する

　Google Mapsでは現在表示されている座標を取得できます。現在の座標を取得して、それを元に移動させるような処理を行わせることもできます。
現在表示されている地図の中心の座標を取得するにはgetCenterLatLng()を使います。このメソッドはオブジェクトを返し、そのオブジェクトのxプロパティ、yプロパティに経度、緯度が入ります。以下のサンプルはボタンをクリックすると中心の座標値が表示されます。（サンプルを実行する）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAasAJryKxWJnBFVJa487d9hTHGAxTVT7IRADYa-JdYz7xQ8IQZBSthgDZdggYpQHsmm6WYtHstQFfLA" type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 500px; height: 400px"></div>
<script type="text/javascript">
//<![CDATA[

var map = new GMap(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(137, 36), 15);

function getMapXY()
{
LatLngObj = map.getCenterLatLng();
document.getElementById("mapX").value = LatLngObj.x;
document.getElementById("mapY").value = LatLngObj.y;
 }
//]]>
</script>
<form>
<input type="button" value="座標を取得する" onClick="getMapXY()" /><br />
経度：<input type="text" id="mapX" /><br />
緯度：<input type="text" id="mapY" /><br />
</form>
</body>
</html>

　地図の中心の座標を取得する以外に表示されている地図の範囲を取得することができます。
表示範囲はgetBoundsLatLng()を使います。このメソッドはオブジェクトを返し、そのオブジェクトのminX, minYプロパティに左上の座標、maxX, maxYプロパティに右下の座標が入ります*1。以下のサンプルはボタンをクリックすると表示範囲の座標が表示されます。（サンプルを実行する）

*1　Google Maps API ver 2では、座標の処理が若干変更されており南西（左下）から北東（右上）の位置を参照／設定するようになっています。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAasAJryKxWJnBFVJa487d9hTHGAxTVT7IRADYa-JdYz7xQ8IQZBSthgDZdggYpQHsmm6WYtHstQFfLA" type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 500px; height: 400px"></div>
<script type="text/javascript">
//<![CDATA[

var map = new GMap(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(137, 36), 15);

function getMapWH()
{
LatLngObj = map.getBoundsLatLng();
document.getElementById("minX").value = LatLngObj.minX;
document.getElementById("minY").value = LatLngObj.minY;
document.getElementById("maxX").value = LatLngObj.maxX;
document.getElementById("maxY").value = LatLngObj.maxY;
 }
//]]>
</script>
<form>
<input type="button" value="表示範囲の座標を取得する" onClick="getMapWH()" /><br />
左上：(<input type="text" id="minX" />, <input type="text" id="minY" />)<br />
右下：(<input type="text" id="maxX" />, <input type="text" id="maxY" />)<br />
</form>
</body>
</html>

　緯度、経度の表示を35度28分36秒のような表示にしたい場合には以下のように求めます（計算上、誤差が発生します）。（サンプルを実行する）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAasAJryKxWJnBFVJa487d9hTHGAxTVT7IRADYa-JdYz7xQ8IQZBSthgDZdggYpQHsmm6WYtHstQFfLA" type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 500px; height: 400px"></div>
<script type="text/javascript">
//<![CDATA[

var map = new GMap(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(137, 36), 15);

function getMapXY()
{
LatLngObj = map.getCenterLatLng();
x = LatLngObj.x;
d = Math.floor(x);
m = Math.floor((x - d) * 60);
s = Math.floor((x - d) * 60 * 60) % 60;
document.getElementById("mapX").value = d+"度"+m+"分"+s+"秒";
y = LatLngObj.y;
d = Math.floor(y);
m = Math.floor((y - d) * 60);
s = Math.floor((y - d) * 60 * 60) % 60;
document.getElementById("mapY").value = d+"度"+m+"分"+s+"秒";
 }
//]]>
</script>
<form>
<input type="button" value="座標を取得する" onClick="getMapXY()" /><br />
経度：<input type="text" id="mapX" /><br />
緯度：<input type="text" id="mapY" /><br />
</form>
</body>
</html>

　次項では情報ウィンドウを表示させてみます。

[第七章　6:情報ウィンドウを表示するへ]
[目次へ]

(2006.1.23)