O SDK do JavaScript permite visualizar a localização
de veículos e 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 conexão
com o Fleet Engine. Com o SDK para JavaScript, é possível proporcionar uma experiência animada e personalizável de viagens e pedidos no seu aplicativo da Web.
Componentes
O SDK para JavaScript fornece componentes para visualização de veículos e waypoints, bem como feeds de dados brutos para o HEC de um motorista ou a distância restante a ser percorrida.
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 para um veículo for conhecido, o componente de visualização de mapa vai animar o veículo à medida que ele se move ao longo do caminho previsto.
Provedor do local da viagem
O SDK para JavaScript inclui um provedor de local da viagem que insere informações de localização de objetos rastreados no mapa de andamento da viagem e do pedido.
É possível usar o provedor de local da viagem para acompanhar:
- O local de embarque ou desembarque de uma viagem.
- O local e o trajeto do veículo atribuído à viagem.
Objetos de localização rastreados
O provedor de localização rastreia a localização de objetos como waypoints e veículos.
Local de origem
O local de origem é onde uma jornada começa. Ele marca o local de retirada.
Local de destino
O local de destino é onde uma jornada termina. Ele marca o local de desembarque.
Local do waypoint
Um local de waypoint é qualquer local ao longo do trajeto de uma jornada rastreada. Por exemplo, cada parada em um trajeto de ônibus é um local de waypoint.
Local do veículo
O local do veículo é o local monitorado. Ele pode, opcionalmente, 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, você precisa implementar 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 marcadores e polilinhas determinam a aparência dos objetos de localização rastreados no mapa. Você pode usar opções de estilo personalizadas para alterar o estilo padrão de acordo com o estilo do seu aplicativo da Web.
Como controlar a visibilidade dos locais rastreados
Nesta seção, descrevemos as regras de visibilidade para objetos de localização rastreados no mapa para provedores de local predefinidos do Fleet Engine. Os provedores de local personalizados ou derivados podem alterar as regras de visibilidade.
Veículos
Esse tipo de veículo fica visível do momento em que é atribuído a uma viagem até o momento da desembarque. Se a viagem for cancelada, o veículo ficará mais visível.
Todos os outros marcadores de local
Todos os outros marcadores de origem, destino e waypoints são sempre mostrados no mapa. Por exemplo, um local de desembarque de transporte compartilhado ou um local de entrega de uma remessa é sempre mostrado no mapa, independentemente do estado da viagem ou entrega.
Começar a usar o SDK do JavaScript
Antes de usar o SDK para JavaScript, conheça o Fleet Engine e saiba como acessar uma chave de API.
Para acompanhar uma viagem de compartilhamento, crie uma reivindicação do ID dela.
Criar uma reivindicação de ID de viagem
Para acompanhar uma viagem usando o provedor de localização de viagem, crie um JSON Web Token (JWT) com uma declaração de ID de viagem.
Para criar o payload do JWT, inclua uma declaração adicional na seção de autorização com a chave tripid e defina o valor para o ID de viagem.
O exemplo a seguir mostra como criar um token para rastrear por ID de viagem:
{
"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",
}
}
Criar um coletor de tokens de autenticação
Crie um coletor de tokens de autenticação para recuperar um token gerado com as declarações apropriadas nos servidores usando um certificado de conta de serviço para o projeto. É importante produzir tokens apenas nos servidores e nunca compartilhar certificados com clientes. Caso contrário, a segurança do sistema será comprometida.
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 do consumidor JavaScript solicita um token pelo buscador de tokens de autenticação quando uma das seguintes condições é verdadeira:
- Ela não tem um token válido, como quando não chamou o coletor em um novo carregamento de página ou quando 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 usa o token emitido anteriormente, ainda válido, e não chama 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 transmitir o tempo de validade (em segundos, a partir do momento da busca) à 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
- https://
Carregar um mapa de HTML
O exemplo a seguir mostra como carregar o SDK do JavaScript
de 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
Esta seção mostra como usar o SDK do JavaScript para acompanhar uma viagem de transporte por aplicativo ou entrega. Carregue a biblioteca usando a função de callback especificada na tag do script antes de executar o código.
Instanciar um provedor de local da viagem
O SDK do JavaScript predefine um provedor de localização para a API Fleet Engine Ridesharing. Para instanciá-lo, use o ID do projeto e uma referência à fábrica do token.
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 do 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. No exemplo abaixo, o elemento <div> é chamado de map_canvas.
Para evitar disputas, defina o ID de viagem do provedor de localização no callback invocado 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);
Ouvir eventos de alteração
Você pode recuperar metainformações sobre uma viagem do objeto de tarefa usando o provedor de localização. Essas informações incluem o HEC e a distância restante antes do embarque ou desembarque. As mudanças nas metainformações 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 ao solicitar informações de viagem acionam eventos de erro. O exemplo a seguir mostra como detectar esses eventos para processar 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:envolva 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 básico
Para personalizar a aparência do componente Maps, 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 alterar o código.
Os estilos de mapa são salvos como IDs de mapa no seu projeto do Cloud. Para aplicar um estilo ao mapa do SDK para JavaScript, especifique um mapId
e qualquer outro mapOptions
ao criar JourneySharingMapView
. Não é possível adicionar ou mudar o campo mapId
depois que o JourneySharingMapView
for instanciado. O exemplo a seguir mostra como ativar um estilo de mapa criado anteriormente com um ID.
JavaScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
mapId: 'YOUR_MAP_ID'
}
// and any other styling options.
});
TypeScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
mapId: 'YOUR_MAP_ID'
}
// and any other styling options.
});
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 as personalizações dos marcadores
Com o SDK para JavaScript, você pode personalizar a aparência dos marcadores adicionados ao mapa. Para fazer isso, especifique personalizações de marcador, que o SDK do JavaScript aplica antes de adicionar marcadores ao mapa e sempre que ele for atualizado.
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 da criação de cada marcador, substituindo todas as opções padrão.
Uma opção mais avançada é especificar uma função de personalização. As funções de personalização permitem estilizar os marcadores com base nos dados, além de adicionar interatividade a eles, como o processamento de cliques. Especificamente, o andamento da viagem e do pedido 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 marcador. Por exemplo, o número de waypoints restantes até que o veículo termine a viagem. É possível até mesmo mesclar dados de fontes fora do 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 esse padrão para personalizar o estilo de qualquer marcador usando qualquer uma das personalizações mencionadas anteriormente.
JavaScript
vehicleMarkerCustomization = {
cursor: 'grab'
};
TypeScript
vehicleMarkerCustomization = {
cursor: 'grab'
};
Alterar 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 um dos parâmetros de personalização listados anteriormente.
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 processamento 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 processamento de cliques a qualquer marcador usando um dos parâmetros de personalização listados anteriormente.
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, você também pode 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 estilizar os objetos Polyline
especificando personalizações de polilinha. 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, é possível especificar um conjunto de PolylineOptions
para ser aplicado a todos os objetos Polyline
correspondentes quando eles forem criados ou atualizados.
Da mesma forma, é possível especificar uma função de personalização. As funções de personalização
permitem aplicar um estilo individual 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, colorir o objeto Polyline
com uma tonalidade mais profunda ou
torná-lo mais espesso quando o veículo está se movendo mais devagar. É possível até mesmo mesclar
de fontes fora do Fleet Engine e estilizar o objeto Polyline
com base nessas
informações.
Você pode especificar as personalizações usando parâmetros fornecidos em
FleetEngineTripLocationProviderOptions
.
Você pode definir personalizações para diferentes estados do caminho na jornada do veículo: já percorrido, viajando ativamente ou ainda não viajando. 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.
Mudar o estilo de 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 de objetos Polyline
usando funções de personalização
O exemplo a seguir mostra como configurar o estilo de um objeto Polyline
ativo. Siga esse padrão para personalizar o estilo de qualquer objeto Polyline
usando 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 do tráfego para os caminhos ativos e restantes do veículo seguido. É possível usar 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 marcador de veículo ou local
Você pode usar um InfoWindow
para exibir 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 o ajuste automático
Desative o ajuste automático para impedir que o mapa se ajuste automaticamente à janela de visualização ao veículo e ao trajeto previsto. O exemplo a seguir mostra como desativar o ajuste automático ao configurar a visualização de mapa do progresso da viagem e 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 inclui marcadores ou outras personalizações sem perder o acesso a elas.
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:
- Adicione o código da fábrica de tokens de autenticação.
- Inicialize um provedor de localização na função
initMap()
. - Inicialize a visualização de mapa na função
initMap()
. A visualização contém o mapa. - Mova a personalização para a função de callback para a inicialização da visualização de mapa.
- Adicione a biblioteca de localização ao carregador da API.
O exemplo a seguir mostra as mudanças a serem 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ê opera uma viagem com o ID especificado perto de Uluru, ela vai ser renderizada no mapa.