各種コントロールを表示する

　Google Mapsには、地図の表示を制御する、いくつかのコントロール（ボタン）が用意されています。このコントロールはいくつかの種類が用意されており、プログラムで指定することができます。前項のサンプルでは表示位置の制御とズームボタンがあるだけでしたが、スライダー付きのコントロールなども指定することができます。以下のサンプルはスライダ付きのコントロールを表示するものです。（サンプルを実行する）

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

//]]>
</script>
</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 GMapTypeControl());
 map.centerAndZoom(new GPoint(140, 25), 15);

//]]>
</script>
</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 GSmallZoomControl());
 map.centerAndZoom(new GPoint(140, 25), 15);

//]]>
</script>
</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 GSmallMapControl());
map.addControl(new GLargeMapControl());
map.addControl(new GSmallZoomControl());
map.addControl(new GMapTypeControl());
 map.centerAndZoom(new GPoint(140, 25), 15);

//]]>
</script>
</body>
</html>

　次項ではプログラムから地図と衛星写真を切り替えてみます。

[第七章　3:表示（地図、衛星写真）を切り替えるへ]
[目次へ]

(2006.1.23)