Com o SDK para JavaScript, você visualiza o local
de veículos e locais de interesse monitorados no Fleet Engine. A biblioteca
contém um componente de mapa JavaScript que é uma substituição simples
para que uma entidade google.maps.Map
padrão e componentes de dados se conectem
com o Fleet Engine. Com o SDK para JavaScript,
você pode fornecer uma experiência personalizável e animada de progresso de pedidos e viagens a partir de 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 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 será animado esse veículo conforme ele se move ao longo de seu caminho previsto.
Provedor de locais da viagem
O SDK para JavaScript inclui o local de uma viagem provedor que fornece informações de localização para os objetos rastreados nos o mapa do progresso 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. 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, 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 localização.
Opções de estilo
Os estilos de marcador e polilinha determinam a aparência do objetos de local rastreado no mapa. Você pode usar opções de estilo personalizado para alterar o estilo padrão de acordo com o estilo do seu aplicativo da Web.
Como controlar a visibilidade dos locais rastreados
Esta seção descreve as regras de visibilidade para objetos de local rastreados no mapa dos provedores de localização predefinidos do Fleet Engine. Personalizado ou derivado os provedores de localização podem alterar as regras de visibilidade.
Veículos
Um veículo de transporte por aplicativo fica visível a partir do momento em que é atribuído a uma viagem até o momento do 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 é sempre mostrado no mapa, independentemente do estado da viagem ou da entrega.
Começar a usar o SDK para JavaScript
Antes de usar o SDK para JavaScript, Conhece o Fleet Engine e 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 locais de viagem, criar um JSON Web Token (JWT) com uma reivindicação de ID de viagem.
Para criar o payload do JWT, adicione uma declaração extra na seção de autorização com a chave tripid e defina o valor dele para 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": "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
É possível criar um coletor de tokens de autenticação para recuperar um token criado com as declarações apropriadas nos servidores certificado de conta do seu projeto. É importante produzir somente tokens nos seus servidores e nunca compartilhe seus certificados com clientes. Caso contrário, você comprometerá a segurança do seu 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 a busca.
O SDK de consumidor JavaScript solicita um token por meio do token de autenticação quando uma das seguintes condições for 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 usará o token emitido anteriormente, ainda válido e não terá 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 fabricar tokens, mantenha o o 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 deve passar o tempo de expiração (em segundos, no momento da busca) à biblioteca, como 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 usando o HTML
O exemplo a seguir mostra como carregar o SDK do JavaScript
de um URL específico. O parâmetro de callback executa a initMap
.
após o carregamento da API. O atributo defer permite que o navegador
continuar 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 para JavaScript para acompanhar uma viagem de transporte por aplicativo ou entrega. Não se esqueça de carregar a biblioteca a partir da função de callback especificada na tag do script antes de executar o código.
Instanciar um provedor de locais de viagem
O SDK para 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 do JavaScript, inicialize a visualização de mapa e adicioná-la à página HTML. Sua página deve conter um elemento <div> que contém a visualização do mapa. O elemento <div> chama-se map_canvas no exemplo abaixo.
Para evitar disputas, defina o ID da viagem para o provedor de localização no retorno de chamada 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);
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 a HEC e distância restante antes do embarque ou desembarque. Alterações nas metainformações acionar 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
Erros que surgem de forma assíncrona ao solicitar informações de viagem 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:é preciso unir 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: o provedor de localização.
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 Mapa, estimar seu mapa usando ferramentas baseadas na nuvem ou definindo opções diretamente no código.
Usar a Estilização de mapas baseada na nuvem
Estilização de mapas baseada na nuvem
permite criar e editar estilos de mapa para qualquer um dos seus apps que usam o Google Maps
no console do Google Cloud, sem precisar alterar o código.
Os estilos são salvos como IDs no seu projeto do Cloud. Para
aplicar um estilo ao seu mapa do SDK do JavaScript, especificar
mapId
e qualquer outro mapOptions
quando você cria a JourneySharingMapView
. Não é possível alterar o campo mapId
ou adicionado após o JourneySharingMapView
ter sido instanciado. O seguinte
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
quando você
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, você pode personalizar a aparência dos marcadores adicionados ao no mapa. Para fazer isso, especifique personalizações de marcador, que o Em seguida, o SDK JavaScript é aplicado antes de adicionar marcadores ao mapa e com cada atualização do marcador.
A personalização mais simples é especificar um
MarkerOptions
que será aplicado a todos os marcadores do mesmo tipo. As mudanças
especificados no objeto são aplicados depois que cada marcador é criado,
substituindo qualquer opção padrão.
Uma opção mais avançada é especificar uma função de personalização. Personalização permitem estilizar os marcadores com base em dados, bem como adicionar interatividade aos marcadores, como o tratamento de cliques. Especificamente, viagens e pedidos O progresso transmite dados para a função de personalização sobre o tipo de objeto que O marcador representa: veículo, origem, ponto de referência ou destino. Isso permite o estilo do marcador mudar com base no estado atual do elemento do marcador em si. por exemplo, o número de waypoints restantes até o veículo terminar da viagem. É possível até mesclar dados de fontes externas ao Fleet Engine e defina o estilo do marcador com base nessa informação.
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
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. Seguir este padrão para personalizar o estilo de qualquer marcador usando qualquer um dos elementos os 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 o gerenciamento de cliques aos marcadores
O exemplo a seguir mostra como adicionar o gerenciamento de cliques a um marcador de veículo. Siga este padrão para adicionar manipulação de cliques a qualquer marcador usando qualquer um dos marcadores os 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 da viagem
no mapa. A biblioteca cria uma
google.maps.Polyline
para cada par de coordenadas na coluna ativa ou restante do veículo
path.
Você pode definir o estilo dos objetos Polyline
especificando personalizações de polilinha. O
aplica essas personalizações em duas situações: antes de adicionar a
objetos ao mapa e quando os dados usados para os objetos forem alterados.
Assim como na personalização de marcadores, você pode especificar um conjunto de
PolylineOptions
seja aplicada a todos os objetos Polyline
correspondentes quando forem
criados ou atualizados.
Da mesma forma, é possível especificar uma função de personalização. Funções de personalização
permitem a estilização individual dos objetos com base nos dados enviados pelo Fleet Engine.
A função pode alterar o estilo de cada objeto com base no estado atual do
o veículo por exemplo, colorir o objeto Polyline
com uma tonalidade mais forte ou
tornando-a mais espesso quando o veículo está se movendo mais devagar. Você pode até mesmo se juntar a
de origens fora do Fleet Engine e estilizar o objeto Polyline
com base nisso
informações imprecisas ou inadequadas.
É possível especificar as personalizações usando parâmetros fornecidos no
FleetEngineTripLocationProviderOptions
Você pode definir personalizações para diferentes estados do caminho no
jornada: já percorrido, viajando ativamente ou ainda não percorrido. O
são os seguintes:
takenPolylineCustomization
, para um caminho já percorrido;activePolylineCustomization
, para um caminho ativo;remainingPolylineCustomization
, para um caminho que ainda não foi 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 este padrão para personalizar o estilo de qualquer objeto Polyline
usando qualquer
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 um objeto Polyline
ativo
estilização. Siga este 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 criar um objeto Polyline
invisível, defina
visible
:
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 de
o veículo seguido. Use essas informações para definir o estilo do 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 exibir informações adicionais sobre um veículo ou marcador de local.
O exemplo abaixo 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
Você pode impedir que o mapa ajuste automaticamente a janela de visualização ao veículo e a rota prevista ao desativar o ajuste automático. O exemplo a seguir mostra como desativar o ajuste automático ao configurar a viagem e o pedido visualização do mapa de progresso.
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
É possível usar o SDK do JavaScript para substituir um mapa que inclua marcadores ou outras personalizações sem perder as personalizações.
Por exemplo, suponha que você tenha uma página da Web com google.maps.Map
padrão
entidade em que um marcador é mostrado:
<!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 sua personalização para a função de callback referente à inicialização da visualização do mapa.
- 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ê fizer uma viagem com o especificado perto de Uluru, ele será renderizado no mapa.