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月から地球の地図だけではなく、月や火星の地図も選べるようになっています。

表示例

表示例です。