表示（地図、衛星写真）を切り替える

　Google Mapsは地図表示と衛星写真および、２つを合成した３種類の表示を行うことができます。最初の状態では地図になっていますが、場合によっては最初から衛星写真にしたい場合もあります。
　この３つの表示タイプを指定するにはsetMapType()を利用します。以下の３つのパラメータを指定することで表示を切り替えることができます。

G_MAP_TYPE地図のみ表示
G_SATELLITE_TYPE衛星写真のみ表示
G_HYBRID_TYPE地図と衛星写真を合成して表示

　以下のサンプルは地図のみ表示します。初期状態では地図表示になっているため、地図を表示したい場合には、特にsetMapType()を指定しなくても構いません。（サンプルを実行する）

<!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);
map.setMapType(G_MAP_TYPE);
//]]>
</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 GLargeMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(140, 25), 15);
map.setMapType(G_SATELLITE_TYPE);
//]]>
</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 GLargeMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(140, 25), 15);
map.setMapType(G_HYBRID_TYPE);
//]]>
</script>
</body>
</html>

　次項では地図をプログラムで指定した座標に移動させ表示させてみます。

[第七章　4:指定座標に移動させるへ]
[目次へ]

(2006.1.23)