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


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

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

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

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

statusがOKの場合、resultsDirectionsResult オブジェクトの配列として返されてきます。
返された配列の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?sensor=false" 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>

■関連記事
「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」の使い方その10(ルート検索2)
「GoogleMaps API V3」の使い方その11(さらにInfowindow)

ページのトップへ戻る