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


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

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

ルート開始:
ルート終了:

ルートとルートレンダラのインスタンスをマップの生成と共に、初期処理にて生成しておきます。
[検索]ボタンをクリックされた時に、ルートの 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?sensor=false" 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>

■関連記事
「GoogleMaps API V3」の使い方その1
「GoogleMaps API V3」の使い方その2
「GoogleMaps API V3」の使い方その3(マーカーの表示)
「GoogleMaps API V3」の使い方その4(イベント)
「GoogleMaps API V3」の使い方その5(続イベント)
「GoogleMaps API V3」の使い方その6(続々イベント)
「GoogleMaps API V3」の使い方その7(ポリライン・ポリゴン)
「GoogleMaps API V3」の使い方その8(ジオコーディング)
「GoogleMaps API V3」の使い方その9(ルート検索)
「GoogleMaps API V3」の使い方その11(さらにInfowindow)

ページのトップへ戻る