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 移動共有ライブラリを使用して位置情報データへのアクセスを認証し、ウェブ アプリケーションの一部として認証トークン フェッチャーを実装します。

スタイル設定オプション

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

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

このセクションでは、地図上のトラッキング対象オブジェクトの可視性のコントロールについて説明します。 これらのルールは、次の 2 つのカテゴリのオブジェクトに適用されます。

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

場所マーカーの公開設定

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

タスクデータの可視性

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

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

利用不可タスク

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

アクティブな車両タスク

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

  • ルートのポリライン
  • 到着予定時刻
  • タスク完了までの推定所要時間
  • タスクまでの残りの運転距離
  • 残りの経由地数
  • 車両の位置

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

  • 残りの経由地数
  • 到着予定時刻までの時間
  • 残りの運転距離
  • 常に表示
  • 表示しない

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

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

  • 車両が 3 駅以内であれば、ルートのポリラインを表示します。
  • 残りの運転距離が 5,000 m 未満の場合は到着予定時刻を表示します。
  • 残りの経由地数を表示しない。
  • 他のフィールドでは、車両がタスクの 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 ジャーニー共有ライブラリを使ってみる

JavaScript ジャーニー共有ライブラリを使用する前に、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 分以内に期限切れになる。

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

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

JavaScript

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
  };
}

TypeScript

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 とトークン ファクトリへの参照を使用して、トークン ファクトリをインスタンス化します。

JavaScript

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',
});

TypeScript

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 移動共有ライブラリを読み込んだら、地図ビューを初期化して HTML ページに追加します。ページには、地図ビューを保持する <div> 要素が含まれている必要があります。次の例では、<div> 要素の名前は map_canvas です。

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

JavaScript

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);

TypeScript

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 つだけの場合は、それが表示されます。
    • 終了した pickup タスクが複数ある場合は、最新の結果時刻のものが表示されます。
    • 終了した pickup タスクが複数あり、いずれも結果時刻を持たない場合、エラーが生成されます。
  5. それ以外の場合、タスクは表示されません。

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

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

JavaScript

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

TypeScript

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);
});

エラーを処理する

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

JavaScript

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

TypeScript

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

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

トラッキングを停止

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

JavaScript

locationProvider.trackingId = '';

TypeScript

locationProvider.trackingId = '';

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

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

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

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

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

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

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

JavaScript

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

TypeScript

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 を設定することです。

JavaScript

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

TypeScript

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 を使用すると、地図に追加するマーカーのデザインをカスタマイズできます。そのためには、マーカーのカスタマイズを指定します。これにより、地図にマーカーを追加する前や、マーカーが更新されるたびに、Shipment Tracking Library によってそのカスタマイズが適用されます。

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

より高度な方法は、カスタマイズ関数を指定することです。カスタマイズ機能により、データに基づいてマーカーのスタイルを設定できるほか、クリック処理などのインタラクティブ 機能をマーカーに追加できます。具体的には、マーカーが表すオブジェクトのタイプ(車両または目的地)に関するデータをカスタマイズ関数に渡します。これにより、マーカー要素自体の現在の状態(目的地までの残りの経由地数など)に基づいてマーカーのスタイルを変更できるようになります。Fleet Engine の外部にあるソースのデータと結合し、その情報に基づいてマーカーのスタイルを設定することもできます。

配送追跡ライブラリの FleetEngineShipmentLocationProviderOptions には、以下のカスタマイズ パラメータが用意されています。

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

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

JavaScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

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

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

JavaScript

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

TypeScript

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

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

次の例は、車両マーカーにクリック処理を追加する方法を示しています。上記のマーカーのカスタマイズ パラメータのいずれかを使って、任意のマーカーにクリック処理を追加するには、以下のパターンに従ってください。

JavaScript

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

TypeScript

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

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

Shipment Tracking Library を使用して、配送ルートの地図表示をカスタマイズすることもできます。このライブラリは、配送の有効な経路または残りの経路にある座標のペアごとに google.maps.Polyline オブジェクトを作成します。ポリラインのカスタマイズを指定することで、Polyline オブジェクトのスタイルを設定できます。その後、ライブラリは、オブジェクトを地図に追加する前と、オブジェクトに使用されるデータが変更されたときの 2 つの状況で、これらのカスタマイズを適用します。

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

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

FleetEngineShipmentLocationProviderOptions で提供されるパラメータを使用して、カスタマイズを指定できます。車両の移動におけるさまざまな経路の状態(すでに走行中、走行中、未走行など)をカスタマイズできます。パラメータは次のとおりです。

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

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

JavaScript

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

TypeScript

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

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

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

JavaScript

// 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'});
      }
    }
  };

TypeScript

// 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 プロパティを設定します。

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};

車両マーカーまたは場所マーカーの InfoWindow を表示する

InfoWindow を使用すると、車両または場所のマーカーに関する追加情報を表示できます。

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

JavaScript

// 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();

TypeScript

// 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

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

TypeScript

// 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 ジャーニー共有ライブラリを追加するには:

  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 を持つ追跡中の荷物がウルル付近にある場合、地図上にレンダリングされるようになりました。