最后一公里舰队解决方案目前仅向部分客户提供。如需了解详情,请与销售人员联系

使用 JavaScript 物流跟踪库跟踪运单

借助 JavaScript 装运跟踪库,您可以直观呈现 Fleet Engine 中跟踪的车辆位置以及感兴趣的位置。该库包含一个 JavaScript 地图组件,该组件可直接替换标准 google.maps.Map 实体和数据组件,以用于与 Fleet Engine 连接。您可以使用 JavaScript 物流跟踪库通过 Web 应用提供可自定义的动画物流跟踪体验。

组件

JavaScript 装运跟踪库提供了用于在车辆前往目的地的过程中直观显示车辆和路线的组件,以及供驾驶员预计到达时间或剩余行驶距离的原始数据 Feed。

配送跟踪地图视图

地图视图组件会直观呈现车辆和目的地的位置。如果已知车辆的路线,则地图视图组件会为该车辆沿其预测路径移动添加动画。

配送地点提供商

发货位置提供商会将跟踪对象的位置信息反馈给货运跟踪地图,用于第一英里和最后一英里的货运跟踪。

您可以使用送货地点提供商来跟踪:

  • 运单的自提或配送地点。
  • 送货车辆的位置和路线。

跟踪的营业地点对象

位置信息提供程序会跟踪车辆和目的地等对象的位置。

目标位置

目的地位置是行程结束的位置。对于配送跟踪,这是计划任务位置。

车辆位置

车辆位置是指车辆的跟踪位置。其中可能会包含车辆的路线。

身份验证令牌提取器

如需控制对 Fleet Engine 中存储的位置数据的访问权限,您必须在服务器上为 Fleet Engine 实现 JSON Web 令牌 (JWT) 创建服务。然后,在 Web 应用中实现一个身份验证令牌提取器,使用 JavaScript 旅程共享库对位置数据的访问权限进行身份验证。

样式设置选项

标记和多段线样式决定了地图上所跟踪的位置对象的外观和风格。您可以使用自定义样式选项更改默认样式,以匹配 Web 应用的样式。

控制所跟踪地点的公开范围

本部分介绍了地图上所跟踪对象的默认可见性控件。它们作为预定义规则存在于 Fleet Engine 中。您可以联系支持团队来更改这些规则。

这些规则适用于两类对象:

  • 地点标记
  • 车辆位置

位置标记可见性

出发地、目的地和车辆站点的所有位置标记都会显示在地图上。例如,无论配送状态如何,地图都会始终显示送货地点。

车辆位置可见性

本部分介绍了在有效任务管理期间应用于车辆位置的默认可见性规则。您可以自定义许多任务,但并非所有任务都可以:

  • 空闲任务 - 您无法自定义这些任务的公开范围。
  • 处于活动状态的车辆任务 - 您可以自定义这些类型的任务。
  • 车辆任务无效 - 您无法自定义这些任务的公开范围。

不可用的任务

如果跟踪到的任务中至少有一个路线任务不可用(例如,驾驶员休息或车辆正在加油),则无法看到车辆。系统仍会提供预计到达时间和任务完成时间。

处于活动状态的车辆任务

默认情况下,TaskTrackingInfo proto 提供许多可以在发货跟踪库中可见的数据元素。当任务分配给车辆时,以及车辆在任务的 5 个站内时,这些字段的可见性可用。可见性会在任务完成或取消时结束。字段如下所示:

  • 路线多段线
  • 预计到达时间
  • 估计任务完成时间
  • 离任务的剩余行驶距离
  • 剩余停止次数
  • 车辆位置

要为您的项目自定义公开范围配置,请与支持团队联系。在执行此操作之前,最好先根据您的配置找出对应的选项列表和方案。您可以自定义的可用数据元素如下:

  • 剩余停止次数
  • 预计到达时间前经过多长时间
  • 剩余行驶里程
  • 始终显示
  • 一律不显示

自定义示例:如果车辆在 3 个站内,则显示路线多段线;如果剩余行驶距离小于 5000 米,则显示预计到达时间。请注意,每个数据元素只能与一个可见性选项相关联。

JavaScript 历程共享库

在使用 JavaScript 历程共享库之前,请确保您熟悉 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 加载地图

以下示例展示了如何从指定网址加载 JavaScript 物流跟踪库。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 Deliveryies 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 旅程分享库后,初始化地图视图并将其添加到 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. 如果只有一个待处理的自提任务,则系统会显示该任务。如果有多个待处理的自提任务,系统会生成错误。
  2. 如果只有一个开放式交付任务,则会显示该任务。如果存在多个开放式交付任务,则会生成错误。
  3. 如果有关闭的传送任务,请按以下步骤操作:
    • 如果只有一个关闭的交付任务,该任务会显示。
    • 如果有多个关闭的传送任务,系统会显示结果时间最近的任务。
    • 如果有多个关闭的传送任务,而且这些任务都没有结果时间,则会生成错误。
  4. 如果有关闭取件任务:
    • 如果只有一个关闭的自提任务,系统会显示该任务。
    • 如果有多个已关闭的自提任务,系统会显示结果时间最近的任务。
    • 如果有多个关闭的自提任务,这些任务均没有结果时间,则生成一个错误。
  5. 否则,系统不会显示任何任务。

监听更改事件

您可以使用位置信息提供程序从任务跟踪信息对象中检索任务的元信息。元信息包括预计到达时间、预计经停次数、上车或上车前剩余距离。更改元信息会触发 update 事件。以下示例展示了如何监听这些更改事件。

JavaScript

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

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.taskTrackingInfo.remainingStopCount);
});

处理错误

由于请求发货信息而异步发生的错误会触发 error 事件。以下示例展示了如何监听这些事件以处理错误。

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 块中,以处理意外错误。

自定义基本地图的外观和风格

如需自定义地图组件的外观和风格,您可以使用云端工具或直接在代码中设置选项来设置地图样式

使用云端地图样式设置

借助云端地图样式设置,您可以在 Google Cloud 控制台中为使用 Google 地图的任何应用创建和修改地图样式,而无需更改您的代码。地图样式会以地图 ID 的形式保存在 Cloud 项目中。如需将样式应用于 JavaScript 配送跟踪地图,请在创建 JourneySharingMapView 时指定 mapId。在 JourneySharingMapView 实例化之后,无法更改或添加 mapId 字段。以下示例展示了如何使用地图 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.
});

使用基于代码的地图样式

自定义地图样式的另一种方法是在创建 JourneySharingMapView 时设置 mapOptions

JavaScript

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

TypeScript

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

更改路线的样式和可见性

如需配置已提取和预期路线的样式和可见性,请使用自定义样式选项。如需了解详情,请参阅 polylineOptions 接口

以下示例展示了如何配置预期路线的样式和可见性。如需配置所提取路线的样式和可见性,请使用 takenRoutePolylineSetup,而非 anticipatedRoutePolylineSetup

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 装运跟踪库,您可以自定义添加到地图的标记的外观和风格。您可以通过指定标记自定义来实现此目的,然后 Shipment Tracking 库随后会将该标记自定义添加到地图中以及每次更新标记时。

最简单的自定义是指定一个将应用于相同类型所有标记的 MarkerOptions 对象。对象创建后,系统会在该对象中指定的更改覆盖所有默认选项。

更高级的选项是指定自定义函数。自定义函数允许根据数据为标记设置样式,以及为标记添加互动功能,例如点击处理。具体而言,货物跟踪会将数据传递给有关标记所表示的对象类型(车辆或目的地)的自定义函数。然后,标记样式会根据标记元素本身的状态而变化;例如,规划的停止次数,直到目的地为止。您甚至可以合并来自 Fleet Engine 以外来源的数据,并根据该信息设置标记的样式。

Shipment Tracking 库在 FleetEngineShipmentLocationProviderOptions 中提供以下自定义参数:

使用 MarkerOptions 更改标记的样式

以下示例展示了如何使用 MarkerOptions 对象配置车辆标记的样式。遵循此模式可使用上面列出的任何标记自定义来自定义任何标记的样式。

JavaScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

使用自定义函数更改标记的样式

以下示例展示了如何配置车辆标记的样式。您可以按照此模式使用上面列出的任何标记自定义参数来自定义任何标记的样式。

JavaScript

deliveryVehicleMarkerCustomization =
  (params: ShipmentMarkerCustomizationFunctionParams) => {
    const stopsLeft = params.taskTrackingInfo.remainingStopCount;
    params.marker.setLabel(`${stopsLeft}`);
  };

TypeScript

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.taskTrackingInfo.remainingStopCount;
    params.marker.setLabel(`${stopsLeft}`);
  };

向标记添加点击处理

以下示例展示了如何向车辆标记添加点击处理。 遵循以下模式,使用上文列出的任何标记自定义参数向任何标记添加点击处理。

JavaScript

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

TypeScript

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

为车辆或位置标记显示 InfoWindow

您可以使用 InfoWindow 显示有关车辆或位置标记的更多信息。

以下示例展示了如何创建 InfoWindow 并将其附加到车辆标记:

JavaScript

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

locationProvider.addListener('update', e => {
  const stopsCount =
      e.taskTrackingInfo.remainingStopCount;
  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.taskTrackingInfo.remainingStopCount;
  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 装运跟踪库来替换包含标记或其他自定义设置的现有地图,而不会丢失这些自定义设置。

例如,假设您有一个包含标准 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 历程共享库,请执行以下操作:

  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>

如果您在 Uluru 附近有已跟踪的具有指定 ID 的软件包,它现在会在地图上呈现。