GoogleMaps API V3を使ってルート検索など

今更な感じですが、使う機会があったのでメモ書き。
Google Maps JavaScript APIのV3を使ってルート検索を行うまで。
ルート検索は google.maps.DirectionsService を使って行います。V2の場合は GDirections だったのかな。

<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  var map;
  var directionsDisplay;
  var directionsService = new google.maps.DirectionsService();

  function initialize() {
    // マップの初期化
    var mapOptions = {
      zoom: 8,
      center: new google.maps.LatLng(36, 140),
      mapTypeControl: true,
      zoomControl: true,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById('id_map'), mapOptions);
    // ルート検索結果表示の初期化
    directionsDisplay = new google.maps.DirectionsRenderer({
      polylineOptions: {
        strokeColor: '#FF0000',
        strokeWeight: 2,
        strokeOpacity: 0.7
      }
    });
    directionsDisplay.setMap(map);
  }

  function search() {
    // 検索
    var keyword_begin = document.getElementById('id_begin').value;
    var keyword_end = document.getElementById('id_end').value;
    
    var request = {
      origin: keyword_begin,
      destination: keyword_end,
      avoidHighways: true,  // 高速道路を除外
      avoidTolls: true,  // 有料道路を除外
      travelMode: google.maps.DirectionsTravelMode.DRIVING  // 移動手段は車
    };
    directionsService.route(request, function(result, status) {
      if (status, google.maps.DirectionsStatus.OK) {
        // ヒットした結果を表示
        directionsDisplay.setDirections(result);
      }
    });
    return false;
  }
</script>
</head>
<body onload="initialize();">
  <h1>Google Maps API ルート検索デモ</h1>
  <form onsubmit="return search();">
    <div>
      始点: <input type="text" name="start" id="id_begin"/>
    </div>
    <div>
      終点: <input type="text" name="start" id="id_end"/>
    </div>
    <div>
      <input type="submit" value="検索"/>
    </div>
  </form>
  <div style="width: 800px; height: 600px;" id="id_map"></div>
</body>
</html>