Last Mile Fleet Solution is currently available only to select customers. Contact sales to learn more.

JavaScript Shipment Tracking Library を使用して配送を追跡する

コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

JavaScript Shipment Tracking Library を使用すると、車両の位置情報と Fleet Engine で追跡されている対象地域を可視化できます。このライブラリには、標準の google.maps.Map エンティティと Fleet Engine に接続するデータ コンポーネントの代わりとなる JavaScript マップ コンポーネントが含まれています。JavaScript Shipment Tracking Library を使用すると、ウェブ アプリケーションからカスタマイズ可能なアニメーションの配送追跡機能を提供できます。

コンポーネント

JavaScript Shipment Tracking Library は、車両と停留所を可視化するコンポーネントと、ドライバーの到着予定時刻の未加工データ フィード、または残りの運転距離を提供します。

配送追跡マップビュー

地図表示コンポーネントは、車両と停車地の位置を可視化します。車両のルートがわかっている場合、地図ビュー コンポーネントは、予測された経路に沿って車両をアニメーション化します。

配送先の場所のプロバイダ

配送ロケーション プロバイダは、追跡対象オブジェクトの位置情報を、ファースト マイルとラストマイルの配送トラッキングの配送トラッキング マップに入力します。

配送場所プロバイダを使用して、次の情報を追跡できます。

  • 配送の集荷場所または配送場所。
  • 配送車両の場所とルート。

トラッキング対象地域オブジェクト

位置情報プロバイダは、停車地や車両などの物体の位置を追跡します。

出発地

出発地とは、出発地となる地点です。出発地のロケーションは、Google Maps Platform のラスト ワンマイルのフリート ソリューションでは使用されません。

宛先のロケーション

目的地とは、旅程の終点となる場所のことです。配送追跡の場合は、ファースト マイル追跡の集荷場所と、ラストマイル追跡の配達場所になります。

車両停車駅

車両停留所とは、追跡されるルート上の任意の位置にあります。たとえば、1 つ以上の配送タスクで車両が停車する場所は、車両停止地点です。

車両の位置情報

車両の位置情報は、車両が追跡する場所です。車両のルートが含まれることもあります。

認証トークンの取得

Fleet Engine に保存されている位置情報へのアクセスを制御するには、Fleet Engine の JSON Web Token(JWT)マイニング サービスをサーバーに実装する必要があります。次に、JavaScript Journey 共有ライブラリを使用して、位置情報へのアクセスを認証することで、ウェブ アプリケーションの一部として認証トークン取得ツールを実装します。

スタイル設定オプション

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

トラッキングする場所の表示を制御する

このセクションでは、Fleet Engine の事前定義された位置情報プロバイダの地図で追跡する位置情報オブジェクトの公開設定ルールについて説明します。カスタムまたは派生の位置情報プロバイダによって可視性ルールが変更されることがあります。

Vehicles

車両が関連するタスクに割り当てられ、車両がタスクから 5 以内の距離にある場合、車両は Shipment Tracking Library に表示されます。タスクの公開設定が完了またはキャンセルされると、車両の公開設定が終了します。

利用できないタスク(運転手が休憩中の場合や車両の給油中など)のときに車両が表示されない。

その他すべての場所マーカー

出発地、目的地、車両停留所の位置マーカーはすべて、常に地図上に表示されます。たとえば、配送の状態にかかわらず、配送場所は常に地図上に表示されます。

JavaScript Journey 共有ライブラリを使ってみる

JavaScript Journey 共有ライブラリを使用する前に、Fleet Engine と API キーの取得について理解しておいてください。

配送状況を追跡するには、まずトラッキング ID 申請を行います。

トラッキング ID の申し立てを作成する

配送場所プロバイダを使用して配送を追跡するには、トラッキング ID クレームを使用して JSON ウェブトークン(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",
   }
}

認証トークンを取得する

認証トークンを取得する場合は、プロジェクトのサービス アカウント証明書を使用して、サーバー上で適切な要求で作成されたトークンを取得できます。お客様のサーバーでのみトークンを作成し、クライアント上で証明書を共有しないことが重要です。そうしないと、システムのセキュリティが侵害されます。

次の例は、認証トークンを取得する方法を示しています。

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 Shipment Tracking Library を読み込む方法を示しています。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 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
        .FleetEngineTaskLocationProvider({
          projectId,
          authTokenFetcher,

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

地図表示を初期化する

JavaScript Journey Shared ライブラリを読み込んだ後、地図ビューを初期化して HTML ページに追加します。ページには、地図ビューを保持する <div> 要素を含めます。次の例では、<div> 要素に map_canvas という名前を使用しています。

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

JavaScript

const mapView = new 
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'), 
  locationProvider: 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'),
  locationProvider: 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 つしかない場合は、そのタスクが表示されます。
    • 成約したタスクが複数ある場合は、最も遅い解決時間のタスクが表示されます。
    • クローズされたタスクが複数あり、どのタスクにも結果時間がない場合、エラーが生成されます。
  5. それ以外の場合、タスクは表示されません。

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

タスク プロバイダからタスクのメタ情報を取得するには、ロケーション プロバイダを使用します。このメタ情報には、到着予定時刻、停車地数、ピックアップまたは配送までの残り距離が含まれます。メタ情報が変更されると、update イベントがトリガーされます。次の例は、これらの変更イベントをリッスンする方法を示しています。

JavaScript

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

TypeScript

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

エラーを処理する

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

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 ブロックでラップしてください。

地図とトラッキング対象の場所オブジェクトのデザインをカスタマイズする

マップ コンポーネントのデザインをカスタマイズするには、クラウドベースのツールや JSON スタイルの宣言を使用して、地図のスタイルを設定します。ルート、車両、停車地など、トラッキング対象の位置情報オブジェクトのデザインをカスタマイズすることもできます。

クラウドベースの地図のスタイル機能を使用する

クラウドベースの地図のスタイル機能を使用すると、コードを変更することなく、Google Cloud Console から Google マップを使用するすべてのアプリの地図スタイルを作成、編集できます。地図のスタイルは、Cloud プロジェクトのマップ ID として保存されます。JavaScript Shipment Tracking の地図にスタイルを適用するには、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'
  }
  // Any other styling options.
});

TypeScript

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

}

ルートのスタイル設定と公開設定を変更する

取得されるルートおよび想定されるルートのスタイル設定と表示設定を構成するには、カスタム スタイル オプションを使用します。詳細については、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 a 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 a 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 will be 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 a 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 will be 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 a static MarkerOptions to use
// for the vehicle marker:
vehicleMarkerSetup = {
  markerOptions: {
    opacity: 0.5,
    icon: MY_ICON,
    ...
}};

出発地、目的地、車両の停止アイコンを変更する

カスタムのスタイル オプションを使用して、出発地、車両停留所、目的地の場所を表すアイコンを構成できます。スタイル オプションは、車両マーカーのアイコンを変更するのと同じ方法で定義され、地図ビューに付加されます。

次の例では、原点マーカーのアイコンを構成する方法を示します。デスティネーションまたは車両の停止アイコンのアイコンを設定するには、originMarkerSetup ではなく destinationMarkerSetup または waypointMarkerSetup を使用します。

JavaScript

// This function is specified in the 
// JourneySharingMapView constructor's options 
// parameter.
function originMarkerSetup({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 the origin marker:
const originMarkerSetup = {
  markerOptions: {
    opacity: 0.5,
    icon: MY_ICON,
    ...
}};

TypeScript

// This function is specified in the 
// JourneySharingMapView constructor's options 
// parameter.
function originMarkerSetup(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 the origin marker:
originMarkerSetup = {
  markerOptions: {
    opacity: 0.5,
    icon: MY_ICON,
    ...
}};

車両マーカーまたは位置マーカーの InfoWindow を表示する

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

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

JavaScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

locationProvider.addListener('update', e => {
  const stopsCount =
      e.task.remainingVehicleJourneySegments.length;
  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'),
  locationProvider: 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.task.remainingVehicleJourneySegments.length;
  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 Journey Shared ライブラリを追加するには:

  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'), 
    locationProvider: 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&v=beta&libraries=journeySharing">
    </script>
  </body>
</html>

指定された ID が Uluru の近くにあるトラッキング対象パッケージがある場合は、マップにレンダリングされます。