以下のページに、実際に検索をして結果を確認するデモを作りました。
デモ画面サンプル


実際に操作してみてください。
以下の表は、この検索操作をして、調べました。
Google Maps API V3
Google Maps API V3 は、google が提供指定している Goog;le Maps を使用するためのAPIです。Goggle Maps API V3 は、JavaScript で簡単にgoogle の地図を表示したり、ルート検索等操作することができます。
今回は、この中から、ルート検索でどのような情報を所得することができるのかを調べてみました。
Google Maps JavaScript API v3 の導入は、googleのデベロッパーガイドを参照してください。
サンプルのコーディング例もあります。
ルート検索コード
以下のようなコードでルート検索ができます。詳細は、上記のデモページのソースコード等で確認してください。
var map = new google.maps.Map(document.getElementById("map_canvas")); var directionsService = new google.maps.DirectionsService(); var rendererOptions = { draggable: true }; var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions); directionsDisplay.setMap(map); directionsDisplay.setPanel(document.getElementById('directions-panel')); directionsService.route(request, function(result, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(result); } });簡単な流れは以下のようになっています。
- googl.maps.Map を生成します。
var map = new google.maps.Map(document.getElementById("map_canvas"));
- ここで指定した、map_canvas の位置に地図が表示されます。
- 地図の表示方法は、google maps のサンプル等を参考にしてください。
- ルート検索のサービスgooglre.maos.DirectionsServiceを生成して、google maps に結び付けます。
-
ここでは、検索した後のルート経路をを地図上でドラッグして、調整てきるように、rendererOptions で、draggable=trueを指定しています。
var directionsService = new google.maps.DirectionsService(); var rendererOptions = { draggable: true }; var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions); directionsDisplay.setMap(map);
- ルート検索の結果の情報をテキストで表示するための、Panelの指定をすると、.ルート検索の情報をテキスト表示できます。
- 必須ではありません。
directionsDisplay.setPanel(document.getElementById('directions-panel'));
- ルート検索結果を以下のようにセットします。
directionsService.route(request, function(result, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(result); } });
- 必須ではありません。
- ルート検索をします。
directionsService.route(request, function(result, status) {
DirectionsResultの構造
DirectionsResult は以下のような構造となっています。主なオブジェクトのみ記述しています。
DirectionsResult
┃
┃
┗━DirectionsRouteの配列 検索した結果のルート情報が格納されます
┃
┃
┣━TransitFare
┃
┃
┃
┗━DirectionsLegの配列 waypoint等で分割されたルートの情報が格納されます
┃
┃
┣━Distance
┃
┃
┃
┣━Duration
┃
┃
┃
┗━DirectionsStepの配列 DirectionsLegを直線に分割した情報がdirectionsStepとして格納されています。
┃
┃
┣━Distance
┃
┃
┃
┣━Duration
┃
┃
┃
┗━DirectionsStepの配列 DirectionsStepsが階層化されています。この内容はまだ不明です
┃
┃
┗━ ・・・続く
DirectionsResult詳細
不明な部分もまだ多くありますが、実際にルート検索した結果から、わかった情報を以下に記載します。実際にDirectionsService調査デモのページで操作してみてください。
DirectionsResult
- routes
DirectionsRoute
検索された一つのルートの情報が格納されています。- bounds
- ルートを囲む矩形(緯度、経度)が格納されています。
- legs
- waypointで分割されたパスごとに、legsの配列として格納されているようです。
- overview_path
- ルートのパスのそれぞれのポイントの緯度経度が格納されています。
- このパスをgoogle.maps.Polylineに与えると、地図上にルートのパスが表示されます。
var routeLinePath = new google.maps.Polyline({ path: routeResult.routes[0].overview_path, geodesic: true, strokeColor: '#FF0000', strokeOpacity: 0.5, strokeWeight: 6 });
- legs,step.path の中のpathのほうがより細かい情報となっているようです。
- ルート検索(directionsService.route) で検索した結果が表示されている地図の上に、overview_pathでPolylineを描画したら以下のように差がありました。
- overview_polyline
- ルート検索のパスが、文字列で格納されています。
- パスの情報を送信する時等に使えると思います。
- google.maps.Polyline のパスに指定すると、ルートのパスを地図上に表示できました。
var routeLinePath = new google.maps.Polyline({ path: google.maps.geometry.encoding.decodePath( routeResult.routes[0].overview_polyline), geodesic: true, strokeColor: '#0000FF', strokeOpacity: 0.5, strokeWeight: 6 });
- warning
-
DirectionsRenderersetPanel の表示先に表示される以下の文言が格納されていました。
-
「徒歩ルートの表示は Beta 版です。 注意 – このルートには歩道のない道が含まれている可能性があります。」
-
-
DirectionsRenderersetPanel の表示先に表示される以下の文言が格納されていました。
DirectionsLeg
waypointで分割したルートの情報が格納されているようです。- steps
- 曲がり角等毎に分割した情報をDirectionsStepの配列として格納してあります。
DirectionsStep
- distance
- 距離情報が格納れています。
- duration
- 移動時間が格納されています。
- instructions に「横断歩道を渡る」等、DirectionsRendererのsetPanelで指定した領域に表示されているものと同じテキストが格納されていました。
- path
- steps
- さらに詳細な情報がDirectionsStepの配列として格納されていると思われますが、実際に格納されている情報はまだ確認できていません。