ルート検索マップ - ぱおたんのweb勉強日記

すごいね〜　案内が出てくる
<!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 type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=ja"></script>

<!-- 【2】どんな地図を描くかのメイン処理 -->
<script type="text/javascript">

// ■地図初期化し表示
function initialize(position) {
	
// ■地図を表示する緯度経度を指定する
var latlng = new google.maps.LatLng(35.728926,139.71038)	;

  // ■地図必須プロパティを設定
  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>