JavaScript フリート トラッキング ライブラリを使用すると、フリート内にある車両の位置をほぼリアルタイムで可視化できます。このライブラリでは、Deliveries API を使用して配送車両とタスクを可視化できます。JavaScript Shipment Tracking Library と同様に、標準の google.maps.Map エンティティや Fleet Engine に接続するデータ コンポーネントの代替となる JavaScript マップ コンポーネントが含まれています。
コンポーネント
JavaScript フリート トラッキング ライブラリは、配送車両と停車地の可視化のコンポーネントと、到着予定時刻または配達までの距離の未加工フィードを提供します。
フリート追跡マップビュー
フリート トラッキング マップビュー コンポーネントは、車両とタスクの位置を可視化します。車両のルートがわかっている場合、地図ビュー コンポーネントは、予測された経路に沿って車両をアニメーション化します。
位置情報プロバイダ
位置情報プロバイダは、Fleet Engine に保存されている情報を利用して、追跡対象オブジェクトの位置情報をジャーニー共有マップに送信します。
配達車両の位置情報のプロバイダ
配送車両の位置情報プロバイダは、1 台の配達車両の位置情報を表示します。車両の位置情報と、配送車両によって完了したタスクに関する情報が含まれます。
配送フリートの位置情報プロバイダ
配送フリートの位置情報プロバイダは、複数の車両の位置情報を表示します。特定の車両や場所をフィルタリングすることも、フリート全体を表示することもできます。
トラッキングする場所の表示を制御する
このセクションでは、Fleet Engine の事前定義された位置情報プロバイダの地図で追跡する位置情報オブジェクトの公開設定ルールについて説明します。カスタムまたは派生の位置情報プロバイダによって可視性ルールが変更されることがあります。
配送車両
配送車両は、Fleet Engine で作成されるとすぐに表示され、そのタスクに関係なくルート全体に表示されます。
タスクのロケーション マーカー
予定している停車地が地図に車両停止マーカーとして表示されます。完了したタスクのマーカーは、車両の停車地以外のスタイルで表示されます。
タスクの結果の位置は、タスクの結果マーカーとともに表示されます。結果の数が SUCCEEDED であるタスクは、成功したタスク マーカーとともに表示されますが、他のすべてのタスクは失敗したタスク マーカーとともに表示されます。
JavaScript フリート トラッキング ライブラリを使ってみる
JavaScript フリート トラッキング ライブラリを使用する前に、Fleet Engine と API キーの取得について理解しておいてください。次に、タスク ID と配送車両 ID の申し立てを作成します。
タスク ID と配送車両 ID の申し立てを作成する
配送車両の位置情報プロバイダを使用して配送車両を追跡するには、タスク ID と配送車両 ID クレームを使用して JSON ウェブトークン（JWT）を作成します。
JWT ペイロードを作成するには、認証セクションに taskid キーと deliveryvehicleid というキーを追加してクレームを追加し、各キーの値を * に設定します。トークンは、Fleet Engine Service スーパー ユーザー Cloud IAM ロールを使用して作成する必要があります。Fleet Engine エンティティの作成、読み取り、変更を行うための幅広いアクセス権が付与されます。信頼できるユーザーとのみ共有してください。
次の例は、車両とタスクでトラッキングするためのトークンの作成方法を示しています。
{
"alg": "RS256",
"typ": "JWT",
"kid": "private_key_id_of_consumer_service_account"
}
.
{
"iss": "superuser@yourgcpproject.iam.gserviceaccount.com",
"sub": "superuser@yourgcpproject.iam.gserviceaccount.com",
"aud": "https://fleetengine.googleapis.com/",
"iat": 1511900000,
"exp": 1511903600,
"scope": "https://www.googleapis.com/auth/xapi",
"authorization": {
"taskid": "*",
"deliveryvehicleid": "*",
}
}
認証トークンを取得する
認証トークンを取得する場合は、プロジェクトのサービス アカウント証明書を使用して、サーバー上で適切な要求で作成されたトークンを取得できます。お客様のサーバーでのみトークンを作成し、クライアント上で証明書を共有しないことが重要です。そうしないと、システムのセキュリティが侵害されます。
次の例は、認証トークンを取得する方法を示しています。
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.ExpiresInSeconds
};
}
トークンを作成するサーバー側エンドポイントを実装する場合は、次の点に注意してください。
- エンドポイントはトークンの有効期限を返します。上の例では、
data.ExpiresInSecondsと指定されています。- 次の例に示すように、認証トークン取得ツールは有効期限（秒単位から発行）をライブラリに渡す必要があります。
HTML から地図を読み込む
次の例は、指定した URL から JavaScript Journey Sharing ライブラリを読み込む方法を示しています。callback パラメータは、API の読み込み後に initMap 関数を実行します。defer 属性を使用すると、API の読み込み中も残りのページを表示し続けることができます。v=beta パラメータを指定する必要があります。
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&v=beta&callback=initMap&libraries=journeySharing" defer></script>
配送車両をフォロー中
このセクションでは、JavaScript フリート トラッキング ライブラリを使用して配送車両を追跡する方法について説明します。コードを実行する前に、必ず、スクリプトタグで指定されたコールバック関数からライブラリを読み込んでください。
配送車両の位置情報プロバイダをインスタンス化する
JavaScript フリート トラッキング ライブラリでは、Fleet Engine Deliveries API に対応する位置情報プロバイダが事前に定義されています。プロジェクト 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 Shared ライブラリを読み込んだ後、地図ビューを初期化して HTML ページに追加します。ページには、地図ビューを保持する <div> 要素を含めます。以下の例では、<div> 要素に map_canvas という名前を使用しています。
JavaScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProvider: locationProvider,
// Styling customizations; see below.
vehicleMarkerSetup: vehicleMarkerSetup,
anticipatedRoutePolylineSetup:
anticipatedRoutePolylineSetup,
// Any undefined styling options will use defaults.
});
// 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 wish.
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'),
locationProvider: locationProvider,
// Styling customizations; see below.
vehicleMarkerSetup: vehicleMarkerSetup,
anticipatedRoutePolylineSetup:
anticipatedRoutePolylineSetup,
// Any undefined styling options will use defaults.
});
// 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 wish.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
変更イベントをリッスンする
タスクのメタ情報は、位置情報プロバイダを使用して deliveryVehicle オブジェクトから取得できます。メタ情報には、ETA と車両の次の乗車または降車までの残り距離が含まれます。メタ情報が変更されると、更新イベントがトリガーされます。次の例は、これらの変更イベントをリッスンする方法を示しています。
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
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);
});
配送フリートを表示する
このセクションでは、JavaScript Journey 共有ライブラリを使用して、デリバリー フリートを表示する方法について説明します。コードを実行する前に、必ず、スクリプトタグで指定されたコールバック関数からライブラリを読み込んでください。
配送フリートのロケーション プロバイダをインスタンス化する
JavaScript フリート トラッキング ライブラリは、FleetEngine Deliveries API から複数の車両を取得する位置情報プロバイダを事前定義しています。プロジェクト ID とトークン フェッチャーへの参照を使用して、インスタンスをインスタンス化します。
JavaScript
locationProvider =
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"',
});
TypeScript
locationProvider =
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"',
});
deliveryVehicleFilter は、地図上に表示される車両をフィルタするために使用されるクエリを指定します。このフィルタは Fleet Engine に直接渡されます。サポートされている形式については、ListDeliveryVehiclesRequest.filter をご覧ください。
locationRestriction は、車両を地図上に表示するエリアを制限します。位置情報追跡を有効にするかどうかも制御します。この設定が完了するまで、位置情報の追跡は開始されません。
位置情報プロバイダを作成したら、地図ビューを初期化します。
地図のビューポートを使用して場所の制限を設定する
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;
}
});
変更イベントをリッスンする
ロケーション プロバイダを使用して、deliveryVehicles オブジェクトからフリートに関するメタ情報を取得できます。メタ情報には、ナビゲーションの状態、残りの距離、カスタム属性などの車両プロパティが含まれます。詳細については、リファレンス ドキュメントをご覧ください。メタ情報を変更すると、update イベントがトリガーされます。次の例は、これらの変更イベントをリッスンする方法を示しています。
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);
}
}
});
エラーをリッスンする
配信フリート情報のリクエストによって非同期的に発生するエラーは、エラーイベントをトリガーします。これらのイベントをリッスンする方法を示す例については、エラーをリッスンするをご覧ください。
地図とトラッキング対象の場所オブジェクトのデザインをカスタマイズする
地図コンポーネントのデザインをカスタマイズするには、クラウドベースのツールや JSON スタイルの宣言を使用して、地図のスタイルを設定します。ルート、車両、停車地など、トラッキング対象の位置情報オブジェクトのデザインをカスタマイズすることもできます。
クラウドベースの地図のスタイル機能を使用する
クラウドベースの地図のスタイル機能を使用すると、コードを変更することなく、Google Cloud Console から Google マップを使用するすべてのアプリの地図スタイルを作成、編集できます。地図のスタイルは、Cloud プロジェクトのマップ ID として保存されます。JavaScript フリート トラッキング マップにスタイルを適用するには、JourneySharingMapView を作成するときに mapId と他の mapOptions を指定します。mapId フィールドは、JourneySharingMapView のインスタンス化後に変更または追加できません。次の例は、地図 ID を使用して以前に作成した地図のスタイルを有効にする方法を示しています。
JavaScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProvider: locationProvider,
mapOptions: {
mapId: 'YOUR_MAP_ID'
}
});
TypeScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProvider: locationProvider,
mapOptions: {
mapId: 'YOUR_MAP_ID'
}
});
ルートのスタイル設定と公開設定を変更する
取得されるルートおよび想定されるルートのスタイル設定と表示設定を構成するには、カスタム スタイル オプションを使用します。詳細については、PolylineOptions インターフェースをご覧ください。
次の例は、想定されるルートのスタイル設定と表示設定を指定する方法を示しています。取得したルートのスタイル設定と表示設定を構成するには、anticipatedRoutePolylineSetup ではなく takenRoutePolylineSetup を使用します。
JavaScript
// This function is specified in the
// JourneySharingMapView constructor's options
// parameter.
function anticipatedRoutePolylineSetup({
defaultPolylineOptions, defaultVisible}) {
// If this function is not specified, the
// PolylineOptions object contained in
// defaultPolylineOptions is used to render the
// anticipated route polyline. visible property sets the
// polyline's visibility. Modify this object and
// pass it back to customize the style of the map.
defaultPolylineOptions.strokeOpacity = 0.5;
defaultPolylineOptions.strokeColor = 'red';
return {
polylineOptions: defaultPolylineOptions,
visible: true
};
}
// As an alternative, set static PolylineOptions to
// use for the anticipated route.
const anticipatedRoutePolylineOptionsSetup = {
polylineOptions: {
strokeOpacity: 0.5,
strokeColor: 'red',
…
},
visible: true,
};
TypeScript
// This function is specified in the
// JourneySharingMapView constructor's options
// parameter.
function anticipatedRoutePolylineSetup(options: {
defaultPolylineOptions: google.maps.PolylineOptions,
visible: boolean,
}): {
polylineOptions: google.maps.PolylineOptions,
visible: boolean,
} {
// If this function is not specified, the
// PolylineOptions object contained in
// defaultPolylineOptions is used to render the
// anticipated route polyline. visible property sets the
// polyline's visibility. Modify this object and
// pass it back to customize the style of the map.
options.defaultPolylineOptions.strokeOpacity = 0.5;
options.defaultPolylineOptions.strokeColor = 'red';
return {
polylineOptions: options.defaultPolylineOptions,
visible: true
};
}
// As an alternative, set static PolylineOptions to
// use for the anticipated route.
const anticipatedRoutePolylineSetup = {
polylineOptions: {
strokeOpacity: 0.5,
strokeColor: 'red',
…
},
visible: true,
};
車両マーカーのスタイル設定とアイコンを変更する
カスタム スタイル プロバイダを使用して、車両を表すスタイル設定とアイコンを設定します。次の例は、車両マーカーのスタイルとアイコンを設定する方法を示しています。
JavaScript
// This function is specified in the
// JourneySharingMapView constructor's options
// parameter.
function vehicleMarkerSetup({defaultMarkerOptions}) {
// If this function is not specified, the
// MarkerOptions object contained in
// defaultMarkerOptions is used to render the
// vehicle marker. Modify this object and pass it
// back to customize the style of the map.
defaultMarkerOptions.opacity = 0.5;
defaultMarkerOptions.icon = MY_ICON;
return {markerOptions: defaultMarkerOptions};
}
// As an alternative, set static MarkerOptions to use
// for the vehicle marker:
const vehicleMarkerSetup = {
markerOptions: {
opacity: 0.5,
icon: MY_ICON,
...
}};
TypeScript
// This function is specified in the
// JourneySharingMapView constructor's options
// parameter.
function vehicleMarkerSetup(options: {
defaultMarkerOptions: google.maps.MarkerOptions,
}): {markerOptions: google.maps.MarkerOptions} {
// If this function is not specified, the
// MarkerOptions object contained in
// defaultMarkerOptions is used to render the
// vehicle marker. Modify this object and pass it
// back to customize the style of the map.
options.defaultMarkerOptions.opacity = 0.5;
options.defaultMarkerOptions.icon = MY_ICON;
return {
markerOptions: options.defaultMarkerOptions,
};
}
// As an alternative, set static MarkerOptions to use
// for the vehicle marker:
vehicleMarkerSetup = {
markerOptions: {
opacity: 0.5,
icon: MY_ICON,
...
}};
車両停止アイコン（予定停車地）の変更
カスタム スタイル オプションを使用して、車両の停留所、車両の停留所を表すアイコンを設定できます。スタイル オプションは、車両マーカーのアイコンを変更するのと同じ方法で定義され、地図ビューに付加されます。
次の例は、車両停止地点アイコンを構成する方法を示しています。
JavaScript
// This function is specified in the
// JourneySharingMapView constructor's options
// parameter.
function waypointMarkerSetup({defaultMarkerOptions}) {
// If this function is not specified, the
// MarkerOptions object contained in
// defaultMarkerOptions is used to render the
// origin marker. Modify this object and pass it
// back to customize the style of the map.
defaultMarkerOptions.opacity = 0.5;
defaultMarkerOptions.icon = MY_ICON;
return {markerOptions: defaultMarkerOptions};
}
// As an alternative, set a static MarkerOptions to use
// for successful task markers:
const successfulTaskMarkerSetup = {
markerOptions: {
opacity: 0.5,
icon: MY_ICON,
...
}};
TypeScript
// This function is specified in the
// JourneySharingMapView constructor's options
// parameter.
function waypointMarkerSetup(options: {
defaultMarkerOptions: google.maps.MarkerOptions,
}): {markerOptions: google.maps.MarkerOptions} {
// If this function is not specified, the
// MarkerOptions object contained in
// defaultMarkerOptions is used to render the
// origin marker. Modify this object and pass it
// back to customize the style of the map.
options.defaultMarkerOptions.opacity = 0.5;
options.defaultMarkerOptions.icon = MY_ICON;
return {
markerOptions: options.defaultMarkerOptions,
};
}
// As an alternative, set a static MarkerOptions to use
// for successful task markers:
successfulTaskMarkerSetup = {
markerOptions: {
opacity: 0.5,
icon: MY_ICON,
...
}};
地図表示に航空写真コントロールを追加する
google.maps.Map エンティティには、ユーザーが直接変更できるコントロールが含まれます。航空写真やその他の地図タイプを有効にするコントロールを組み込むように、地図をカスタマイズできます。
次の例は、地図表示に航空写真ビュー コントロールを追加する方法を示しています。
JavaScript
// 1. Create a MapView as described above.
this.mapView = new MapView(mapViewOptions);
// 2. Set more options to this mapView.
this.mapView.map.setOptions({
mapTypeControl: true,
mapTypeControlOptions: {
mapTypeIds:
[google.maps.MapTypeId.SATELLITE,
google.maps.MapTypeId.ROADMAP]
}
});
TypeScript
// 1. Create a MapView as described above.
this.mapView = new MapView(mapViewOptions);
// 2. Set more options to this mapView.
this.mapView.map.setOptions({
mapTypeControl: true,
mapTypeControlOptions: {
mapTypeIds:
[google.maps.MapTypeId.SATELLITE,
google.maps.MapTypeId.ROADMAP]
}
});
車両マーカーまたは位置マーカーの InfoWindow を表示する
車両や場所のマーカーに関する追加情報を表示するには、InfoWindow を使用します。
次の例は、InfoWindow を作成して車両マーカーに付加する方法を示しています。
JavaScript
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
{disableAutoPan: true});
// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', e => {
if (e.deliveryVehicle) {
const distance =
e.deliveryVehicle.remainingDistanceMeters;
infoWindow.setContent(
`Your vehicle is ${distance}m away from the next task.`);
// 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});
// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProviderUpdateEvent) => {
if (e.deliveryVehicle) {
const distance =
e.deliveryVehicle.remainingDistanceMeters;
infoWindow.setContent(
`Your vehicle is ${distance}m away from the next task.`);
// 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'),
locationProvider: locationProvider,
automaticViewportMode:
google.maps.journeySharing
.AutomaticViewportMode.NONE,
...
});
TypeScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProvider: locationProvider,
automaticViewportMode:
google.maps.journeySharing
.AutomaticViewportMode.NONE,
...
});
既存の地図を置き換える
マーカーや他のカスタマイズを含む既存の地図は、そのカスタマイズを失うことなく置き換えることができます。
たとえば、マーカーが表示される標準的な 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>
Fleet Tracking を含む JavaScript Journey Sharing ライブラリを追加するには:
- 認証トークン ファクトリーのコードを追加します。
initMap()関数でロケーション プロバイダを初期化します。initMap()関数でマップビューを初期化します。ビューには地図が含まれています。- カスタマイズを、地図ビューの初期化のコールバック関数に移動します。
- 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. Use FleetEngineDeliveryVehicleLocationProvider
// as appropriate.
locationProvider = new google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProvider({
YOUR_PROVIDER_ID,
authTokenFetcher,
});
// (3) Initialize map view (which contains the map).
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map'),
locationProvider: locationProvider,
// any styling options
});
mapView.addListener('ready', () => {
locationProvider.deliveryVehicleId = DELIVERY_VEHICLE_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, which includes Fleet Tracking functionality.
-->
<script defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing">
</script>
</body>
</html>
指定された ID を持つ配送車両をウルルで運行している場合、地図上にレンダリングされます。