例−32：2つのセレクトボックスで出発地と到着地を選ぶ(KML)

出発駅と到着駅を選んでください。

出発駅

到着駅
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <title>例−32：2つのセレクトボックスで出発地と到着地を選ぶ(KML)</title>
  <script src="http://maps.google.co.jp/maps?file=api&amp;v=2&amp;key=[MAPS_API_KEY]"
  type="text/javascript"></script>
  <script type="text/javascript">
  //<![CDATA[

    var map;
    var geoXml = null;
    function load() {
      if (GBrowserIsCompatible()) {

        //地図を作成
        map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(35.127152, 138.910627), 7); 

        map.addControl(new GLargeMapControl());
        
        markerChange(document.getElementById("markerSelect"));
      }
    }
    
    function markerChange(selectBox){
        var kmlFile = selectBox.options[selectBox.selectedIndex].value;
        
        if(geoXml){
            map.removeOverlay(geoXml);
        }
        geoXml = new GGeoXml("http://googlemaps.googlermania.com/uploads/" + kmlFile);
        map.addOverlay(geoXml);
    }


    
    GEvent.addDomListener(window, "load", load);
    GEvent.addDomListener(window, "unload", GUnload);
  //]]>
  </script>
</head>
<body >
  <h1>例−32：2つのセレクトボックスで出発地と到着地を選ぶ(KML)</h1>
  <div id="map" style="width:600px;height:600px;">
<p>出発駅と到着駅を選んでください。<br />
<br />
出発駅<br />
<select id="startSelect" onChange="javascript:stationSel(this);">
<option value="kmlsample_tokyo.kml" selected="selected">東京駅</option>
<option value="kmlsample_shinagawa.kml">品川駅</option>
<option value="kmlsample_shin-yokohama.kml">新横浜駅</option>
</select> <br />
到着駅<br />
<select id="endSelect" onChange="javascript:stationSel(this);">
<option value="kmlsample_nagoya.kml" selected="selected">名古屋駅</option>
<option value="kmlsample_kyoto.kml">京都駅</option>
<option value="kmlsample_shin-osaka.kml">新大阪駅</option>
</select>

</body>
</html>