指定座標に移動させる

　Google Mapsは地図をドラッグして自由に移動させることができます。もちろんプログラムからでも特定の座標に移動させることができます。特定の座標に移動させる命令は以下の3つが用意されています。

centerAtLatLng()指定位置に移動する
recenterOrPanToLatLng()指定位置に移動。現在表示されている範囲内での移動ならばスムーズに移動する
centerAndZoom()指定位置に移動し、指定した表示倍率にする

　まず、指定した位置に移動させるcenterAtLatLng()のサンプルは以下のようになります。（サンプルを実行する）

<!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(140, 25), 12);

function newPoint(x,y)
{
map.centerAtLatLng(new GPoint(x,y));
 }
//]]>
</script>
<form>
<input type="button" value="(135,30)に移動" onClick="newPoint(135,30)" />
</form>
</body>
</html>

　地図をスムーズに移動させたい場合には現在表示されている範囲内であればrecenterOrPanToLatLng()を使います。（サンプルを実行する）

<!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(140, 25), 13);

function newPoint(x,y)
{
map.recenterOrPanToLatLng(new GPoint(x,y));
 }
//]]>
</script>
<form>
<input type="button" value="(135,30)に移動" onClick="newPoint(135,30)" />
</form>
</body>
</html>

指定した座標が表示されている範囲かどうかを調べることもできます。この場合にはgetBoundsLatLng()を使います。（サンプルを実行する）

<!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(140, 25), 13);

function newPoint(x,y)
{
data = map.getBoundsLatLng();
alert(data.toString());
if ((x < data.minX) || (y < data.minY) || (x > data.maxX) || (y > data.maxY))
{
alert("表示範囲外です");
}else{
alert("表示範囲内です");
}
 map.recenterOrPanToLatLng(new GPoint(x,y));
}
//]]>
</script>
<form>
<input type="button" value="(135,30)に移動" onClick="newPoint(135,30)" />
<input type="button" value="(10,30)に移動" onClick="newPoint(10,30)" />
</form>
</body>
</html>

　位置を指定する際に表示倍率も指定することができます。倍率の指定を行う命令には以下の2つがあります。

zoomTo()指定した表示倍率にする
centerAndZoom()指定位置に移動し表示倍率にする

　centerAndZoom()は座標と表示倍率を一括指定するため、単純に表示倍率を指定する場合にはzoomTo()を利用します。（centerAndZoom()のサンプルを実行する）（zoomTo()のサンプルを実行する）

<!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(140, 25), 15);

function newPoint(x,y,z)
{
map.centerAndZoom(new GPoint(x,y),z);
 }
//]]>
</script>
<form>
<input type="button" value="(137,36)に移動しズームレベル13にする" onClick="newPoint(137,36,13)" /><br />
<input type="button" value="(137,36)に移動しズームレベル10にする" onClick="newPoint(137,36,10)" /><br />
</form>
</body>
</html>


<!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 mapZoom(z)
{
map.zoomTo(z);
 }
//]]>
</script>
<form>
<input type="button" value="ズームレベル10にする" onClick="mapZoom(10)" /><br />
<input type="button" value="ズームレベル9にする" onClick="mapZoom(9)" /><br />
<input type="button" value="ズームレベル6にする" onClick="mapZoom(6)" /><br />
<input type="button" value="ズームレベル3にする" onClick="mapZoom(3)" /><br />
</form>
</body>
</html>

　次項では現在表示されている地図の座標を取得して座標値を表示してみます。

[第七章　5:座標を取得して表示するへ]
[目次へ]

(2006.1.23)