A地点からB地点までのルートマップを表示する（詳細・運転モード編）

APIの活用
東京駅から埼玉県の長瀞駅まで車を運転して行くルートマップを表示します。

APIの指定項目を詳細に指定するだけで、きめ細かいドライブルートの指示が得られます。
こんな情報が自動的に出てくるなんてすごいですね。


html

<!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]-->

<!--【１】Google Maps APIを呼び出し -->
<script 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.681382,139.766084);
	
	//■地図必須プロパテイを設定
	var myOptions ={
		
		//■ズームレベルの指定0〜17
		zoom:15,
		
		//■地図の中心を指定（上記で設定の緯度経度latlng）
		center:latlng,
		
		//■地図のタイプ設定
		// ROADMAP:デフォルト、SATELLITE:写真タイル、HYBRID:写真タイルと主要な機能、TERRAIN:物理的な起伏を示すタイル
		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"));
	}
});

//■<div id="map_canvas">と結びつけて、その領域に地図を描く
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>