車両を追跡する

このセクションでは、JavaScript フリート トラッキング ライブラリを使用して、オンデマンド ルートやスケジュールされたタスクの車両を追跡する方法について説明します。

車両を追跡する手順は次のとおりです。

  1. ライブラリを読み込み、マップビューを初期化する
  2. 車両の位置情報と地図ビューを提供する
  3. イベントをリッスンしてエラーを処理する
  4. トラッキングを停止する

ライブラリを読み込み、地図ビューを初期化する

ウェブページの地図にフリート オペレーションを表示するには、API キーを使用して地図を呼び出すスクリプトを使用します。HTML からこれを行う方法を次の例に示します。

  • URL ソース: Google マップ API を呼び出して、API キーを使用して地図をリクエストします。

  • callback パラメータ: API が呼び出しを返した後に initMap 関数を実行します。

  • libraries パラメータ: Fleet Tracking Library を読み込みます。

  • defer 属性: API の読み込み中に、ブラウザがページの残りを引き続きレンダリングできるようにします。

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

車両の位置と地図ビューを提供する

車両の追跡を開始するには、車両位置情報プロバイダをインスタンス化し、車両 ID を使用して地図ビューを初期化します。詳細は、次のセクションをご覧ください。

車両位置情報プロバイダをインスタンス化する

JavaScript フリート トラッキング ライブラリには、Fleet Engine API の位置情報プロバイダが含まれています。次の例に示すように、プロジェクト ID とトークン取得ツールへの参照を使用して、トークン取得ツールをインスタンス化します。

オンデマンド ルート

JavaScript

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

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

TypeScript

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

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

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

JavaScript

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

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

TypeScript

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

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

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

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

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

車両の追跡を開始したら、地図上で進行状況を更新し、車両がルートを走行する際にエラーを処理する必要があります。

車両イベントをリッスンする

オンデマンド ルートやスケジュール設定されたタスクの車両の進行状況を追跡するには、変更イベントをリッスンする必要があります。

位置情報プロバイダを使用して、vehicle オブジェクトまたは deliveryVehicle オブジェクトからメタデータを取得します。メタ情報には、車両の次の乗車または降車までの所要時間と残りの距離が含まれます。メタ情報の変更は、位置情報プロバイダで更新イベントをトリガーします。

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

オンデマンド ルート

JavaScript

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

TypeScript

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

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

JavaScript

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

TypeScript

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

エラーを処理する

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

車両のトラッキングを停止する

車両の追跡を停止するには、以下のセクションで説明するように、位置情報プロバイダから車両を削除し、地図ビューから位置情報プロバイダを削除する必要があります。ここでの例は、オンデマンド ルートの実装とスケジュール設定されたタスクの実装の両方に適用されます。

位置情報プロバイダから車両を削除する

位置情報プロバイダによる車両の追跡を停止するには、位置情報プロバイダから配送車両 ID を削除します。

オンデマンド ルート

JavaScript

locationProvider.vehicleId = '';

TypeScript

locationProvider.vehicleId = '';

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

JavaScript

locationProvider.deliveryVehicleId = '';

TypeScript

locationProvider.deliveryVehicleId = '';

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

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

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

次のステップ