• 小
  • 中
  • 大

2点間のルート案内

ルート(各種の交通手段を使用)は、DirectionsService オブジェクトを使用して計算できます。このオブジェクトは Google Maps API ルート サービスと通信し、サービスはルート リクエストを受信して計算した結果を返します。これらのルート結果をユーザー自身で処理することも、DirectionsRenderer オブジェクトを使用して結果をレンダリングすることもできます。

参照先は:Google Maps JavaScript API V3>DirectionsResults

ルートでは、原点と目的地をテキスト文字列(「東京、大阪」、「名古屋、静岡、京都」など)または LatLng 値として指定できます。ルート サービスは一連のウェイポイントを使用して、複数の部分からなるルートを返すことができます。ルートは、地図上にルートを描画するポリラインとして表示されるか、<div>要素内のテキストによる説明として表示されます(「Williamsburg Bridge ランプを右折」など)。

ルート リクエストルート サービスへのアクセスは、Google Maps API が外部サーバーへの呼び出しを行う必要があるため、非同期に行われます。このため、コールバック methodを渡してリクエストの完了時に実行する必要があります。このコールバック methodにより結果が処理されます。ルート サービスは、独立した routes[] の配列として複数のルートを返すことがあります。

V3 でルートを使用するには、タイプ DirectionsService のオブジェクトを作成して DirectionsService.route() を呼び出してルート サービスを開始し、入力用語を含む DirectionsRequest オブジェクト リテラルとレスポンスの受信時に実行するコールバック methodを渡します。

DirectionsRequest オブジェクト定数には次のフィールドがあります

プオブジェクト定数タイプ説明
originLatLng | String(必須)は、ルートの計算を開始する、開始位置を指定します。この値は、String(「シカゴ、イリノイ」など)または LatLng 値として指定できます。
destinationLatLng | String(必須)は、ルートの計算の終了位置を指定します。この値は、String(「シカゴ、イリノイ」など)または LatLng 値として指定できます。
travelModeDirectionsTravelMode(必須)は、ルートの計算に使用する交通手段を指定します。有効な値は下記の交通手段を参照。
unitSystemDirectionsUnitSystem(省略可能)は、結果を表示するときに使用する単位系を指定します。有効な値は下記の単位系を参照。
waypoints[]DirectionsWaypoint(省略可能)は、DirectionsWaypoint の配列を指定します。ウェイポイントは、指定された位置を経由してルートを変更します。ウェイポイントは、以下に示すフィールドを持つオブジェクト リテラルとして指定されます: ・location はウェイポイントの位置を、LatLng または String として指定します。これらはジオコーディングされます。
・stopover はウェイポイントがルート上の停止地点であることを示すブール値で、ルートを 2 つのルートに分割する機能があります
optimizeWaypointsBoolean(省略可能)は、指定された waypoints を使用するルートを最適化して、最短ルートを取得するよう指定します。true の場合、ルート サービスは並べ替えた waypoints を waypoint_order フィールドに返します 。
provideRouteAlternativesBoolean(省略可能)は、true に設定した場合、ルート サービスで複数の代替ルートを返すよう指定します。なお、代替ルートを返すように指定すると、サーバーの応答時間が長くなる場合があります。
avoidHighwaysBoolean(省略可能)は、true に設定した場合、可能な場合は計算されたルートで主な高速道路を除外するよう指定します。
avoidTollsBoolean(省略可能)は、true に設定した場合、可能な場合は計算されたルートで有料区間を除外するよう指定します。
regionString(省略可能)は、ccTLD(「トップレベル ド<Cン」)の 2 文字の値として指定される地域コードを指定します(詳しくは、後述の地域のバイアスを参照してください)。

交通手段:ルートを計算する際、使用する交通手段を指定する必要があります。現時点でサポートされている交通手段は次のとおりです。

プオブジェクト定数説明
DirectionsTravelMode.DRIVING道路網を使用した標準の運転ルートを示します。
DirectionsTravelMode.WALKING歩行者専用道路と歩道(使用できる場合)を使用した徒歩ルートをリクエストします。
DirectionsTravelMode.BICYLING自転車パスと優先道路を使用する自転車ルートをリクエストします(現在は米国でのみ利用できます)。

注: 徒歩ルートには明確な歩行者用道路が含まれないことがあるため、徒歩ルートから DirectionsResult に警告が返されます。デフォルトの DirectionsRenderer を使用していない場合は、これを表示する必要があります。


単位系:デフォルトでは、ルートは出発地の国または地点の単位系を使用して計算され、表示されます。たとえば、「東京、日本橋」から「大阪、梅田」へのルートはマイルを使用して表示され、この逆のルートはキロメートルで表示されます。この単位系は、次の DirectionsUnitSystem 値のいずれかを使用してリクエスト内で明示的に設定することでオーバーライドできます。

プオブジェクト定数説明
DirectionsUnitSystem.METRICメートル系の使用を指定します。距離はキロメートルを使用して表示されます。
DirectionsUnitSystem.IMPERIAL歩インペリアル系(ヤード法)の使用を指定します。距離はマイルを使用して表示されます。

注: 単位系設定は、ユーザーに表示されるテキストにのみ影響します。

var request = {
origin: "東京",
destination: "大阪",
travelMode: google.maps.DirectionsTravelMode.DRIVING,
//ドライビングモード指定(車)
unitSystem: google.maps.DirectionsUnitSystem.METRIC,
//単位km表示
optimizeWaypoints: true,//最適化された最短距離にする。
avoidHighways: false,//trueで高速道路を使用しない
avoidTolls: false //trueで有料道路を使用しない

};


サンプルコード


サンプル.js


rendererOptions = {
draggable: true,
preserveViewport:false
};
var directionsDisplay =
new google.maps.DirectionsRenderer(rendererOptions);
var directionsService =
new google.maps.DirectionsService();
var map;

function initialize() {
var zoom = 7;
var mapTypeId = google.maps.MapTypeId.ROADMAP

var opts = {
zoom: zoom,
mapTypeId: mapTypeId
};
map = new google.maps.Map
(document.getElementById("map_canvas"),opts);
directionsDisplay.setMap(map);

google.maps.event.addListener(directionsDisplay,
'directions_changed', function(){
});
calcRoute();
}

function calcRoute() {
var request = {
origin: "東京",
destination: "大阪",
travelMode: google.maps.DirectionsTravelMode.DRIVING,
unitSystem: google.maps.DirectionsUnitSystem.METRIC,
optimizeWaypoints: true,
avoidHighways: false,
avoidTolls: false
};
directionsService.route(request,
function(response,status){
if (status == google.maps.DirectionsStatus.OK){
directionsDisplay.setDirections(response);}
});
}

サンプル.html
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps v3 JavaScript API サンプル</title>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="サンプル.js" type="text/javascript"></script>
</head>
<body onload="initialize()">
<p>Google Maps v3 APIを使ったサンプル。</p>
<div id="map_canvas" style="width:500px; height:300px"></div>
</body>
</html>


表示例 2点間のルート案内 マーカードラッグで情報が更新されます。


Google Maps サンプル > 2点間のルート案内