開始使用 JavaScript 專用的 Consumer SDK

JavaScript SDK 可讓您以視覺化方式呈現在 Fleet Engine 中追蹤的車輛位置和感興趣的地點。程式庫包含 JavaScript 地圖元件，可取代標準 google.maps.Map 實體和資料元件，以便與 Fleet Engine 連結。有了 JavaScript SDK，您可以在網頁應用程式中提供可自訂、動畫的行程和訂單進度體驗。

元件

JavaScript SDK 提供可視覺化的車輛和路線控點元件，以及用來顯示駕駛預計到達時間或剩餘行駛距離的原始資料動態饋給。

「行程」和「訂單進度」地圖檢視

地圖檢視元件會以視覺化方式呈現車輛和路線控點的位置。如果知道車輛路線，地圖檢視元件就會在車輛沿著預測路徑移動時，建立動畫效果。

行程地點提供者

JavaScript SDK 包含的行程地點提供者，會將追蹤物件的位置資訊提供給行程和訂單進度地圖。

您可以利用行程地點提供者追蹤以下資訊：

• 行程的上車或下車地點。
• 車輛指派給行程的位置和路線。

追蹤的地點物件

位置提供者會追蹤物件 (例如路線控點和車輛) 的位置。

出發地

出發地位置是行程的起點，會標示上車地點。

目的地位置

目的地位置是指旅程的終點。會標示下車地點。

路線控點位置

路線控點位置是指歷程追蹤的旅程路線上的任何位置。舉例來說，公車路線上的每個停靠站都是路線點位置。

車輛位置

車輛位置是指車輛追蹤的位置。您可以選擇加入車輛的路線。

驗證權杖擷取工具

如要控管儲存在 Fleet Engine 中位置資料的存取權，您必須在伺服器上導入 Fleet Engine 適用的 JSON Web Token (JWT) 挖礦服務。接著，在網頁應用程式中導入驗證權杖擷取器，並使用 JavaScript SDK 驗證位置資料的存取權。

樣式選項

標記和折線樣式會決定地圖上追蹤的位置物件的外觀與風格。您可以使用自訂樣式選項來變更預設樣式，以符合網頁應用程式的樣式。

控制追蹤位置的顯示設定

本節說明 Fleet Engine 預先定義位置提供者在地圖上追蹤的位置物件的瀏覽權限規則。自訂或衍生位置供應商可能會變更瀏覽權限規則。

交通工具

從指派給行程的行程到下車時間後，就能看到共乘車輛。如果行程取消，車輛將無法再顯示。

所有其他地點標記

起點、目的地和路線控點的所有其他地點標記一律會顯示在地圖上。舉例來說，無論行程或運送狀態為何，共乘地點或送貨地點一律會在地圖上顯示。

開始使用 JavaScript SDK

使用 JavaScript SDK 前，請確認您熟悉 Fleet Engine 並取得 API 金鑰。

如要追蹤代僱駕駛服務行程，請先建立行程 ID 憑證附加資訊。

建立行程 ID 聲明

如要透過行程位置提供者追蹤行程，請建立含有行程 ID 憑證附加資訊的 JSON Web Token (JWT)。

如要建立 JWT 酬載，請在授權區段中使用 tripid 金鑰新增其他憑證附加資訊，並將其值設為行程 ID。

以下範例說明如何建立符記，以便按行程 ID 進行追蹤：

{
  "alg": "RS256",
  "typ": "JWT",
  "kid": "private_key_id_of_consumer_service_account"
}
.
{
  "iss": "[e-mail]",
  "sub": "[e-mail]",
  "aud": "https://fleetengine.googleapis.com/",
  "iat": 1511900000,
  "exp": 1511903600,
  "scope": "https://www.googleapis.com/auth/xapi",
  "authorization": {
     "tripid": "tid_12345",
   }
}

建立驗證權杖擷取工具

您可以建立驗證權杖擷取工具，以使用專案的服務帳戶憑證，在伺服器上擷取具有適當憑證附加資訊的憑證。請務必只在伺服器上建立權杖，並且絕不會在用戶端分享您的憑證。否則將破壞系統的安全性。

擷取器必須傳回具有兩個欄位的資料結構，並納入 Promise 中：

• 字串 token。
• 數字 expiresInSeconds。權杖會在擷取後一段時間內失效。

如果發生下列情況，JavaScript 消費者 SDK 會透過驗證權杖擷取工具要求權杖：

• 不含有效權杖，例如新網頁載入時未呼叫擷取器，或是擷取器未傳回權杖。
• 先前擷取的權杖已過期。
• 先前擷取的權杖會在一分鐘內到期。

否則，SDK 會使用先前核發的仍然有效權杖，而不會呼叫擷取器。

以下範例說明如何建立驗證權杖擷取工具：

JavaScript

async 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.jwt,
    expiresInSeconds: data.expirationTimestamp - Date.now(),
  };
}

在實作伺服器端端點以挖掘憑證時，請注意下列事項：

• 端點必須傳回權杖的到期時間；在上述範例中，端點為 data.ExpiresInSeconds。
• 驗證權杖擷取工具必須將到期時間 (以秒為單位，從擷取時間起算) 傳送至程式庫，如範例所示。
• SERVER_TOKEN_URL 視供應商實作結果而定，以下是範例供應商的網址：
  • https://SERVER_URL/token/driver/VEHICLEID
  • https://SERVER_URL/token/consumer/TRIPID

從 HTML 載入地圖

以下範例說明如何從指定網址載入 JavaScript SDK。回呼參數會在 API 載入後執行 initMap 函式。defer 屬性可讓瀏覽器在 API 載入時繼續顯示網頁的其他部分。

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

追蹤行程

本節說明如何使用 JavaScript SDK 追蹤代僱駕駛服務或外送行程。執行程式碼之前，請務必從指令碼標記中指定的回呼函式載入程式庫。

將行程地點提供者例項化

JavaScript SDK 會預先定義 Fleet Engine Ridesharing API 的定位提供者。使用專案 ID 和權杖工廠的參照，以便對其執行個體化。

JavaScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineTripLocationProvider({
          projectId: 'your-project-id',
          authTokenFetcher: authTokenFetcher, // the token fetcher defined in the previous step

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

TypeScript

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

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

初始化地圖檢視

載入 JavaScript SDK 後，請初始化地圖檢視畫面並加進 HTML 頁面。網頁應包含存放地圖檢視的 <div> 元素。在下方範例中，<div> 元素的名稱是 map_canvas。

為避免競爭狀況，請在地圖初始化後叫用的回呼中，為位置提供者設定行程 ID。

JavaScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  // Styling customizations; see below.
  vehicleMarkerCustomization: vehicleMarkerCustomization,
  activePolylineCustomization: activePolylineCustomization,
  // Any undefined styling options will use defaults.
});

// If you did not specify a trip ID in the location
// provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.tripId = 'your-trip-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({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  // Styling customizations; see below.
  vehicleMarkerCustomization: vehicleMarkerCustomization,
  activePolylineCustomization: activePolylineCustomization,
  // Any undefined styling options will use defaults.
});

// If you did not specify a trip ID in the location
// provider constructor, you may do so here.
locationProvider.tripId = 'your-trip-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);

監聽變更事件

您可以使用位置提供工具，從工作物件擷取行程的相關中繼資訊。中繼資訊包括預計到達時間，以及上車或下車前的剩餘距離。變更中繼資料會觸發 update 事件。以下範例說明如何監聽這些變更事件。

JavaScript

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

TypeScript

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

處理錯誤

因要求行程資訊而非同步產生的錯誤會觸發錯誤事件。以下範例說明如何監聽這些事件，以處理錯誤。

JavaScript

locationProvider.addListener('error', e => {
  // e.error contains the error that triggered the 
  // event
  console.error(e.error);
});

TypeScript

locationProvider.addListener('error', (e: google.maps.ErrorEvent) => {
  // e.error contains the error that triggered the 
  // event
  console.error(e.error);
});

注意：請務必將程式庫呼叫納入 try...catch 區塊中，以處理非預期的錯誤。

停止追蹤

如要讓位置資訊提供者停止追蹤行程，請從地點提供者移除行程 ID。

JavaScript

locationProvider.tripId = '';

TypeScript

locationProvider.tripId = '';

從地圖檢視中移除位置提供者

下例顯示如何從地圖檢視中移除位置提供者。

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

自訂基本地圖的外觀和風格

如要自訂地圖元件的外觀和風格，請使用雲端式工具設定地圖樣式，或直接在程式碼中設定選項。

使用雲端式地圖樣式設定

雲端式地圖樣式設定可讓您透過 Google Cloud 控制台，為使用 Google 地圖的任何應用程式建立及編輯地圖樣式，無須修改程式碼。地圖樣式會在 Cloud 專案中以地圖 ID 的形式儲存。如要將樣式套用至 JavaScript SDK 地圖，請在建立 JourneySharingMapView 時指定 mapId 和任何其他 mapOptions。在 JourneySharingMapView 例項化後，就無法變更或新增 mapId 欄位。以下範例說明如何使用地圖 ID 啟用先前建立的地圖樣式。

JavaScript

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

TypeScript

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

使用程式碼式地圖樣式設定

另一種自訂地圖樣式的方法，是在建立 JourneySharingMapView 時設定 mapOptions。

JavaScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    styles: [
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "color": "#CCFFFF" }
        ]
      }
    ]
  }
});

TypeScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    styles: [
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "color": "#CCFFFF" }
        ]
      }
    ]
  }
});

使用自訂標記

您可以使用 JavaScript SDK，自訂在地圖上加入標記的外觀和風格。方法是指定自訂標記，然後套用 JavaScript SDK 再加入標記至地圖和每個標記更新。

最簡單的自訂方式，是指定 MarkerOptions 物件，該物件會套用到所有同類型標記。系統會在建立每個標記之後套用物件中指定的變更，並覆寫任何預設選項。

另一種進階的做法是指定自訂函式。自訂函式可讓您根據資料設定標記樣式，以及在標記中加入互動功能，例如點擊處理。具體來說，「行程」和「訂單進度」會將資料傳送至與標記所代表物件類型 (車輛、起點、路線控點或目的地) 相關的自訂函式。這樣一來，標記樣式就能根據標記元素本身的狀態變更，例如車輛在行程完成前剩餘的路線控點數量。您甚至可以彙整 Fleet Engine 外部來源的資料，並根據該資訊設定標記樣式。

JavaScript SDK 在 FleetEngineTripLocationProviderOptions 中提供下列自訂參數：

• vehicleMarkerCustomization
• originMarkerCustomization
• waypointMarkerCustomization
• destinationMarkerCustomization

使用 MarkerOptions 變更標記的樣式

以下範例說明如何使用 MarkerOptions 物件設定車輛標記的樣式。請遵照這個模式，然後使用上述任何標記自訂項目自訂任何標記的樣式。

JavaScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

使用自訂函式變更標記的樣式

以下範例說明如何設定車輛標記的樣式。請遵照這個模式，使用前述任何標記自訂參數來自訂任何標記的樣式。

JavaScript

vehicleMarkerCustomization =
  (params) => {
    var distance = params.trip.remainingWaypoints.length;
    params.marker.setLabel(`${distance}`);
  };

TypeScript

vehicleMarkerCustomization =
  (params: TripMarkerCustomizationFunctionParams) => {
    const distance = params.trip.remainingWaypoints.length;
    params.marker.setLabel(`${distance}`);
};

為標記新增點擊處理

下例說明如何在車輛標記中新增點擊處理。遵照此模式，即可使用先前列出的任何標記自訂參數，在任何標記中加入點擊處理方式。

JavaScript

vehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

TypeScript

vehicleMarkerCustomization =
  (params: TripMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

使用折線自訂功能

有了 JavaScript SDK，您還可以自訂地圖上行程路線的外觀和風格。程式庫會為車輛使用中或其餘路徑中的每個座標配對建立 google.maps.Polyline 物件。指定折線自訂項目，即可設定 Polyline 物件的樣式。接著，程式庫會在以下兩種情況套用這些自訂項目：將物件加入地圖之前，以及用於物件的資料有所變更。

與標記自訂功能類似，您可以指定一組PolylineOptions 在建立或更新時套用至所有相符 Polyline 物件。

同樣地，您也可以指定自訂函式。自訂函式可以根據 Fleet Engine 傳送的資料，設定物件個別樣式。此函式可根據車輛目前的狀態變更每個物件的樣式，例如將 Polyline 物件上色更深，或在車輛移動速度較慢時變粗。您甚至可以根據 Fleet Engine 外部的來源進行彙整，並根據該資訊設定 Polyline 物件的樣式。

您可以使用 FleetEngineTripLocationProviderOptions 中提供的參數指定自訂項目。您可以針對車輛旅程中的不同路徑狀態 (已旅行、正在旅行或尚未外出) 設定自訂項目。參數如下：

• takenPolylineCustomization 用於已行經的路徑。
• activePolylineCustomization：適用於主動行駛的路徑；
• remainingPolylineCustomization。

使用 PolylineOptions 變更 Polyline 物件的樣式

以下範例說明如何使用 PolylineOptions 設定 Polyline 物件的樣式。按照這個模式，即可使用前述的任何折線自訂項目，自訂任何 Polyline 物件的樣式。

JavaScript

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

TypeScript

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

使用自訂函式變更 Polyline 物件的樣式

以下範例說明如何設定使用中 Polyline 物件的樣式。按照這個模式，使用前述任何折線自訂參數參數來自訂任何 Polyline 物件的樣式。

JavaScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.trip.remainingWaypoints[0].distanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      });
    }
  };

TypeScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params: TripPolylineCustomizationFunctionParams) => {
    const distance = params.trip.remainingWaypoints[0].distanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      });
    }
  };

控管 Polyline 物件的瀏覽權限

根據預設，所有 Polyline 物件都會顯示。如要將 Polyline 物件設為隱藏，請設定其 visible 屬性：

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};

算繪可感知流量的 Polyline 物件

Fleet Engine 會傳回下列車輛有效和剩餘路徑的車流速度資料。您可以使用這項資訊，根據 Polyline 物件的流量速度設定物件樣式：

JavaScript

// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
  FleetEngineTripLocationProvider.
      TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;

// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
  (params) => {
    FleetEngineTripLocationProvider.
        TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
    for (const polylineObject of params.polylines) {
      if (polylineObject.get('strokeColor') === '#05f') {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

TypeScript

// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
  FleetEngineTripLocationProvider.
      TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;

// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
  (params: TripPolylineCustomizationFunctionParams) => {
    FleetEngineTripLocationProvider.
        TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
    for (const polylineObject of params.polylines) {
      if (polylineObject.get('strokeColor') === '#05f') {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

顯示車輛或地點標記的 InfoWindow

您可以使用 InfoWindow 顯示車輛或位置標記的其他資訊。

以下範例說明如何建立 InfoWindow，並附加至車輛標記：

JavaScript

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

locationProvider.addListener('update', e => {
  const stopsCount = e.trip.remainingWaypoints.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();

TypeScript

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

locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineTripLocationProviderUpdateEvent) => {
  const stopsCount = e.trip.remainingWaypoints.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'),
  locationProviders: [locationProvider],
  automaticViewportMode:
      google.maps.journeySharing
          .AutomaticViewportMode.NONE,
  ...
});

TypeScript

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

取代現有地圖

您可以使用 JavaScript SDK 取代包含標記或其他自訂內容的現有地圖，而不會遺失這些自訂項目。

舉例來說，假設有一個網頁具有標準 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, centered at Uluru
  var map = new google.maps.Map(document.getElementById('map'));
  map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});

  // The marker, 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 SDK：

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
async 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.FleetEngineTripLocationProvider({
    projectId: "YOUR_PROVIDER_ID",
    authTokenFetcher,
  });

  // (3) Initialize map view (which contains the map).
  const mapView = new google.maps.journeySharing.JourneySharingMapView({
    element: document.getElementById('map'),
    locationProviders: [locationProvider],
    // any styling options
  });

  locationProvider.tripId = TRIP_ID;

    // (4) Add customizations like before.

    // The location of Uluru
    var uluru = {lat: -25.344, lng: 131.036};
    // The map, centered at Uluru
    var map = mapView.map;
    map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});
    // The marker, 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 SDK to the API loader.
    -->
    <script defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing">
    </script>
  </body>
</html>

如果您使用 Uluru 附近的指定 ID 操作行程，該行程現在就會在地圖上顯示。