selectをカスタムコントロールとして設置する

ここでは、カスタムコントロール内にselectフォームを入れるサンプルを紹介します。

サンプル

このサンプルは、カスタムコントロールとして設定するdivの中にselectフォームが入っています。


<!DOCTYPE html>
<html>
  <head>

    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0px; padding: 0px }
      #map { height: 100% }
    </style>

    <script src="http://maps.google.com/maps/api/js?v=3&sensor=false"
        type="text/javascript" charset="UTF-8"></script>

    <script type="text/javascript">
    //<![CDATA[

    var map;
    var latlng = new Array();


    // 初期化。bodyのonloadでinit()を指定することで呼び出してます
    function init() {

      // 秋葉原
      latlng[0] = new google.maps.LatLng(35.69839680452033,
                                         139.77325916290283);
      // 新宿
      latlng[1] = new google.maps.LatLng(35.69024112601506, 
                                         139.7004747390747);
      // 池袋
      latlng[2] = new google.maps.LatLng(35.729652511434224, 
                                         139.71086025238037);
      // 御徒町
      latlng[3] = new google.maps.LatLng(35.70756223398587,
                                         139.77484703063965);
      // 巣鴨
      latlng[4] = new google.maps.LatLng(35.73351942211786,
                                         139.73944187164307);

      // Mapコンストラクタ用のMapOptions
      var opts = {
        zoom: 17,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: latlng[0] // 初期値は秋葉原
      };

      // getElementById("map")の"map"は、body内の<div id="map">より
      map = new google.maps.Map(document.getElementById("map"), opts);

      var sel = document.getElementById("myselect");
      sel.index = 1;
      map.controls[google.maps.ControlPosition.TOP_CENTER].push(sel);

      google.maps.event.addDomListener(sel, 'click', function() {
        });
    }

    function selectchanged() {

      // selectのオブジェクトを取得
      var sl = document.getElementById("sel");
      var value = sl.options[sl.selectedIndex].value;

      map.setCenter(latlng[value]);
    }
    //]]>
    </script>
  </head>

  <body onload="init()">
    <div id="map"></div>

    <div id="myselect">
    <select id="sel" onChange="selectchanged()">
      <option value="0" selected>秋葉原</option>
      <option value="1">新宿</option>
      <option value="2">池袋</option>
      <option value="3">御徒町</option>
      <option value="4">巣鴨</option>
    </select>
  </body>

</html>

このサンプルでは、selectフォームの内容が変更されるとselectchanged()という自作functionが呼び出されるようになっています。 selectchanged()内では、選択されている項目のvalueを取得して、その値に応じた位置が表示されるようになっていますが、各valueに対応した位置情報は、init()の中でLatLngの配列(Array)として最初に生成しています。

表示例

表示例です。