Primeiros passos com o SDK do consumidor para JavaScript

Com o SDK para JavaScript, é possível conferir a localização dos veículos e os locais de interesse rastreados no Fleet Engine. A biblioteca contém um componente de mapa JavaScript que é uma substituição simples para uma entidade google.maps.Map padrão e componentes de dados para se conectar ao Fleet Engine. Com o SDK para JavaScript, é possível oferecer uma experiência de andamento dos pedidos e viagens animadas e personalizáveis no seu aplicativo da Web.

Componentes

O SDK para JavaScript fornece componentes para visualização de veículos e waypoints, além de feeds de dados brutos para o HEC de um motorista ou a distância restante.

Visualização de mapa do andamento da viagem e do pedido

O componente de visualização de mapa mostra a localização de veículos e waypoints. Se o trajeto de um veículo for conhecido, o componente de visualização de mapa vai animar o veículo à medida que ele se mover pelo caminho previsto.

Provedor de locais da viagem

O SDK para JavaScript inclui um provedor de locais de viagem que fornece informações de local dos objetos rastreados ao mapa de andamento da viagem e do pedido.

Você pode usar esse provedor para rastrear:

• O local de embarque ou desembarque de uma viagem.
• O local e o trajeto do veículo atribuído à viagem.

Objetos de local rastreados

O provedor de localização rastreia a localização de objetos, como waypoints e veículos.

Local de origem

O local de origem é o local onde uma jornada começa. Ele marca o local de retirada.

Local de destino

O local de destino é o local onde uma jornada termina. Marca o local de desembarque.

Localização do waypoint

Um local de waypoint é qualquer local ao longo do trajeto de uma viagem rastreada. Por exemplo, cada parada em um trajeto de ônibus é um local do waypoint.

Localização do veículo

O local do veículo é o local monitorado de um veículo. Ele pode incluir um trajeto para o veículo.

Coletor de tokens de autenticação

Para controlar o acesso aos dados de local armazenados no Fleet Engine, implemente um serviço de criação de JSON Web Token (JWT) para o Fleet Engine no seu servidor. Em seguida, implemente um coletor de tokens de autenticação como parte do seu aplicativo da Web, usando o SDK do JavaScript para autenticar o acesso aos dados de local.

Opções de estilo

Os estilos de marcador e polilinha determinam a aparência dos objetos de local rastreados no mapa. Use as opções de estilo personalizado para alterar o estilo padrão de acordo com o do seu aplicativo da Web.

Como controlar a visibilidade dos locais rastreados

Nesta seção, descrevemos as regras de visibilidade para objetos de local rastreados no mapa para provedores de localização predefinidos do Fleet Engine. Os provedores de locais personalizados ou derivados podem mudar as regras de visibilidade.

Vehicles

Um veículo de transporte por aplicativo fica visível do momento em que é atribuído a uma viagem até o horário de desembarque. Se a viagem for cancelada, o veículo ficará mais visível.

Todos os outros marcadores de local

Todos os outros marcadores de local para origem, destino e waypoints são sempre mostrados no mapa. Por exemplo, um local de desembarque do serviço de transporte por aplicativo ou um local de entrega de uma remessa é sempre mostrado no mapa, independente do estado da viagem ou da entrega.

Começar a usar o SDK para JavaScript

Antes de usar o SDK para JavaScript, conheça o Fleet Engine e o como conseguir uma chave de API.

Para acompanhar uma viagem de transporte por aplicativo, primeiro crie uma reivindicação de ID da viagem.

Criar uma reivindicação de ID de viagem

Para acompanhar uma viagem usando o provedor de localização de viagens, crie um JSON Web Token (JWT) com uma declaração de ID de viagem.

Para criar o payload do JWT, adicione outra declaração na seção de autorização com a chave tripid e defina o valor dela como o ID da viagem.

O exemplo a seguir mostra como criar um token para rastreamento por ID de viagem:

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

Criar um coletor de tokens de autenticação

É possível criar um coletor de tokens de autenticação para recuperar um token criado com as declarações apropriadas nos seus servidores usando o certificado de conta de serviço do seu projeto. É importante criar tokens apenas nos seus servidores e nunca compartilhar seus certificados com nenhum cliente. Caso contrário, você comprometerá a segurança do sistema.

O coletor precisa retornar uma estrutura de dados com dois campos, encapsulados em uma promessa:

• Uma string token.
• Um número expiresInSeconds. Um token expira nesse período após a busca.

O SDK para consumidor do JavaScript solicita um token usando o buscador de tokens de autenticação quando alguma das seguintes condições é verdadeira:

• Não tem um token válido, como quando não chamou o coletor em um novo carregamento de página ou quando o coletor não retornou com um token.
• O token buscado anteriormente expirou.
• O token buscado anteriormente está dentro de um minuto para expirar.

Caso contrário, o SDK vai usar o token válido emitido anteriormente e não chamará o coletor.

O exemplo a seguir mostra como criar um coletor de tokens de autenticação:

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

Ao implementar o endpoint do lado do servidor para criar os tokens, lembre-se do seguinte:

• O endpoint precisa retornar um prazo de validade para o token. No exemplo acima, ele é fornecido como data.ExpiresInSeconds.
• O coletor de tokens de autenticação precisa passar o tempo de expiração (em segundos, a partir do momento da busca) para a biblioteca, conforme mostrado no exemplo.
• O SERVER_TOKEN_URL depende da implementação do seu provedor. Estes são os URLs do provedor de exemplo:
  • https://SERVER_URL/token/driver/VEHICLEID
  • https://SERVER_URL/token/consumer/TRIPID

Carregar um mapa usando o HTML

O exemplo abaixo mostra como carregar o SDK para JavaScript usando um URL especificado. O parâmetro callback executa a função initMap após o carregamento da API. O atributo defer permite que o navegador continue renderizando o restante da página enquanto a API é carregada.

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

Seguir uma viagem

Nesta seção, mostramos como usar o SDK do JavaScript para acompanhar uma viagem de transporte por aplicativo ou de entrega. Carregue a biblioteca da função de callback especificada na tag de script antes de executar o código.

Instanciar um provedor de locais de viagem

O SDK do JavaScript predefine um provedor de localização para a API Fleet Engine Ridesharing. Use o ID do projeto e uma referência à fábrica de tokens para instanciá-lo.

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

Inicializar a visualização de mapa

Depois de carregar o SDK para JavaScript, inicialize a visualização de mapa e adicione-a à página HTML. Sua página deve conter um elemento <div> que contenha a visualização de mapa. O elemento <div> é chamado de map_canvas no exemplo abaixo.

Para evitar disputas, defina o ID da viagem para o provedor de localização na chamada de retorno invocada após a inicialização do mapa.

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

Detectar eventos de mudança

Você pode recuperar metainformações sobre uma viagem do objeto de tarefa usando o provedor de localização. As metainformações incluem o HEC e a distância restante antes do embarque ou desembarque. Alterações nas informações meta acionam um evento update. O exemplo a seguir mostra como detectar esses eventos de mudança.

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

Solucionar erros

Os erros que surgem de forma assíncrona da solicitação de informações de viagem acionam eventos de erro. O exemplo a seguir mostra como detectar esses eventos para lidar com erros.

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

Observação:una as chamadas de biblioteca em blocos try...catch para lidar com erros imprevistos.

Parar monitoramento

Para impedir que o provedor de localização rastreie a viagem, remova o ID dela.

JavaScript

locationProvider.tripId = '';

TypeScript

locationProvider.tripId = '';

Remover o provedor de localização da visualização de mapa

O exemplo a seguir mostra como remover um provedor de localização da visualização de mapa.

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

Como personalizar a aparência do mapa de base

Para personalizar a aparência do componente de mapas, estilize seu mapa usando ferramentas baseadas na nuvem ou definindo opções diretamente no código.

Usar a Estilização de mapas baseada na nuvem

Com a Estilização de mapas baseada na nuvem, você pode criar e editar estilos para qualquer um dos seus apps que usam o Google Maps no console do Google Cloud, sem precisar mudar o código. Os estilos são salvos como IDs no seu projeto do Cloud. Para aplicar um estilo ao mapa do SDK do JavaScript, especifique um mapId e qualquer outro mapOptions ao criar o JourneySharingMapView. O campo mapId não pode ser alterado ou adicionado após o JourneySharingMapView ser instanciado. O exemplo a seguir mostra como ativar um estilo de mapa criado anteriormente com um ID do mapa.

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

Usar a Estilização de mapas baseada em código

Outra maneira de personalizar a estilização do mapa é definir mapOptions ao criar o JourneySharingMapView.

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

Usar personalizações de marcadores

Com o SDK para JavaScript, é possível personalizar a aparência dos marcadores adicionados ao mapa. Para fazer isso, especifique personalizações de marcador, que o SDK JavaScript vai aplicar antes de adicionar marcadores ao mapa e a cada atualização de marcador.

A personalização mais simples é especificar um objeto MarkerOptions que será aplicado a todos os marcadores do mesmo tipo. As alterações especificadas no objeto são aplicadas depois que cada marcador é criado, substituindo as opções padrão.

Uma opção mais avançada é especificar uma função de personalização. Com as funções de personalização, é possível estilizar os marcadores com base em dados, além de adicionar interatividade aos marcadores, como o processamento de cliques. Especificamente, esse recurso transmite dados para a função de personalização sobre o tipo de objeto que o marcador representa: veículo, origem, waypoint ou destino. Isso permite que o estilo do marcador mude com base no estado atual do próprio elemento de marcador, por exemplo, no número de waypoints restantes até o veículo terminar a viagem. Também é possível mesclar dados de fontes externas ao Fleet Engine e estilizar o marcador com base nessas informações.

O SDK para JavaScript fornece os seguintes parâmetros de personalização no FleetEngineTripLocationProviderOptions:

• vehicleMarkerCustomization
• originMarkerCustomization
• waypointMarkerCustomization
• destinationMarkerCustomization

Mudar o estilo dos marcadores usando MarkerOptions

O exemplo a seguir mostra como configurar o estilo de um marcador de veículo com um objeto MarkerOptions. Siga este padrão para personalizar o estilo de qualquer marcador usando uma das personalizações listadas anteriormente.

JavaScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

Mudar o estilo dos marcadores usando funções de personalização

O exemplo a seguir mostra como configurar o estilo de um marcador de veículo. Siga esse padrão para personalizar o estilo de qualquer marcador usando qualquer um dos parâmetros de personalização listados acima.

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

Adicionar o gerenciamento de cliques aos marcadores

O exemplo a seguir mostra como adicionar o gerenciamento de cliques a um marcador de veículo. Siga esse padrão para adicionar o processamento de cliques a qualquer marcador usando um dos parâmetros de personalização listados acima.

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

Usar personalizações de polilinha

Com o SDK para JavaScript, também é possível personalizar a aparência do trajeto da viagem no mapa. A biblioteca cria um objeto google.maps.Polyline para cada par de coordenadas no caminho ativo ou restante do veículo. Você pode definir o estilo dos objetos Polyline especificando personalizações de polilinha. Em seguida, a biblioteca aplica essas personalizações em duas situações: antes de adicionar os objetos ao mapa e quando os dados usados para os objetos mudam.

Assim como na personalização de marcadores, você pode especificar um conjunto de PolylineOptions para aplicar a todos os objetos Polyline correspondentes quando eles são criados ou atualizados.

Da mesma forma, é possível especificar uma função de personalização. As funções de personalização permitem aplicar estilos individuais aos objetos com base nos dados enviados pelo Fleet Engine. A função pode mudar o estilo de cada objeto com base no estado atual do veículo. Por exemplo, colorindo o objeto Polyline em uma tonalidade mais profunda ou tornando-o mais espesso quando o veículo está se movendo mais devagar. É possível até mesclar fontes de fora do Fleet Engine e estilizar o objeto Polyline com base nessas informações.

Você pode especificar as personalizações usando os parâmetros fornecidos em FleetEngineTripLocationProviderOptions. Você pode definir personalizações para diferentes estados de caminho na jornada do veículo: já percorrido, viajando ativamente ou ainda não percorrido. Os parâmetros são os seguintes:

• takenPolylineCustomization, para um caminho já percorrido;
• activePolylineCustomization, para um caminho de viagem ativo.
• remainingPolylineCustomization, para um caminho ainda não percorrido.

Mude o estilo dos objetos Polyline usando PolylineOptions.

O exemplo a seguir mostra como configurar o estilo de um objeto Polyline com PolylineOptions. Siga esse padrão para personalizar o estilo de qualquer objeto Polyline usando qualquer uma das personalizações de polilinha listadas anteriormente.

JavaScript

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

TypeScript

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

Mudar o estilo dos objetos Polyline usando funções de personalização

O exemplo abaixo mostra como configurar o estilo de um objeto Polyline ativo. Siga esse padrão para personalizar o estilo de qualquer objeto Polyline usando qualquer um dos parâmetros de personalização de polilinha listados anteriormente.

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

Controlar a visibilidade de objetos Polyline

Por padrão, todos os objetos Polyline ficam visíveis. Para tornar um objeto Polyline invisível, defina a propriedade visible dele:

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};

Renderizar objetos Polyline com reconhecimento de tráfego

O Fleet Engine retorna dados de velocidade de tráfego para os caminhos ativo e restante do veículo seguido. Use essas informações para estilizar os objetos Polyline de acordo com as velocidades de tráfego:

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

Mostrar um InfoWindow para um veículo ou marcador de local

Você pode usar um InfoWindow para mostrar mais informações sobre um veículo ou marcador de local.

O exemplo a seguir mostra como criar um InfoWindow e anexá-lo a um marcador de veículo:

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

Desativar ajuste automático

Para impedir que o mapa ajuste automaticamente a janela de visualização ao veículo e ao trajeto previsto, desative o ajuste automático. O exemplo a seguir mostra como desativar o ajuste automático ao configurar a visualização de mapa do progresso da viagem e do pedido.

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

Substituir um mapa

Você pode usar o SDK para JavaScript para substituir um mapa que inclua marcadores ou outras personalizações sem perder essas personalizações.

Por exemplo, suponha que você tenha uma página da Web com uma entidade google.maps.Map padrão em que um marcador é exibido:

<!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>

Para adicionar o SDK do JavaScript:

1. Adicione o código da fábrica de tokens de autenticação.
2. Inicialize um provedor de localização na função initMap().
3. Inicialize a visualização de mapa na função initMap(). A visualização contém o mapa.
4. Mova sua personalização para a função de callback referente à inicialização da visualização do mapa.
5. Adicione a biblioteca de localização ao carregador de API.

O exemplo a seguir mostra as mudanças que precisam ser feitas:

<!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>

Se você operar uma viagem com o ID especificado perto de Uluru, ela será renderizada no mapa.