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

Отслеживание отправлений с помощью библиотеки отслеживания отправлений JavaScript

Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

Библиотека отслеживания отгрузок JavaScript позволяет визуализировать местоположение транспортных средств и интересных мест, отслеживаемых в Fleet Engine. Библиотека содержит компонент карты JavaScript, который является заменой стандартного объекта google.maps.Map и компонентов данных для подключения к Fleet Engine. Используя JavaScript-библиотеку отслеживания отправлений, вы можете предоставить настраиваемый анимированный способ отслеживания отправлений из своего веб-приложения.

Компоненты

Библиотека отслеживания отгрузок JavaScript предоставляет компоненты для визуализации транспортного средства и маршрута по мере его продвижения к месту назначения, а также потоки необработанных данных для расчетного времени прибытия водителя или оставшегося расстояния до поездки.

Просмотр карты отслеживания отправлений

Компонент представления карты визуализирует расположение транспортных средств и пунктов назначения. Если маршрут транспортного средства известен, компонент представления карты анимирует это транспортное средство, когда оно движется по предсказанному пути.

Поставщик местоположения отгрузки

Поставщик местоположения отгрузки передает информацию о местоположении отслеживаемых объектов на карту отслеживания отгрузки для отслеживания отгрузки первой и последней мили.

Вы можете использовать провайдера местоположения отгрузки для отслеживания:

  • Место получения или доставки груза.
  • Местонахождение и маршрут транспортного средства доставки.

Отслеживаемые объекты местоположения

Поставщик местоположения отслеживает местоположение таких объектов, как транспортные средства и пункты назначения.

Место назначения

Пункт назначения — это место, где заканчивается путешествие. Для отслеживания отгрузки это запланированное местоположение задачи.

Местоположение автомобиля

Местонахождение транспортного средства — это отслеживаемое местоположение транспортного средства. Опционально он может включать маршрут для транспортного средства.

Сборщик токенов аутентификации

Чтобы контролировать доступ к данным о местоположении, хранящимся в Fleet Engine, вы должны внедрить на своем сервере службу чеканки JSON Web Token (JWT) для Fleet Engine. Затем внедрите сборщик токенов аутентификации как часть своего веб-приложения, используя библиотеку общего доступа JavaScript Journey для аутентификации доступа к данным о местоположении.

Варианты укладки

Стили маркеров и полилиний определяют внешний вид отслеживаемых объектов местоположения на карте. Вы можете использовать настраиваемые параметры стиля, чтобы изменить стиль по умолчанию, чтобы он соответствовал стилю вашего веб-приложения.

Контролируйте видимость отслеживаемых местоположений

В этом разделе описываются правила видимости отслеживаемых объектов местоположения на карте для предопределенных поставщиков местоположения Fleet Engine. Пользовательские или производные поставщики местоположений могут изменить правила видимости.

Транспорт

Транспортное средство становится видимым в библиотеке отслеживания отгрузок, когда соответствующая задача назначена транспортному средству и транспортное средство находится в пределах пяти остановок от задачи. Видимость транспортного средства прекращается, когда задание выполнено или отменено.

Транспортное средство не видно во время задачи недоступности (например, если водитель отдыхает или заправляется транспортное средство).

Все остальные маркеры местоположения

Все остальные маркеры местоположения для пунктов отправления, назначения и остановок транспортных средств всегда отображаются на карте. Например, место доставки посылки всегда отображается на карте, независимо от состояния доставки.

Начните работу с JavaScript Journey Sharing Library

Прежде чем использовать JavaScript Journey Sharing Library, убедитесь, что вы знакомы с Fleet Engine и получением ключа API .

Чтобы отслеживать доставку, сначала создайте заявку на идентификатор отслеживания.

Создание заявки на идентификатор отслеживания

Чтобы отслеживать отправление с помощью поставщика местоположения отправления , создайте веб-токен JSON (JWT) с утверждением идентификатора отслеживания.

Чтобы создать полезную нагрузку JWT, добавьте в раздел авторизации дополнительное утверждение с идентификатором отслеживания ключа. Установите его значение в идентификатор отслеживания отправления.

В следующем примере показано, как создать токен для отслеживания по идентификатору отслеживания:

{
  "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
  };
}

Машинопись

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 с указанного URL-адреса. Параметр обратного вызова выполняет функцию initMap после загрузки API. Атрибут 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-библиотеку отслеживания отправлений, чтобы следить за получением или доставкой отправления. Перед запуском кода обязательно загрузите библиотеку из функции обратного вызова, указанной в теге script .

Создание поставщика местоположения отгрузки

Библиотека отслеживания доставки JavaScript предварительно определяет поставщика местоположения для API доставки Fleet Engine . Используйте идентификатор своего проекта и ссылку на фабрику токенов, чтобы создать его экземпляр.

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',
});

Машинопись

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

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

Инициализировать представление карты

После загрузки библиотеки JavaScript Journey Sharing инициализируйте представление карты и добавьте его на HTML-страницу. Ваша страница должна содержать элемент <div> , содержащий вид карты. В следующем примере элемент <div> называется map_canvas .

Чтобы избежать условий гонки, установите идентификатор отслеживания для поставщика местоположения в обратном вызове, который вызывается после инициализации карты.

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);

Машинопись

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);

Идентификатор отслеживания

Идентификатор отслеживания, предоставляемый поставщику местоположения, может соответствовать нескольким задачам; например, задание на самовывоз и доставку одной и той же посылки или несколько неудачных попыток доставки. Одна задача выбрана для отображения на карте отслеживания отгрузки. Показываемая задача определяется следующим образом:

  1. Если открыто только одно задание на вывоз, оно отображается. Генерируется ошибка, если имеется несколько открытых задач по вывозу.
  2. Если имеется ровно одна открытая задача доставки, она отображается. Генерируется ошибка, если открыто несколько задач доставки.
  3. Если есть закрытые задачи доставки:
    • Если есть ровно одна закрытая задача доставки, она отображается.
    • Если есть несколько закрытых задач доставки, отображается та, у которой самое последнее время результата.
    • Если есть несколько закрытых задач доставки, ни одна из которых не имеет времени результата, генерируется ошибка.
  4. Если есть закрытые самовывозы:
    • Если есть только одна закрытая задача, она отображается.
    • Если есть несколько закрытых задач самовывоза, отображается та, у которой самое последнее время завершения.
    • Если есть несколько закрытых задач самовывоза, ни одна из которых не имеет времени результата, генерируется ошибка.
  5. В противном случае задание не отображается.

Прослушивание событий изменений

Вы можете получить метаинформацию о задаче из информационного объекта отслеживания задач, используя поставщика местоположения. Метаинформация включает в себя ETA, количество оставшихся остановок и оставшееся расстояние до погрузки или доставки. Изменения в метаинформации вызывают событие обновления . В следующем примере показано, как прослушивать эти события изменения.

JavaScript

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

Машинопись

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);
});

Обработка ошибок

Ошибки, возникающие асинхронно при запросе информации об отправке, вызывают события ошибок . В следующем примере показано, как прослушивать эти события для обработки ошибок.

JavaScript

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

Машинопись

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

Примечание. Не забудьте обернуть вызовы библиотек в try...catch для обработки непредвиденных ошибок.

Настройте внешний вид базовой карты

Чтобы настроить внешний вид компонента карты, настройте стиль карты с помощью облачных инструментов или задайте параметры непосредственно в коде.

Используйте облачные стили карты

Облачные стили карт позволяют создавать и редактировать стили карт для любого из ваших приложений, использующих Google Maps, из консоли Google Cloud, не требуя каких-либо изменений в вашем коде. Стили карт сохраняются как идентификаторы карт в вашем облачном проекте. Чтобы применить стиль к вашей карте отслеживания отгрузок JavaScript, укажите mapId при создании JourneySharingMapView . Поле mapId нельзя изменить или добавить после создания экземпляра JourneySharingMapView . В следующем примере показано, как включить ранее созданный стиль карты с идентификатором карты.

JavaScript

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

Машинопись

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

Используйте стиль карты на основе кода

Другой способ настроить стиль карты — установить mapOptions при создании JourneySharingMapView .

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" }
        ]
      }
    ]
  }
});

Машинопись

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,
};

Машинопись

// 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 вы можете настроить внешний вид маркеров, добавленных на карту. Вы делаете это, указывая настройки маркеров, которые затем применяются библиотекой отслеживания отправлений перед добавлением маркеров на карту и при каждом обновлении маркеров.

Самая простая настройка — указать объект MarkerOptions , который будет применяться ко всем маркерам одного типа. Изменения, указанные в объекте, применяются после создания каждого маркера, перезаписывая любые параметры по умолчанию.

Более продвинутый вариант — указать функцию настройки. Функции настройки позволяют стилизовать маркеры на основе данных, а также добавлять к маркерам интерактивность, например обработку щелчков. В частности, отслеживание отправлений передает функции настройки данные о типе объекта, который представляет маркер: транспортное средство или пункт назначения. Затем это позволяет изменять стиль маркера в зависимости от текущего состояния самого элемента маркера; например, количество запланированных остановок, оставшихся до пункта назначения. Вы даже можете объединяться с данными из источников вне Fleet Engine и стилизовать маркер на основе этой информации.

Библиотека отслеживания доставки предоставляет следующие параметры настройки в FleetEngineShipmentLocationProviderOptions :

Измените стиль маркеров с помощью MarkerOptions .

В следующем примере показано, как настроить стиль маркера транспортного средства с помощью объекта MarkerOptions . Следуйте этому шаблону, чтобы настроить стиль любого маркера, используя любую из настроек маркера, перечисленных выше.

JavaScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

Машинопись

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

Изменение стиля маркеров с помощью функций настройки

В следующем примере показано, как настроить стиль маркера транспортного средства. Следуйте этому шаблону, чтобы настроить стиль любого маркера, используя любой из параметров настройки маркера, перечисленных выше.

JavaScript

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

Машинопись

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

Машинопись

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

Машинопись

// 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 Journey Sharing:

  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>

Если у вас есть отслеживаемая посылка с указанным идентификатором рядом с Улуру, теперь она будет отображаться на карте.