JavaScript の配送追跡ライブラリを使用して配送を追跡する

JavaScript Shipment Tracking Library を使用すると、Fleet Engine で追跡されている車両の位置と関心のある場所を可視化できます。このライブラリには、標準の google.maps.Map エンティティとデータ コンポーネントを差し替えて Fleet Engine に接続するための JavaScript マップ コンポーネントが含まれています。JavaScript Shipment Tracking Library を使用すると、ウェブ アプリケーションから、カスタマイズ可能な配送追跡をアニメーションで提供できます。

コンポーネント

JavaScript Shipment Tracking Library は、目的地までの車両とルートを可視化するコンポーネントや、ドライバーの到着予定時刻や残りの走行距離の未加工データフィードを提供します。

Shipment Tracking の地図表示

地図表示コンポーネントは、車両と目的地の位置を可視化します。車両のルートがわかっている場合、地図表示コンポーネントは、その車両が予測された経路に沿って移動するとアニメーション化します。

配送先プロバイダ

配送位置情報プロバイダは、追跡対象オブジェクトの位置情報を配送追跡マップにフィードし、ファースト ワンマイルとラスト ワンマイルの配送を追跡します。

配送拠点のプロバイダを利用して、以下を追跡できます。

• 荷物の集荷場所または配達場所。
• 配達車両の位置と経路。

追跡対象の位置情報オブジェクト

位置情報プロバイダは、車両や目的地などのオブジェクトの位置を追跡します。

宛先のロケーション

目的地とは、旅程の終点となる場所のことです。配送追跡の場合は、予定されているタスクの場所です。

車両の位置情報

車両位置情報は、車両の追跡位置です。必要に応じて車両のルートを含めることができます。

認証トークン取得ツール

Fleet Engine に保存されている位置情報へのアクセスを制御するには、サーバーに Fleet Engine 用の JSON Web Token（JWT）作成サービスを実装する必要があります。次に、ウェブ アプリケーションの一部として認証トークン フェッチャーを実装し、JavaScript Journey Sharing Library を使用して位置情報へのアクセスを認証します。

スタイル オプション

マーカーとポリラインのスタイルは、地図上のトラッキング対象ロケーション オブジェクトの外観を決定します。カスタム スタイル オプションを使用すると、ウェブ アプリケーションのスタイルに合わせてデフォルトのスタイルを変更できます。

追跡中の場所の公開設定を管理します

このセクションでは、地図上で追跡されているオブジェクトの表示設定について説明します。 これらのルールは、次の 2 つのカテゴリのオブジェクトに適用されます。

• 位置マーカー
• タスクデータ

位置マーカーの公開設定

出発地と目的地のすべての位置マーカーが、地図上に常に表示されます。 たとえば、配送場所は、配送状況に関係なく、常に地図に表示されます。

タスクデータの可視性

このセクションでは、車両の位置情報や残りのルートなど、タスクデータに適用されるデフォルトの公開設定ルールについて説明します。多くのタスクをカスタマイズできますが、すべてではありません。

• 使用できないタスク -- これらのタスクの公開設定はカスタマイズできません。
• アクティブな車両タスク -- これらのタイプのタスクをカスタマイズできます。
• 非アクティブな車両タスク -- これらのタスクの公開設定はカスタマイズできません。

利用できないタスク

追跡中のタスクへのルート上に利用不可タスクが 1 つ以上ある場合（ドライバーが休憩中や車両に給油中など）は、車両は表示されません。予想到着時刻と予想タスク完了時刻は引き続き利用できます。

アクティブな車両タスク

TaskTrackingInfo オブジェクトは、配送追跡ライブラリ内で表示可能な多くのデータ要素を提供します。デフォルトでは、これらのフィールドは、タスクが車両に割り当てられ、車両がタスクから 5 駅以内にある場合に表示されます。タスクが完了またはキャンセルされると、可視性は終了します。フィールドは次のとおりです。

• ポリラインをルーティングする
• 到着までの予想時間
• タスク完了までの予想時間
• タスクまでの残りの走行距離
• 残りの経由地数
• 車両の位置情報

Fleet Engine 内でタスクを作成または更新するときに、タスクに TaskTrackingViewConfig を設定することで、タスクごとに公開設定をカスタマイズできます。これにより、個々のデータ要素が使用可能なタイミングに関するルールが作成されます。これらの条件は、次の基準（以下では公開設定オプションと呼ばれます）に基づいて設定できます。

• 残りの経由地数
• 到着予定時刻までの時間
• 残りの走行距離
• 常に表示
• 非表示

各データ要素は、1 つの公開設定オプションにのみ関連付けることができます。OR または AND を使用して条件を組み合わせることはできません。

カスタマイズの例を以下に示します。このカスタマイズのルールは次のとおりです。

• 車両が 3 つの駅 / 停留所内にある場合、ルートのポリラインを表示します。
• 残りの走行距離が 5,000 メートル未満の場合は、到着予定時刻が表示されます。
• 残りの経由地数を表示しない。
• 他の各フィールドは、車両がタスクから 5 駅以内にある場合に、デフォルトの表示を維持します。

"taskTrackingViewConfig": {
  "routePolylinePointsVisibility": {
    "remainingStopCountThreshold": 3
  },
  "estimatedArrivalTimeVisibility": {
    "remainingDrivingDistanceMetersThreshold": 5000
  },
  "remainingStopCountVisibility": {
    "never": true
  }
}

サポートチームに連絡して、プロジェクトのデフォルトの公開設定をカスタマイズすることもできます。

ルートのポリラインと車両の位置の公開設定ルール:

経路のポリラインを表示する場合は、車両の位置も表示できる必要があります。それ以外の場合は、ポリラインの端で車両の位置を示すことができます。つまり、経路のポリラインには、それほど厳しくない表示設定を指定することはできません。

有効な経路のポリラインと車両の位置の公開設定の組み合わせを指定するには、以下のルールに従う必要があります。

• 経路のポリラインと車両の場所の表示オプション タイプが同じ場合:

  • 表示オプションが残りの停車地数、到着予定時刻までの所要時間、または残りの走行距離である場合、経路のポリラインには、車両の位置でこの表示オプションに設定された値以下の値を指定する必要があります。次に例を示します。

  "taskTrackingViewConfig": {
    "routePolylinePointsVisibility": {
      "remainingStopCountThreshold": 3
    },
    "vehicleLocationVisibility": {
      "remainingStopCountThreshold": 5
    },
  }
  

  • 経路のポリラインに「常に表示」オプションを設定する場合は、車両の位置に「常に表示」オプションを提供する必要があります。
  • 車両の位置情報に非表示の公開設定オプションがある場合、経路のポリラインには非表示の公開設定オプションも指定する必要があります。

• 経路のポリラインと車両の位置に異なる表示オプション タイプがある場合、車両の位置情報は両方の表示オプションが満たされた場合にのみ表示されます。

  次に例を示します。

  "taskTrackingViewConfig": {
    "routePolylinePointsVisibility": {
      "remainingStopCountThreshold": 3
    },
    "vehicleLocationVisibility": {
      "remainingDrivingDistanceMetersThreshold": 3000
    },
  }
  

  この例では、車両の位置情報は、残りの停車回数が 3 回以上で、かつ残りの走行距離が 3, 000 m 以上の場合にのみ表示されます。

JavaScript Journey Sharing Library を使ってみる

JavaScript Journey Sharing Library を使用する前に、Fleet Engine と API キーの取得について理解しておいてください。

配送を追跡するには、まずトラッキング ID の申し立てを作成します。

トラッキング ID の申し立てを作成する

配送場所プロバイダを使用して配送を追跡するには、トラッキング ID クレームを含む JSON Web Token（JWT）を作成します。

JWT ペイロードを作成するには、キー trackingid を使用して承認セクションにクレームを追加します。値を配送追跡 ID に設定します。

次の例は、トラッキング ID によるトラッキング用のトークンを作成する方法を示しています。

{
  "alg": "RS256",
  "typ": "JWT",
  "kid": "private_key_id_of_consumer_service_account"
}
.
{
  "iss": "consumer@yourgcpproject.iam.gserviceaccount.com",
  "sub": "consumer@yourgcpproject.iam.gserviceaccount.com",
  "aud": "https://fleetengine.googleapis.com/",
  "iat": 1511900000,
  "exp": 1511903600,
  "scope": "https://www.googleapis.com/auth/xapi",
  "authorization": {
     "trackingid": "tid_54321",
   }
}

認証トークン フェッチャーを作成する

プロジェクトのサービス アカウント証明書を使用して、サーバー上に適切なクレームで作成されたトークンを取得する認証トークン フェッチャーを作成できます。トークンはサーバーにのみ作成し、クライアント間では共有しないでください。そうしないと、システムのセキュリティが侵害されます。

フェッチャーは、Promise でラップされた 2 つのフィールドを含むデータ構造を返す必要があります。

• 文字列 token。
• 数値 expiresInSeconds。トークンは、取得後、ここで指定した時間が経過すると期限切れになります。

JavaScript 配送トラッキング ライブラリは、次のいずれかに該当する場合に、認証トークン フェッチャーを介してトークンをリクエストします。

• 有効なトークンがない場合（新しいページ読み込みでフェッチャーが呼び出されていない場合や、フェッチャーがトークンを返していない場合など）。
• 以前に取得したトークンの有効期限が切れている。
• 以前に取得したトークンの有効期限が 1 分以内に切れている。

それ以外の場合、ライブラリは以前に発行された引き続き有効なトークンを使用し、フェッチャーは呼び出しません。

次の例は、認証トークン フェッチャーを作成する方法を示しています。

function authTokenFetcher(options) {
  // options is a record containing two keys called
  // serviceType and context. The developer should
  // generate the correct SERVER_TOKEN_URL and request
  // based on the values of these fields.
  const response = await fetch(SERVER_TOKEN_URL);
  if (!response.ok) {
    throw new Error(response.statusText);
  }
  const data = await response.json();
  return {
    token: data.Token,
    expiresInSeconds: data.ExpiresInSeconds
  };
}

function authTokenFetcher(options: {
  serviceType: google.maps.journeySharing.FleetEngineServiceType,
  context: google.maps.journeySharing.AuthTokenContext,
}): Promise<google.maps.journeySharing.AuthToken> {
  // The developer should generate the correct
  // SERVER_TOKEN_URL based on options.
  const response = await fetch(SERVER_TOKEN_URL);
  if (!response.ok) {
    throw new Error(response.statusText);
  }
  const data = await response.json();
  return {
    token: data.token,
    expiresInSeconds: data.expiration_timestamp_ms - Date.now(),
  };
}

トークンを作成するためにサーバーサイドのエンドポイントを実装する場合は、次の点に注意してください。

• エンドポイントはトークンの有効期限を返す必要があります。上記の例では、data.ExpiresInSeconds として指定されています。
• 認証トークン フェッチャーは、次の例に示すように、有効期限（フェッチ時点からの秒数）をライブラリに渡す必要があります。
• SERVER_TOKEN_URL はバックエンドの実装によって異なります。サンプルアプリ バックエンドの URL は次のとおりです。
  • https://SERVER_URL/token/delivery_driver/DELIVERY_VEHICLE_ID
  • https://SERVER_URL/token/delivery_consumer/TRACKING_ID
  • https://SERVER_URL/token/fleet_reader

HTML から地図を読み込む

次の例は、指定した URL から JavaScript 配送追跡ライブラリを読み込む方法を示しています。callback パラメータは、API の読み込み後に initMap 関数を実行します。defer 属性を使用すると、ブラウザは API の読み込み中、ページの残りの部分をレンダリングし続けます。

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing" defer></script>

配送を追跡する

このセクションでは、JavaScript Shipment Tracking Library を使用して、荷物の集荷または配達を追跡する方法について説明します。コードを実行する前に、スクリプトタグで指定されたコールバック関数からライブラリを読み込む必要があります。

配送先プロバイダをインスタンス化する

JavaScript Shipment Tracking Library では、Fleet Engine Deliveries API の位置情報プロバイダが事前定義されています。プロジェクト ID とトークン ファクトリへの参照を使用して、トークン ファクトリをインスタンス化します。

locationProvider =
    new google.maps.journeySharing
        .FleetEngineShipmentLocationProvider({
          projectId: 'your-project-id',
          authTokenFetcher: authTokenFetcher, // the token fetcher defined in the previous step

          // Optionally, you may specify tracking ID to
          // immediately start tracking.
          trackingId: 'your-tracking-id',
});

locationProvider =
    new google.maps.journeySharing
        .FleetEngineShipmentLocationProvider({
          projectId: 'your-project-id',
          authTokenFetcher: authTokenFetcher, // the token fetcher defined in the previous step

          // Optionally, you may specify tracking ID to
          // immediately start tracking.
          trackingId: 'your-tracking-id',
});

マップビューを初期化する

JavaScript Journey Sharing ライブラリを読み込んだ後、地図ビューを初期化して HTML ページに追加します。ページには、地図表示を保持する <div> 要素を含める必要があります。以下の例で、<div> 要素の名前は map_canvas です。

競合状態を回避するには、地図の初期化後に呼び出されるコールバックに位置情報プロバイダのトラッキング ID を設定します。

const mapView = new 
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'), 
  locationProviders: [locationProvider],
  vehicleMarkerSetup: vehicleMarkerSetup,
  anticipatedRoutePolylineSetup:
      anticipatedRoutePolylineSetup,
  // Any undefined styling options will use defaults.
});

// If you did not specify a tracking ID in the location
// provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.trackingId = 'your-tracking-id';

// Give the map an initial viewport to allow it to 
// initialize; otherwise the 'ready' event above may 
// not fire. The user also has access to the mapView
// object to customize as they wish.
mapView.map.setCenter({lat: 37.2, lng: -121.9});
mapView.map.setZoom(14);

const mapView = new 
    google.maps.journeySharing.JourneySharingMapView({
  document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  vehicleMarkerSetup: vehicleMarkerSetup,
  anticipatedRoutePolylineSetup:
      anticipatedRoutePolylineSetup,
 // Any undefined styling options will use defaults.
});

// If you did not specify a tracking ID in the location
// provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.trackingId = 'your-tracking-id';

// Give the map an initial viewport to allow it to
// initialize; otherwise the 'ready' event above may 
// not fire. The user also has access to the mapView
// object to customize as they wish.
mapView.map.setCenter({lat: 37.2, lng: -121.9});
mapView.map.setZoom(14);

トラッキング ID

位置情報プロバイダに提供されるトラッキング ID は、同じ荷物の受け取りタスクと配達タスクや、複数回の配達の失敗など、複数のタスクに対応している場合があります。1 つのタスクを選択して、配送追跡マップに表示する。表示されるタスクは次のように決定されます。

1. 未解決の集荷タスクが 1 つだけの場合は、それが表示されます。保留中の受け取りタスクが複数ある場合は、エラーが発生します。
2. 未完了の配信タスクが 1 つだけの場合は、そのタスクが表示されます。未処理の配信タスクが複数ある場合は、エラーが発生します。
3. 終了した配信タスクがある場合:
   • 終了した配信タスクが 1 つだけの場合は、そのタスクが表示されます。
   • 終了した配信タスクが複数ある場合は、結果時刻が最新のタスクが表示されます。
   • 終了した配信タスクが複数あり、そのどれにも結果時刻がない場合、エラーが生成されます。
4. 終了した集荷タスクがある場合:
   • 終了した集荷タスクが 1 つだけの場合は、それが表示されます。
   • 終了した集荷タスクが複数ある場合は、最新の結果時刻を持つタスクが表示されます。
   • 終了した集荷タスクが複数あり、そのどれにも結果時刻がない場合、エラーが生成されます。
5. それ以外の場合は、タスクは表示されません。

変更イベントをリッスンする

タスクに関するメタ情報は、位置情報プロバイダを使用してタスク トラッキング情報オブジェクトから取得できます。メタ情報には、到着予定時刻、残りの停車地の数、乗車または配達までの残り距離が含まれます。メタ情報が変更されると、update イベントがトリガーされます。次の例は、これらの変更イベントをリッスンする方法を示しています。

locationProvider.addListener('update', e => {
  // e.taskTrackingInfo contains data that may be useful
  // to the rest of the UI.
  console.log(e.taskTrackingInfo.remainingStopCount);
});

locationProvider.addListener('update',
    (e: google.maps.journeySharing.FleetEngineShipmentLocationProviderUpdateEvent) => {
  // e.taskTrackingInfo contains data that may be useful
  // to the rest of the UI.
  console.log(e.taskTrackingInfo.remainingStopCount);
});

エラーを処理する

配送情報のリクエストから非同期に発生するエラーにより、エラーイベントがトリガーされます。次の例は、エラーを処理するためにこれらのイベントをリッスンする方法を示しています。

locationProvider.addListener('error', e => {
  // e.error is the error that triggered the event.
  console.error(e.error);
});

locationProvider.addListener('error', (e: google.maps.ErrorEvent) => {
  // e.error is the error that triggered the event.
  console.error(e.error);
});

注: 予期しないエラーを処理できるように、ライブラリ呼び出しを try...catch ブロックでラップしてください。

トラッキングを停止

位置情報プロバイダによる荷物の追跡を停止するには、位置情報プロバイダからトラッキング ID を削除します。

locationProvider.trackingId = '';

locationProvider.trackingId = '';

地図表示から位置情報プロバイダを削除する

次の例は、地図表示から位置情報プロバイダを削除する方法を示しています。

mapView.removeLocationProvider(locationProvider);

mapView.removeLocationProvider(locationProvider);

基本地図のデザインをカスタマイズする

地図コンポーネントのデザインをカスタマイズするには、クラウドベースのツールを使用するか、コードで直接オプションを設定して、地図のスタイルを設定します。

Cloud ベースのマップのスタイル設定を使用する

Cloud ベースのマップのスタイル設定を使用すると、コードを変更することなく、Google Cloud コンソールから Google マップを使用するすべてのアプリ用の地図のスタイルを作成、編集できます。地図のスタイルは、Cloud プロジェクトにマップ ID として保存されます。JavaScript Shipment Tracking 地図にスタイルを適用するには、JourneySharingMapView の作成時に mapId を指定します。JourneySharingMapView をインスタンス化した後は、mapId フィールドを変更または追加できません。次の例は、マップ ID を使用して、以前に作成した地図のスタイルを有効にする方法を示しています。

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
  // Any other styling options.
});

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
  // Any other styling options.
});

コードベースの地図のスタイル設定を使用する

地図のスタイル設定をカスタマイズするもう 1 つの方法は、JourneySharingMapView の作成時に mapOptions を設定することです。

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    styles: [
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "color": "#CCFFFF" }
        ]
      }
    ]
  }
});

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    styles: [
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "color": "#CCFFFF" }
        ]
      }
    ]
  }
});

マーカーのカスタマイズ機能を使用する

JavaScript Shipment Tracking Library を使用すると、地図に追加するマーカーの外観をカスタマイズできます。それには、マーカーのカスタマイズを指定します。これにより、地図にマーカーを追加する前に、またマーカーを更新するたびに、配送追跡ライブラリによってそのカスタマイズが適用されます。

最も簡単なカスタマイズは、同じタイプのすべてのマーカーに適用される MarkerOptions オブジェクトを指定することです。オブジェクトで指定した変更は、各マーカーが作成された後に適用され、デフォルトのオプションを上書きします。

より高度なオプションとして、カスタマイズ関数を指定できます。カスタマイズ関数を使うと、データに基づいてマーカーのスタイルを設定できるほか、マーカーにクリック処理などのインタラクティブ アクティビティを追加できます。具体的には、マーカーが表すオブジェクトの種類（車両または配送先）に関するデータをカスタマイズ関数に渡します。これにより、マーカー要素自体の現在の状態（目的地までの予定されていた停車地の数など）に基づいて、マーカーのスタイル設定が変化します。Fleet Engine 外部のソースのデータと結合し、その情報に基づいてマーカーのスタイルを設定することも可能です。

配送追跡ライブラリの FleetEngineShipmentLocationProviderOptions では、次のカスタマイズ パラメータを利用できます。

• deliveryVehicleMarkerCustomization
• destinationMarkerCustomization

MarkerOptions を使用してマーカーのスタイルを変更する

次の例は、MarkerOptions オブジェクトを使って車両マーカーのスタイル設定を設定する方法を示しています。マーカーのスタイルをカスタマイズするには、このパターンに上記のマーカーのカスタマイズ方法を使用します。

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

カスタマイズ関数を使用してマーカーのスタイルを変更する

次の例は、車両マーカーのスタイル設定を設定する方法を示しています。上記のマーカーのカスタマイズ パラメータを使ってマーカーのスタイルをカスタマイズするには、このパターンを使用します。

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.taskTrackingInfo.remainingStopCount;
    params.marker.setLabel(`${stopsLeft}`);
  };

deliveryVehicleMarkerCustomization =
  (params: ShipmentMarkerCustomizationFunctionParams) => {
    const stopsLeft = params.taskTrackingInfo.remainingStopCount;
    params.marker.setLabel(`${stopsLeft}`);
  };

マーカーにクリック処理を追加する

次の例は、車両マーカーにクリック処理を追加する方法を示しています。 このパターンでは、上記のマーカーのカスタマイズ パラメータを使用して、任意のマーカーにクリック処理を追加します。

deliveryVehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

deliveryVehicleMarkerCustomization =
  (params: ShipmentMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

ポリラインのカスタマイズを使用する

配送追跡ライブラリを使用すると、地図上の荷物の経路のデザインをカスタマイズすることもできます。ライブラリは、配送のアクティブなパスまたは残りのパスの座標ペアごとに google.maps.Polyline オブジェクトを作成します。ポリラインのカスタマイズを指定することで、Polyline オブジェクトのスタイルを設定できます。ライブラリは、オブジェクトを地図に追加する前と、オブジェクトに使用されているデータが変更されたという 2 つの状況で、これらのカスタマイズを適用します。

マーカーのカスタマイズと同様に、PolylineOptions のセットを指定して、それらが作成または更新されたときに、一致したすべての Polyline オブジェクトに適用できます。

同様に、カスタマイズ関数を指定することもできます。カスタマイズ関数を使用すると、Fleet Engine によって送信されたデータに基づいてオブジェクトのスタイルを個別に設定できます。この関数は、配送の現在の状態に基づいて各オブジェクトのスタイルを変更できます。たとえば、Polyline オブジェクトを濃い色にしたり、車両の動きが遅いときに色を濃くしたりできます。Fleet Engine の外部のソースと結合し、その情報に基づいて Polyline オブジェクトのスタイルを設定できます。

FleetEngineShipmentLocationProviderOptions で提供されるパラメータを使用してカスタマイズを指定できます。車両の移動経路のさまざまな状態（すでに走行済み、アクティブに走行中、未走行）のカスタマイズを設定できます。パラメータは次のとおりです。

• takenPolylineCustomization: すでに移動しているパスの場合。
• activePolylineCustomization: アクティブに移動する経路。
• remainingPolylineCustomization: まだ移動していないパス。

PolylineOptions を使用して Polyline オブジェクトのスタイルを変更する

次の例は、PolylineOptions を使用して Polyline オブジェクトのスタイル設定を構成する方法を示しています。このパターンに沿って、前述のポリラインのカスタマイズを使用して Polyline オブジェクトのスタイルをカスタマイズします。

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

カスタマイズ関数を使用して Polyline オブジェクトのスタイルを変更する

次の例は、アクティブな Polyline オブジェクトのスタイル設定を設定する方法を示しています。このパターンに従って、前述のポリラインのカスタマイズ パラメータを使用して Polyline オブジェクトのスタイルをカスタマイズします。

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.taskTrackingInfo.remainingDrivingDistanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params: ShipmentPolylineCustomizationFunctionParams) => {
    const distance = params.taskTrackingInfo.remainingDrivingDistanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

Polyline オブジェクトの公開設定を制御する

デフォルトでは、すべての Polyline オブジェクトが表示されます。Polyline オブジェクトを非表示にするには、その visible プロパティを設定します。

remainingPolylineCustomization = {visible: false};

remainingPolylineCustomization = {visible: false};

車両または位置マーカーの InfoWindow を表示する

InfoWindow を使用すると、車両や位置マーカーに関する追加情報を表示できます。

次の例は、InfoWindow を作成して車両マーカーに追加する方法を示しています。

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

locationProvider.addListener('update', e => {
  const stopsCount =
      e.taskTrackingInfo.remainingStopCount;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

  // 2. Attach the info window to a vehicle marker.
  // This property can return multiple markers.
  const marker = mapView.vehicleMarkers[0];
  infoWindow.open(mapView.map, marker);
});

// 3. Close the info window.
infoWindow.close();

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineShipmentLocationProviderUpdateEvent) => {
  const stopsCount =
      e.taskTrackingInfo.remainingStopCount;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

  // 2. Attach the info window to a vehicle marker.
  // This property can return multiple markers.
  const marker = mapView.vehicleMarkers[0];
  infoWindow.open(mapView.map, marker);
});

// 3. Close the info window.
infoWindow.close();

自動適合を無効にする

自動適合を無効にすると、車両と予想ルートにビューポートが自動的に適合しないように地図を設定できます。次の例は、乗車経路共有のマップビューを構成するときに、自動適合を無効にする方法を示しています。

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  automaticViewportMode:
      google.maps.journeySharing
          .AutomaticViewportMode.NONE,
  ...
});

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineShipmentLocationProviderUpdateEvent) => {
  const stopsCount =
      e.taskTrackingInfo.remainingStopCount;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

  // 2. Attach the info window to a vehicle marker.   
  // This property can return multiple markers.
  const marker = mapView.vehicleMarkers[0];
  infoWindow.open(mapView.map, marker);
});

// 3. Close the info window.
infoWindow.close();

既存の地図を置き換える

JavaScript Shipment Tracking Library を使用すると、マーカーやその他のカスタマイズが含まれている既存の地図を、カスタマイズ内容を失うことなく置き換えることができます。

たとえば、マーカーが表示されている標準の google.maps.Map エンティティを含むウェブページがあるとします。

<!DOCTYPE html>
<html>
  <head>
    <style>
       /* Set the size of the div element that contains the map */
      #map {
        height: 400px;  /* The height is 400 pixels */
        width: 100%;  /* The width is the width of the web page */
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>
    <script>
// Initialize and add the map
function initMap() {
  // The location of Uluru
  var uluru = {lat: -25.344, lng: 131.036};
  // The map, initially centered at Mountain View, CA.
  var map = new google.maps.Map(document.getElementById('map'));
  map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});

  // The marker, now positioned at Uluru
  var marker = new google.maps.Marker({position: uluru, map: map});
}
    </script>
    <!-- Load the API from the specified URL.
       * The async attribute allows the browser to render the page while the API loads.
       * The key parameter will contain your own API key (which is not needed for this tutorial).
       * The callback parameter executes the initMap() function.
    -->
    <script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

JavaScript Journey 共有ライブラリを追加するには:

1. 認証トークン ファクトリのコードを追加します。
2. initMap() 関数で位置情報プロバイダを初期化します。
3. initMap() 関数でマップビューを初期化します。ビューには地図が含まれます。
4. カスタマイズをマップビューの初期化用のコールバック関数に移動します。
5. 位置情報ライブラリを API ローダに追加します。

次の例は、行う変更を示しています。

<!DOCTYPE html>
<html>
  <head>
    <style>
       /* Set the size of the div element that contains the map */
      #map {
        height: 400px;  /* The height is 400 pixels */
        width: 100%;  /* The width is the width of the web page */
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>
    <script>
let locationProvider;

// (1) Authentication Token Fetcher
function authTokenFetcher(options) {
  // options is a record containing two keys called 
  // serviceType and context. The developer should
  // generate the correct SERVER_TOKEN_URL and request
  // based on the values of these fields.
  const response = await fetch(SERVER_TOKEN_URL);
      if (!response.ok) {
        throw new Error(response.statusText);
      }
      const data = await response.json();
      return {
        token: data.Token,
        expiresInSeconds: data.ExpiresInSeconds
      };
}

// Initialize and add the map
function initMap() {
  // (2) Initialize location provider.
  locationProvider = new google.maps.journeySharing.FleetEngineShipmentLocationProvider({
    YOUR_PROVIDER_ID,
    authTokenFetcher,
  });

  // (3) Initialize map view (which contains the map).
  const mapView = new google.maps.journeySharing.JourneySharingMapView({
    element: document.getElementById('map'),
    locationProviders: [locationProvider],
    // any styling options
  });

  locationProvider.trackingId = TRACKING_ID;

    // (4) Add customizations like before.

    // The location of Uluru
    var uluru = {lat: -25.344, lng: 131.036};
    // The map, initially centered at Mountain View, CA.
    var map = mapView.map;
    map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});
    // The marker, now positioned at Uluru
    var marker = new google.maps.Marker({position: uluru, map: map});
  };

    </script>
    <!-- Load the API from the specified URL
      * The async attribute allows the browser to render the page while the API loads
      * The key parameter will contain your own API key (which is not needed for this tutorial)
      * The callback parameter executes the initMap() function
      *
      * (5) Add the journey sharing library to the API loader.
    -->
    <script defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing">
    </script>
  </body>
</html>

ウルルの近くに、指定された ID の荷物追跡がある場合、地図上にレンダリングされるようになりました。