「GoogleMaps API V3」ルート検索

「GoogleMaps API V3」の使い方その９（ルート検索）

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

文字列の住所からルート検索を行い、そのルートをマップに表示します。
以下の、「ルート開始」のテキストボックスに開始の住所を入力し、「ルート終了」のテキストボックスに終了の住所を入力します。 [検索]ボタンをクリックするとマップ上にルートが描画されます。
今回の例では、TravelModeがWalkingになっていますので、歩行モードでの表示がされます。

ルート開始：
ルート終了：

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

statusがOKの場合、resultsは DirectionsResult オブジェクトの配列として返されてきます。
返された配列の0番目の値にルート検索が入っています。
results[0]のプロパティとしてoverview_pathがありますが、緯度・経度の配列として格納されています。
これを使ってポリラインを表示してやれば、マップ上にルートが描画されます。

01<head>
02<title>Google Map API v3-9</title>
03<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=MyKeyCode" charset="utf-8"></script>
04<script type="text/javascript">
05var directions; //ルートのインスタンス
06var map;      //マップのインスタンス
07var ds = google.maps.DirectionsStatus;//ルート結果のステータス
08var directionsErr = new Array(); //ルート結果のエラーメッセージ
09directionsErr[ds.INVALID_REQUEST] = "指定された DirectionsRequest が無効です。";
10directionsErr[ds.MAX_WAYPOINTS_EXCEEDED] = "DirectionsRequest に指定された DirectionsWaypoint が多すぎます。ウェイポイントの最大許容数は 8 に出発地点と到着地点を加えた数です。";
11directionsErr[ds.NOT_FOUND] = "出発地点、到着地点、ウェイポイントのうち、少なくとも 1 つがジオコード化できませんでした。";
12directionsErr[ds.OVER_QUERY_LIMIT] = "ウェブページは、短期間にリクエストの制限回数を超えました。";
13directionsErr[ds.REQUEST_DENIED] = "ウェブページではルート サービスを使用できません。";
14directionsErr[ds.UNKNOWN_ERROR] = "サーバー エラーのため、ルート リクエストを処理できませんでした。もう一度試すと正常に処理される可能性があります。";
15directionsErr[ds.ZERO_RESULTS] = "出発地点と到着地点間でルートを見つけられませんでした。";
16 
17// Onload時処理
18function initialize() {
19    // ルートの生成
20    directions = new google.maps.DirectionsService();
21    // Google Mapで利用する初期設定用の変数
22    var mapOptions = {
23        zoom: 17,
24        mapTypeId: google.maps.MapTypeId.ROADMAP,
25        center: new google.maps.LatLng(36.062092, 136.223323)
26    };
27    // GoogleMapの生成
28    map = new google.maps.Map(document.getElementById("map"), mapOptions);
29}
30// [検索]ボタン処理
31function searchRoute() {
32    // テキストボックスから検索の出発・到着を取得
33    var origin = document.getElementById("origin").value;
34    var destination = document.getElementById("destination").value;
35    // ルート検索を依頼する
36    directions.route(
37        { // ルート リクエスト
38          'origin'     : origin,     //出発地点
39          'destination': destination,//到着地点
40          'travelMode' : google.maps.DirectionsTravelMode.WALKING //ルートタイプ:徒歩
41        },
42        function(results, status) { // ルート結果callback関数
43          if (status == ds.OK) {  // 結果がOK ??
44            // ポリライン(折れ線)を生成し、マップに表示
45            var poly = new google.maps.Polyline({
46              map: map,              //マップ
47              path: results.routes[0].overview_path,//ポリラインの座標の列
48              strokeWeight: 5,       //ストローク幅(ピクセル単位)
49              strokeColor: "#f01010",//16進数形式のストロークの色
50              strokeOpacity: 0.5     //ストロークの不透明度(0.0～1.0)
51            });
52            // 検索結果の中心設定
53            map.setCenter(results.routes[0].bounds.getCenter());
54          } else {
55              // 結果がOKではない場合
56              alert("ルート検索が失敗しました。理由: " + directionsErr[status]);
57          }
58        });
59}
60</script> 
61</head> 
62<body onload="initialize();">
63  <div id="map" style="width: 530px; height: 400px;"></div>
64  <div>
65    <input id="origin" type="textbox" value="福井駅（福井）" size="40" ><br />
66    <input id="destination" type="textbox" value="福井県福井市役所" size="40" ><br />
67    <input type="button" value="検索" onclick="searchRoute()">
68  </div>
69</body>
70</html>

「GoogleMaps API V3」 の使い方その９（ルート検索）

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

■関連記事

「GoogleMaps API V3」の使い方その９（ルート検索）