おやじプログラマー日記 : 「GoogleMap API V3」の使い方その10（ルート検索2）

■ルート検索の結果をルートレンダラで表示

「その９」の例では、ポリラインを使ってルート検索結果を描画しましたが、ルートレンダラを使えばそんな面倒なことはしなくても簡単に描画することができます。

ルートとルートレンダラのインスタンスをマップの生成と共に、初期処理にて生成しておきます。 [検索]ボタンをクリックされた時に、ルートの route メソッドを利用してルートのリクエストを行います。ルート検索の結果はroute メソッドで宣言された、コールバック関数に帰ってきます。コールバック関数は results, status の引数を持ち、statusがOKでなければエラーが発生しています。
statusがOKの場合、ルートレンダラのsetDirectionsメソッドにresultsを渡すことで、ルートが描画されます。
results[0]のプロパティとしてoverview_pathがありますが、緯度・経度の配列として格納されています。
<head> <title>Google Map API v3-10</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=(取得したkeyコード)" charset="utf-8"></script> <script type="text/javascript"> var directions; //ルートのインスタンス var directionRenderer; //ルートレンダラ var map; //マップのインスタンス var ds = google.maps.DirectionsStatus;//ルート結果のステータス var directionsErr = new Array(); //ルート結果のエラーメッセージ directionsErr[ds.INVALID_REQUEST] = "指定された DirectionsRequest が無効です。"; directionsErr[ds.MAX_WAYPOINTS_EXCEEDED] = "DirectionsRequest に指定された DirectionsWaypoint が多すぎます。ウェイポイントの最大許容数は 8 に出発地点と到着地点を加えた数です。"; directionsErr[ds.NOT_FOUND] = "出発地点、到着地点、ウェイポイントのうち、少なくとも 1 つがジオコード化できませんでした。"; directionsErr[ds.OVER_QUERY_LIMIT] = "ウェブページは、短期間にリクエストの制限回数を超えました。"; directionsErr[ds.REQUEST_DENIED] = "ウェブページではルートサービスを使用できません。"; directionsErr[ds.UNKNOWN_ERROR] = "サーバーエラーのため、ルートリクエストを処理できませんでした。もう一度試すと正常に処理される可能性があります。"; directionsErr[ds.ZERO_RESULTS] = "出発地点と到着地点間でルートを見つけられませんでした。"; // Onload時処理 function initialize() { // ルートの生成 directions = new google.maps.DirectionsService(); // ルートレンダラの生成 directionRenderer = new google.maps.DirectionsRenderer(); // Google Mapで利用する初期設定用の変数 var mapOptions = { zoom: 17, mapTypeId: google.maps.MapTypeId.ROADMAP, center: new google.maps.LatLng(36.062092, 136.223323) }; // GoogleMapの生成 map = new google.maps.Map(document.getElementById("map"), mapOptions); // ルートレンダラにマップを関連付ける directionRenderer.setMap(map); } // [検索]ボタン処理 function searchRoute() { // テキストボックスから検索の出発・到着を取得 var origin = document.getElementById("origin").value; var destination = document.getElementById("destination").value; // ルート検索を依頼する directions.route( { // ルートリクエスト 'origin' : origin, //出発地点 'destination': destination,//到着地点 'travelMode' : google.maps.DirectionsTravelMode.WALKING //ルートタイプ:徒歩 }, function(results, status) { // ルート結果callback関数 if (status == ds.OK) { // 結果がOK ?? // 結果をレンダラに渡し、ルートをマップに表示 directionRenderer.setDirections(results); } else { // 結果がOKではない場合 alert("ルート検索が失敗しました。理由: " + directionsErr[status]); } }); } </script> </head> <body onload="initialize();"> <div id="map" style="width: 520px; height: 400px;"></div> <div> <input id="origin" type="textbox" value="福井駅（福井）" size="40" ><br /> <input id="destination" type="textbox" value="福井県福井市役所" size="40" ><br /> <input type="button" value="検索" onclick="searchRoute()"> </div> </body> </html>