このセクションでは、JavaScript フリート トラッキング ライブラリを使用して、オンデマンド ルートやスケジュールされたタスクの車両を追跡する方法について説明します。
車両を追跡するには、次の手順を行います。
ライブラリを読み込んでマップビューを初期化する
フリートのオペレーションをウェブページの地図に表示するには、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 Journey Sharing ライブラリを読み込んだ後、地図ビューを初期化して 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 オブジェクトからメタデータを取得します。メタ情報には、車両の次の乗車または降車までの所要時間と残りの距離が含まれます。メタ情報が変更されると、位置情報プロバイダで update イベントがトリガーされます。
次の例は、これらの変更イベントをリッスンする方法を示しています。
オンデマンドの賃走
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 Journey Sharing ライブラリを読み込んだ後、地図ビューを初期化して 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);