グーグルマップで表示2_A~Bまでの道のり表示

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Google Maps API SDK</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=ja"></script>

<script type="text/javascript">

function initialize(position) {

  var latlng = new google.maps.LatLng(35.801922, 139.717583);
  
  var myOptions = {
    
    zoom: 15,

    center: latlng,
    
    mapTypeId: google.maps.MapTypeId.ROADMAP
    
  };// 地図プロパティここまで
  
  //ルート検索
  var rendererOptions = 
  {
  draggable: true,
  preserveViewport:false
  };
  var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
  var directionsService = new google.maps.DirectionsService();
    var request =
    {
    origin: "川口駅",//出発点
    destination: "南鳩ヶ谷駅",//到着点
    travelMode: google.maps.DirectionsTravelMode.DRIVING,//運転モード
    unitSystem: google.maps.DirectionsUnitSystem.METRIC,
    optimizeWaypoints: true,
    avoidHighways: false,
    avoidTolls: false
    };
    directionsService.route(request, function(response, status)
    {
        if (status == google.maps.DirectionsStatus.OK)
        {
		directionsDisplay.setDirections(response);
		directionsDisplay.setPanel(document.getElementById("directionsPanel"));
        }
    });
  
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 
  directionsDisplay.setMap(map);
  
}//initialize() 

</script>

</head>
<body onload="initialize()">


<div id="map_canvas" style="width: 640px; height: 480px;"></div>
<div id="directionsPanel" style="width: 640px; height: 480px;"></div>

</body>
</html>