Начало работы с Consumer SDK для JavaScript

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

Компоненты

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

Просмотр карты хода поездки и заказа

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

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

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

Вы можете использовать поставщика местоположения поездки, чтобы отслеживать:

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

Отслеживаемые объекты локации

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

Место происхождения

Исходное местоположение — это место, откуда начинается путешествие. Он отмечает место получения.

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

Место назначения — это место, где заканчивается путешествие. Он отмечает место высадки.

Местоположение путевой точки

Местоположение путевой точки — это любое место на маршруте отслеживаемого путешествия. Например, каждая остановка на автобусном маршруте является промежуточной точкой.

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

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

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

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

Варианты стиля

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

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

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

Транспортные средства

Транспортное средство совместного использования видно с момента назначения поездки до момента высадки. Если поездка отменена, автомобиль становится более видимым.

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

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

Начало работы с JavaScript SDK

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

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

Создайте заявку на идентификатор поездки

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

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

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

{
  "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": {
     "tripid": "tid_12345",
   }
}

Создайте сборщик токенов аутентификации

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

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

• Строковый token .
• Число expiresInSeconds . Срок действия токена истекает через указанное время после получения.

JavaScript Consumer SDK запрашивает токен через сборщик токенов аутентификации, если выполняется любое из следующих условий:

• У него нет действующего токена, например, когда он не вызвал сборщик при новой загрузке страницы или когда сборщик не вернулся с токеном.
• Срок действия полученного ранее токена истек.
• Срок действия полученного ранее токена истекает в течение одной минуты.

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

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

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

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 зависит от реализации вашего провайдера. Это URL-адреса примера провайдера :
  • https:// SERVER_URL /токен/драйвер/ VEHICLEID
  • https:// SERVER_URL /токен/потребитель/ TRIPID

Загрузить карту из HTML

В следующем примере показано, как загрузить JavaScript SDK по указанному URL-адресу. Параметр обратного вызова выполняет функцию initMap после загрузки API. Атрибут 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 заранее определяет поставщика местоположения для API Fleet Engine Ridesharing. Используйте идентификатор вашего проекта и ссылку на вашу фабрику токенов, чтобы создать его экземпляр.

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

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 .

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

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

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

Слушайте изменения событий

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

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

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

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

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

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

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

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

Прекратить отслеживание

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

locationProvider.tripId = '';

locationProvider.tripId = '';

Удалить поставщика местоположений из вида карты

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

mapView.removeLocationProvider(locationProvider);

mapView.removeLocationProvider(locationProvider);

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

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

Использование облачного стиля карты

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

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

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

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

Еще один способ настройки стиля карты — установить mapOptions при создании JourneySharingMapView .

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

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 , который будет применяться ко всем маркерам одного типа. Изменения, указанные в объекте, применяются после создания каждого маркера, перезаписывая любые параметры по умолчанию.

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

JavaScript SDK предоставляет следующие параметры настройки в FleetEngineTripLocationProviderOptions :

• vehicleMarkerCustomization
• originMarkerCustomization
• waypointMarkerCustomization
• destinationMarkerCustomization

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

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

vehicleMarkerCustomization = {
  cursor: 'grab'
};

vehicleMarkerCustomization = {
  cursor: 'grab'
};

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

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

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

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

Добавить обработку кликов к маркерам

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

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

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 для еще не пройденного пути.

Измените стиль объектов Polyline с помощью PolylineOptions

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

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

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

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

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

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

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

remainingPolylineCustomization = {visible: false};

remainingPolylineCustomization = {visible: false};

Рендеринг объектов Polyline с учетом трафика

Fleet Engine возвращает данные о скорости движения для активного и оставшегося маршрута следимого транспортного средства. Эту информацию можно использовать для стилизации объектов Polyline в соответствии со скоростью их трафика:

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

// 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 и прикрепить его к маркеру транспортного средства:

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

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

Отключить автоматическую установку

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

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

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>

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