フリートを表示する

このセクションでは、JavaScript フリート トラッキング ライブラリを使用してフリートを表示する方法について説明します。以下の手順は、フリート トラッキング ライブラリを設定し、地図を読み込んでいることを前提としています。詳しくは、JavaScript フリート トラッキング ライブラリを設定するをご覧ください。

このドキュメントでは、フリート表示時に実行できる次の操作について説明します。

1. フリートの追跡を開始する。
2. イベントをリッスンしてエラーを処理する。
3. トラッキングを停止します。
4. フリート全体を表示しながら、1 台の車両を追跡する。

フリートの追跡を開始する

フリートを追跡するには、フリート位置情報プロバイダをインスタンス化し、次のセクションで説明するように、地図ビューポートの位置制限を設定する必要があります。

フリート位置情報プロバイダをインスタンス化する

JavaScript フリート トラッキング ライブラリには、Fleet Engine から複数の車両を取得する位置情報プロバイダが含まれています。

インスタンス化の手順は次のとおりです。

1. トークン取得ツールへの参照とともにプロジェクト ID を使用します。

2. 車両フィルタクエリを使用する 車両フィルタクエリは、地図に表示する車両を制御します。フィルタが Fleet Engine に渡されます。

   • オンデマンド サービスの場合は vehicleFilter を使用し、ListVehiclesRequest.filter を確認します。
   • スケジュール設定されたタスクの場合は、deliveryVehicleFilter を使用し、ListDeliveryVehiclesRequest.filter を確認します。

3. 車両ディスプレイの境界領域を設定する。locationRestriction を使用して、地図上に車両を表示するエリアを制限します。これを設定するまで、位置情報プロバイダはアクティブになりません。位置情報の境界は、コンストラクタ内またはコンストラクタの後に設定できます。

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

次の例は、オンデマンド タスクとスケジュール設定されたタスクの両方のシナリオでフリート位置情報プロバイダをインスタンス化する方法を示しています。これらの例では、コンストラクタで locationRestriction を使用して位置情報プロバイダを有効にする方法も示しています。

オンデマンド ルート

JavaScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which vehicles are
          // retrieved and immediately start tracking.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which vehicles are retrieved.
          vehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

TypeScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which vehicles are
          // retrieved and immediately start tracking.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which vehicles are retrieved.
          vehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

スケジュール設定されたタスク

JavaScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which delivery vehicles are
          // retrieved and immediately make the location provider active.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which delivery vehicles are retrieved.
          deliveryVehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

TypeScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which delivery vehicles are
          // retrieved and immediately make the location provider active.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which delivery vehicles are retrieved.
          deliveryVehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

コンストラクタの後に locationRestriction を設定するには、次の JavaScript の例に示すように、コードの後半に locationProvider.locationRestriction を追加します。

注: この例はスケジュール設定されたタスクを対象としていますが、オンデマンド ルートでこれを行うには、代わりに google.maps.journeySharing.FleetEngineFleetLocationProvider を使用します。

   // You can choose to not set locationRestriction in the constructor.
   // In this case, the location provider *DOES NOT START* after this line, because
   // no locationRestriction is set.
   locationProvider = new google.maps.journeySharing.DeliveryFleetLocationProvider({
   ... // not setting locationRestriction here
   });

   // You can then set the locationRestriction *after* the constructor.
   // After this line, the location provider is active.
   locationProvider.locationRestriction = {
     north: 1,
     east: 2,
     south: 0,
     west: 1,
   };

地図ビューポートを使用して地域の制限を設定する

地図ビューに現在表示されている領域と一致するように locationRestriction の境界を設定することもできます。

オンデマンド ルート

JavaScript

google.maps.event.addListenerOnce(
  mapView.map, 'bounds_changed', () => {
    const bounds = mapView.map.getBounds();
    if (bounds) {
      // If you did not specify a location restriction in the
      // location provider constructor, you may do so here.
      // Location tracking will start as soon as this is set.
      locationProvider.locationRestriction = bounds;
    }
  });

TypeScript

google.maps.event.addListenerOnce(
  mapView.map, 'bounds_changed', () => {
    const bounds = mapView.map.getBounds();
    if (bounds) {
      // If you did not specify a location restriction in the
      // location provider constructor, you may do so here.
      // Location tracking will start as soon as this is set.
      locationProvider.locationRestriction = bounds;
    }
  });

スケジュール設定されたタスク

JavaScript

google.maps.event.addListenerOnce(
  mapView.map, 'bounds_changed', () => {
    const bounds = mapView.map.getBounds();
    if (bounds) {
      // If you did not specify a location restriction in the
      // location provider constructor, you may do so here.
      // Location provider will start as soon as this is set.
      locationProvider.locationRestriction = bounds;
    }
  });

TypeScript

google.maps.event.addListenerOnce(
  mapView.map, 'bounds_changed', () => {
    const bounds = mapView.map.getBounds();
    if (bounds) {
      // If you did not specify a location restriction in the
      // location provider constructor, you may do so here.
      // Location provider will start as soon as this is set.
      locationProvider.locationRestriction = bounds;
    }
  });

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

位置情報プロバイダを作成したら、単一の車両を追跡する場合と同じ方法で地図ビューを初期化します。

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

オンデマンド ルート

JavaScript

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

// If you did not specify a vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.vehicleId
                        = 'your-vehicle-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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);

TypeScript

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

// If you did not specify a vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.VehicleId
                        = 'your-vehicle-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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);

スケジュール設定されたタスク

JavaScript

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

// If you did not specify a delivery vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId
                        = 'your-delivery-vehicle-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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);

TypeScript

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

// If you did not specify a delivery vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId
                        = 'your-delivery-vehicle-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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);

イベントをリッスンしてエラーを処理する

フリートの追跡を開始したら、次のセクションで説明するように、イベントの変更をリッスンし、発生したエラーを処理する必要があります。

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

位置情報プロバイダを使用して、車両オブジェクトからフリートに関するメタ情報を取得できます。メタ情報の変更は、更新イベントをトリガーします。メタ情報には、ナビゲーションの状態、残り距離、カスタム属性などの車両プロパティが含まれます。

詳細については、以下を参照してください。

• オンデマンド ルートの車両オプションのリファレンス
• スケジュール設定されたタスクの車両オプションのリファレンス

次の例は、これらの変更イベントをリッスンする方法を示しています。

オンデマンド ルート

JavaScript

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

TypeScript

locationProvider.addListener('update',
    (e: google.maps.journeySharing.FleetEngineFleetLocationProviderUpdateEvent) => {
  // e.vehicles contains data that may be
  // useful to the rest of the UI.
  if (e.vehicles) {
    for (vehicle of e.vehicles) {
      console.log(vehicle.navigationStatus);
    }
  }
});

スケジュール設定されたタスク

JavaScript

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

TypeScript

locationProvider.addListener('update',
    (e: google.maps.journeySharing.FleetEngineDeliveryFleetLocationProviderUpdateEvent) => {
  // e.deliveryVehicles contains data that may be
  // useful to the rest of the UI.
  if (e.deliveryVehicles) {
    for (vehicle of e.deliveryVehicles) {
      console.log(vehicle.remainingDistanceMeters);
    }
  }
});

エラーをリッスンする

また、車両の追跡中に発生するエラーをリッスンして処理する必要があります。車両情報のリクエストから非同期で発生したエラーは、エラー イベントをトリガーします。

次の例は、エラーを処理できるようにこれらのイベントをリッスンする方法を示しています。

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

フリート トラッキングを停止する

フリートの追跡を停止するには、位置情報プロバイダの境界を null に設定し、以降のセクションで説明するように、地図ビューから位置情報プロバイダを削除します。

位置情報プロバイダの境界を null に設定する

位置情報プロバイダによるフリートの追跡を停止するには、位置情報プロバイダの境界を null に設定します。

オンデマンド ルート

JavaScript

locationProvider.locationRestriction = null;

TypeScript

locationProvider.locationRestriction = null;

スケジュール設定されたタスク

JavaScript

locationProvider.locationRestriction = null;

TypeScript

locationProvider.locationRestriction = null;

地図ビューから位置情報プロバイダを削除する

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

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

配送車両の配送状況を追跡しながら配送車両を確認する

スケジュール設定されたタスクにモビリティ サービスを使用している場合は、同じ地図ビューでフリートに加えて、特定の配送車両のルートや今後のタスクを表示できます。これを行うには、配送フリート位置情報プロバイダと配送車両位置情報プロバイダの両方をインスタンス化し、両方を地図ビューに追加します。配送フリートの位置情報プロバイダがインスタンス化されると、配送車両が地図上に表示されます。次の例は、両方の位置情報プロバイダをインスタンス化する方法を示しています。

JavaScript

deliveryFleetLocationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which delivery vehicles are
          // retrieved and immediately start tracking.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which delivery vehicles are retrieved.
          deliveryVehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

deliveryVehicleLocationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryVehicleLocationProvider({
          projectId,
          authTokenFetcher
        });

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

TypeScript

deliveryFleetLocationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which delivery vehicles are
          // retrieved and immediately start tracking.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which delivery vehicles are retrieved.
          deliveryVehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

deliveryVehicleLocationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryVehicleLocationProvider({
          projectId,
          authTokenFetcher
        });

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

マーカーのカスタマイズを使用して配送車を追跡する

配送車両の位置情報プロバイダが、フリート マーカーをクリックしたときに配送車両を追跡できるようにするには、次の操作を行います。

1. マーカーをカスタマイズしてクリック アクションを追加する。

2. 重複するマーカーを防ぐために、マーカーを非表示にします。

   注: 配送車両の位置情報プロバイダは、追跡対象の車両ごとに 1 つずつ、一連のマーカーをレンダリングします。ユーザーが車両をクリックしたときにその車両の詳細を表示するには、配送車両の位置情報プロバイダをインスタンス化し、車両 ID をユーザーがクリックした車両に設定します。次の例をご覧ください。ただし、この操作を行うと、配送車両の位置情報プロバイダも、この車両のマーカーをレンダリングします（設計どおりです）。そのため、同じ車両に 2 つのマーカーが表示されないように、一方のマーカーを非表示にします。

これらの手順の例については、以降のセクションで説明します。

マーカーをカスタマイズしてクリック アクションを追加する

JavaScript

// Specify the customization function either separately, or as a field in
// the options for the delivery fleet location provider constructor.
deliveryFleetLocationProvider.deliveryVehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // params.vehicle.name follows the format
        // "providers/{provider}/deliveryVehicles/{vehicleId}".
        // Only the vehicleId portion is used for the delivery vehicle
        // location provider.
        deliveryVehicleLocationProvider.deliveryVehicleId =
            params.vehicle.name.split('/').pop();
      });
    }
  };

TypeScript

// Specify the customization function either separately, or as a field in
// the options for the delivery fleet location provider constructor.
deliveryFleetLocationProvider.deliveryVehicleMarkerCustomization =
  (params: google.maps.journeySharing.DeliveryVehicleMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // params.vehicle.name follows the format
        // "providers/{provider}/deliveryVehicles/{vehicleId}".
        // Only the vehicleId portion is used for the delivery vehicle
        // location provider.
        deliveryVehicleLocationProvider.deliveryVehicleId =
            params.vehicle.name.split('/').pop();
      });
    }
  };

マーカーを非表示にして重複を回避する

配送車両の位置情報プロバイダからマーカーを非表示にして、同じ車両に 2 つのマーカーが表示されないようにします。

JavaScript

// Specify the customization function either separately, or as a field in
// the options for the delivery vehicle location provider constructor.
deliveryVehicleLocationProvider.deliveryVehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.setVisible(false);
    }
  };

TypeScript

// Specify the customization function either separately, or as a field in
// the options for the delivery vehicle location provider constructor.
deliveryVehicleLocationProvider.deliveryVehicleMarkerCustomization =
  (params: deliveryVehicleMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.setVisible(false);
    }
  };

次のステップ

• 地図のスタイルを設定する