ルート案内

2点間のルート案内

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

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

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

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

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

オブジェクト定数	タイプ	説明
origin	SLatLng \| String	（必須）は、ルートの計算を開始する、開始位置を指定します。この値は、String（「シカゴ、イリノイ」など）または LatLng 値として指定できます。
destination	SLatLng \| String	（必須）は、ルートの計算の終了位置を指定します。この値は、String（「シカゴ、イリノイ」など）または LatLng 値として指定できます。
travelMode	DirectionsTravelMode	（必須）は、ルートの計算に使用する交通手段を指定します。有効な値は下記の交通手段を参照。
unitSystem	DirectionsUnitSystem	（省略可能）は、結果を表示するときに使用する単位系を指定します。有効な値は下記の単位系を参照。
waypoints[]	DirectionsWaypoint	（省略可能）は、DirectionsWaypoint の配列を指定します。ウェイポイントは、指定された位置を経由してルートを変更します。ウェイポイントは、以下に示すフィールドを持つオブジェクトリテラルとして指定されます: ・location はウェイポイントの位置を、LatLng または String として指定します。これらはジオコーディングされます。・stopover はウェイポイントがルート上の停止地点であることを示すブール値で、ルートを 2 つのルートに分割する機能があります。
optimizeWaypoints	Boolean	（省略可能）は、指定された waypoints を使用するルートを最適化して、最短ルートを取得するよう指定します。true の場合、ルートサービスは並べ替えた waypoints を waypoint_order フィールドに返します。
provideRouteAlternatives	Boolean	（省略可能）は、true に設定した場合、ルートサービスで複数の代替ルートを返すよう指定します。なお、代替ルートを返すように指定すると、サーバーの応答時間が長くなる場合があります。
avoidHighways	Boolean	（省略可能）は、true に設定した場合、可能な場合は計算されたルートで主な高速道路を除外するよう指定します。
avoidTolls	Boolean	（省略可能）は、true に設定した場合、可能な場合は計算されたルートで有料区間を除外するよう指定します。
region	String	（省略可能）は、ccTLD（「トップレベルドメイン」）の 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>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Google Maps JavaScript API 2点間のルート案内</title>
<style>
p {line-height:180%}
.head-title {width:100%;background:#87ceeb;color:#fff;text-indent:8px;font-weight:700;line-height:180%}
</style>
<script
 src="https://maps.google.com/maps/api/js?key=APIキー"></script>
<script src="サンプル.js"></script>
</head>
<body onload="initialize()">
<div class="head-title">Google Maps APIを使ったサンプル。</div>
<p>2点間のルート案内 マーカードラッグでルート情報が更新</p>
<div id="map_canvas" style="width:100%;height:300px"></div>
</body>
</html>

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

地図サンプルイメージ
2点間のルート案内
サンプルではルートが表示

サンプルイメージ地図は地理院タイル（標高タイル）を加工して作成

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

※リクエスト制限を設けてありますので1日の上限アクセス（割り当て）を超えた場合、サンプルが機能しないこともありますのでご了承ください。