Yahoo Mapsには3つのコントロールが用意されています。移動をコントロールするもの、ズームをコントロールするもの（2種類）です。まず、移動のコントロールを追加してみましょう。移動のコントロールはaddPanControl()を使います。（実際のサンプルを
実行する）
<html>
<head>
<script type="text/javascript" src="http://api.maps.yahoo.com/ajaxymap?v=2.0&appid=
openspaceYS"></script>
</head>
<body>
<div id="mapContainer" style="width:600px;height:600px"></div>
<script type="text/javascript">
var myPoint = new YGeoPoint(30, -97);
var map = new YMap(document.getElementById("mapContainer"));
map.drawZoomAndCenter(myPoint, 6);
map.addPanControl();
</script>
</body>
</html>
ズームのコントロールは二種類あります。普通のズームコントロールはaddZoomLong()を使います。（実際のサンプルを
実行する）
<html>
<head>
<script type="text/javascript" src="http://api.maps.yahoo.com/ajaxymap?v=2.0&appid=
openspaceYS"></script>
</head>
<body>
<div id="mapContainer" style="width:600px;height:600px"></div>
<script type="text/javascript">
var myPoint = new YGeoPoint(30, -97);
var map = new YMap(document.getElementById("mapContainer"));
map.drawZoomAndCenter(myPoint, 6);
map.addZoomLong();
</script>
</body>
</html>
簡単な+-ボタンのズームコントロールはaddZoomShort()を使います。（実際のサンプルを
実行する）
<html>
<head>
<script type="text/javascript" src="http://api.maps.yahoo.com/ajaxymap?v=2.0&appid=
openspaceYS"></script>
</head>
<body>
<div id="mapContainer" style="width:600px;height:600px"></div>
<script type="text/javascript">
var myPoint = new YGeoPoint(30, -97);
var map = new YMap(document.getElementById("mapContainer"));
map.drawZoomAndCenter(myPoint, 6);
map.addZoomShort();
</script>
</body>
</html>
移動コントロールとズームコントロールを同時に表示することもできます。ただし、Google Mapsと異なり最初に設定したコントロールが優先され、後から定義されたコントロールは無視されます。（実際のサンプルを
実行する）
<html>
<head>
<script type="text/javascript" src="http://api.maps.yahoo.com/ajaxymap?v=2.0&appid=
openspaceYS"></script>
</head>
<body>
<div id="mapContainer" style="width:600px;height:600px"></div>
<script type="text/javascript">
var myPoint = new YGeoPoint(30, -97);
var map = new YMap(document.getElementById("mapContainer"));
map.drawZoomAndCenter(myPoint, 6);
map.addZoomShort();
map.addZoomLong();
map.addPanControl();
</script>
</body>
</html>
[
第15章 ズームの処理へ]
[
目次へ]
(2006.2.28)