Route クラスに移行する

Maps JavaScript API の新しいルート ライブラリには、以前のルートサービスに代わる Route クラスが含まれています。このページでは、以前のルート サービスと新しい Route クラスの違いについて説明し、比較用のコードを紹介します。

ルートサービス（レガシー）とルートクラス（ベータ版）

リクエスト パラメータ

次の表に、以前の Directions サービスと Route クラスのリクエスト パラメータを比較します。

ルートサービス（レガシー） Route（ベータ版）
DirectionsService.route() メソッド Route.computeRoutes() メソッド

必須パラメータ
origin origin
destination destination
travelMode travelMode（省略可）

オプション パラメータ
optimizeWaypoints optimizeWaypointOrder
provideRouteAlternatives computeAlternativeRoutes
avoidFerries、avoidHighways、avoidTolls routeModifiers
drivingOptions departureTime、trafficModel
region region
transitOptions transitPreference
arrivalTime arrivalTime
unitSystem units
waypoints intermediates

メソッドの比較

次の表は、以前の Directions サービスと Route クラスの主なメソッドを比較したものです。

ルートサービス（レガシー） Route（ベータ版）
route() メソッド computeRoutes() メソッド
DirectionsRenderer.setDirections() メソッド createPolylines() メソッド、createWaypointAdvancedMarkers() メソッド

コードの比較

このセクションでは、2 つの類似したコードを比較して、以前の Directions サービスと新しい Route クラスの違いを説明します。コード スニペットは、それぞれの API で経路リクエストを行い、その結果を使用して地図上にポリラインとマーカーを描画するために必要なコードを示しています。

以前の Directions サービスでは、DirectionsRenderer オブジェクトを使用して、地図上に経路の結果を表すポリラインとマーカーを表示します。Routes ライブラリでは、DirectionsRenderer オブジェクトが createPolylines() メソッドと createWaypointAdvancedMarkers() メソッドに置き換えられました。このページでは、以前の Directions Service と新しい Route クラスの違いについて説明し、比較用のコードをいくつか紹介します。

運転ルートを検索

ルートサービス（従来版）

次のコードは、以前の Directions サービスを使用してルートを取得し、DirectionsRenderer を使用して地図上にポリラインとマーカーを描画します。

// Define a simple request.
var request = {
  origin: 'Mountain View, CA',
  destination: 'San Francisco, CA',
  travelMode: 'DRIVING'
};
// Call the Directions Service to get the directions.
directionsService.route(request, function(result, status) {
  if (status == 'OK') {
    directionsRenderer.setDirections(result); // Add polyline and markers to the map.
  }
});

ルートクラス（ベータ版）

次のコードでは、新しい Route クラスを使用して運転ルートを取得し、createPolylines メソッドを使用して地図上にポリラインを描画し、createWaypointAdvancedMarkers メソッドを使用して地図上にマーカーを描画します。

新しい Route クラスでは、マーカーは自動的にレンダリングされません。マーカーをレンダリングするには、createWaypointAdvancedMarkers を呼び出す必要があります。

// Define a simple request.
const request = {
  origin: 'Mountain View, CA',
  destination: 'San Francisco, CA',
  travelMode: 'DRIVING',
  fields: ['path', 'legs'], // Request fields needed to draw polylines.
};

// Call computeRoutes to get the directions.
const {routes} = await Route.computeRoutes(request);

// Use createPolylines to create a polyline for the route.
mapPolylines = routes[0].createPolylines();
// Add polylines to the map
mapPolylines.forEach((polyline) => polyline.setMap(map));

// Create markers to start and end points.
const markers = await routes[0].createWaypointAdvancedMarkers();
// Add markers to the map
markers.forEach((marker) => marker.setMap(map));