selectフォームと地図タイプを連動させる
（注意！）この記事は、旧APIであるGoogle Maps API version 2を解説したものです。version 2の利用は推奨されていないので、意図的に旧バージョンの情報を探していない場合は、新しいバージョンの解説をご覧下さい。
ここでは、Google MAPS APIとフォーム(FORM)のselectフィールドを連動させる例を説明したいと思います。 この例では、地図の種類をSelectフォームと連動させます。
サンプル
以下のサンプルはGoogle MAPS APIを使ったページのソースです。
<!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=2&key=SETYOURKEY"
type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id="map" style="width:450px; height:400px"></div>
<script type="text/javascript">
//<![CDATA[
var maptype = new Array(10);
maptype[0] = G_NORMAL_MAP;
maptype[1] = G_SATELLITE_MAP;
maptype[2] = G_HYBRID_MAP;
maptype[3] = G_PHYSICAL_MAP;
maptype[4] = G_MOON_ELEVATION_MAP;
maptype[5] = G_MOON_VISIBLE_MAP;
maptype[6] = G_MARS_ELEVATION_MAP;
maptype[7] = G_MARS_VISIBLE_MAP;
maptype[8] = G_MARS_INFRARED_MAP;
maptype[9] = G_SKY_VISIBLE_MAP;
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.setCenter(new GLatLng(36.033, 139.15), 11);
map.setMapType(G_NORMAL_MAP);
function selectchanged() {
var point;
var sel = document.getElementById("sel");
var n = sel.selectedIndex;
map.setMapType(maptype[n]);
}
//]]>
</script>
<P>
<select id="sel" onChange="selectchanged()">
<option>G_NORMAL_MAP</option>
<option>G_SATELLITE_MAP</option>
<option>G_HYBRID_MAP</option>
<option>G_PHYSICAL_MAP</option>
<option>G_MOON_ELEVATION_MAP</option>
<option>G_MOON_VISIBLE_MAP</option>
<option>G_MARS_ELEVATION_MAP</option>
<option>G_MARS_VISIBLE_MAP</option>
<option>G_MARS_INFRARED_MAP</option>
<option>G_SKY_VISIBLE_MAP</option>
</select>
</P>
</body>
</html>
上記サンプルでは、selectで選択されている項目を変更する度に地図の種類も変わります。 2007年12月から地球の地図だけではなく、月や火星の地図も選べるようになっています。
表示例
表示例です。
