「GoogleMaps API V3」ルート検索の結果をルートレンダラで表示

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

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

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

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

ルートとルートレンダラのインスタンスをマップの生成と共に、初期処理にて生成しておきます。
[検索]ボタンをクリックされた時に、ルートの route メソッドを利用してルートのリクエストを行います。
ルート検索の結果は route メソッドで宣言された、コールバック関数に帰ってきます。
コールバック関数は results, status の引数を持ち、statusがOKでなければエラーが発生しています。
statusがOKの場合、ルートレンダラの setDirections メソッドにresultsを渡すことで、ルートが描画されます。
results[0]のプロパティとして overview_path がありますが、緯度・経度の配列として格納されています。

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

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

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

■関連記事

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