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

■住所文字列からルート検索し、ルート描画

文字列の住所からルート検索を行い、そのルートをマップに表示します。

ルートのインスタンスをマップの生成と共に、初期処理にて生成しておきます。 [検索]ボタンをクリックされた時に、ルートの route メソッドを利用してルートのリクエストを行います。ルート検索の結果はroute メソッドで宣言された、コールバック関数に帰ってきます。コールバック関数は results, status の引数を持ち、statusがOKでなければエラーが発生しています。

statusがOKの場合、resultsはDirectionsResult オブジェクトの配列として返されてきます。返された配列の0番目の値にルート検索が入っています。 results[0]のプロパティとしてoverview_pathがありますが、緯度・経度の配列として格納されています。これを使ってポリラインを表示してやれば、マップ上にルートが描画されます。
<head> <title>Google Map API v3-9</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 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(); // 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); } // [検索]ボタン処理 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 ?? // ポリライン(折れ線)を生成し、マップに表示 var poly = new google.maps.Polyline({ map: map, //マップ path: results.routes[0].overview_path,//ポリラインの座標の列 strokeWeight: 5, //ストローク幅(ピクセル単位) strokeColor: "#f01010",//16進数形式のストロークの色 strokeOpacity: 0.5 //ストロークの不透明度(0.0～1.0) }); // 検索結果の中心設定 map.setCenter(results.routes[0].bounds.getCenter()); } else { // 結果がOKではない場合 alert("ルート検索が失敗しました。理由: " + directionsErr[status]); } }); } </script> </head> <body onload="initialize();"> <div id="map" style="width: 530px; 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>