El SDK de JavaScript te permite visualizar la ubicación de los vehículos y las ubicaciones de interés que se registran en Fleet Engine. La biblioteca contiene un componente de mapa de JavaScript que es un reemplazo directo de una entidad google.maps.Map estándar y componentes de datos para conectarse con Fleet Engine. Con el SDK de JavaScript, puedes proporcionar una experiencia personalizable y animada del progreso del pedido y de viajes desde tu aplicación web.
Componentes
El SDK de JavaScript proporciona componentes para visualizar vehículos y puntos de referencia, además de feeds de datos sin procesar para la hora de llegada estimada de un conductor o la distancia restante de conducción.
Vista de mapa del progreso del viaje y el pedido
El componente de vista de mapa permite visualizar la ubicación de vehículos y los puntos de referencia. Si se conoce la ruta de un vehículo, el componente de vista de mapa anima ese vehículo a medida que se desplaza por su ruta prevista.
Proveedor de ubicación de viajes
El SDK de JavaScript incluye un proveedor de ubicación de viajes que proporciona información de ubicación para los objetos rastreados en el mapa de progreso del viaje y el pedido.
Puedes usar el proveedor de ubicación de viajes para realizar el seguimiento de lo siguiente:
- Es la ubicación de partida o destino de un viaje.
- Es la ubicación y la ruta del vehículo asignado al viaje.
Objetos de ubicación a los que se les hizo un seguimiento
El proveedor de ubicación hace un seguimiento de la ubicación de objetos como puntos de referencia y vehículos.
Ubicación de origen
La ubicación de origen es la ubicación donde comienza un viaje. Marca el lugar de recogida.
Ubicación de destino
La ubicación de destino es donde termina un viaje. Marca el lugar de destino.
Ubicación del punto de referencia
Una ubicación de punto de referencia es cualquier ubicación a lo largo de la ruta de un viaje rastreado. Por ejemplo, cada parada de una ruta de autobús es una ubicación de punto de referencia.
Ubicación del vehículo
La ubicación del vehículo es la ubicación registrada de un vehículo. De manera opcional, puede incluir una ruta para el vehículo.
Recuperador de tokens de autenticación
Para controlar el acceso a los datos de ubicación almacenados en Fleet Engine, debes implementar un servicio de creación de token web JSON (JWT) para Fleet Engine en tu servidor. Luego, implementa una herramienta de recuperación de tokens de autenticación como parte de tu aplicación web. Para ello, usa el SDK de JavaScript para autenticar el acceso a los datos de ubicación.
Opciones de diseño
Los diseños de marcadores y polilíneas determinan el aspecto de los objetos de ubicación a los que se hace seguimiento en el mapa. Puedes usar opciones de diseño personalizadas para cambiar el diseño predeterminado a fin de que coincida con el de tu aplicación web.
Cómo controlar la visibilidad de las ubicaciones que sigues
En esta sección, se describen las reglas de visibilidad de los objetos de ubicación con seguimiento en el mapa para los proveedores de ubicación predefinidos de Fleet Engine. Los proveedores de ubicación personalizada o derivada pueden cambiar las reglas de visibilidad.
Vehículos
Un vehículo de transporte compartido es visible desde el momento en que se asignó a un viaje hasta el momento de llegada. Si se cancela el viaje, el vehículo estará más visible.
Todos los demás marcadores de ubicación
Todos los demás marcadores de ubicación de origen, destino y puntos de referencia siempre se muestran en el mapa. Por ejemplo, siempre se muestra una ubicación de destino o de entrega de un transporte compartido en el mapa, independientemente del estado del viaje o la entrega.
Comienza a usar el SDK de JavaScript
Antes de usar el SDK de JavaScript, asegúrate de estar familiarizado con Fleet Engine y con obtener una clave de API.
Para realizar el seguimiento de un viaje compartido, primero crea un reclamo de ID de viaje.
Cómo crear un reclamo de ID de viaje
Para realizar el seguimiento de un viaje con el proveedor de ubicación de viaje, crea un token web JSON (JWT) con una reclamación de ID de viaje.
Para crear la carga útil de JWT, agrega una reclamación adicional en la sección de autorización con la clave tripid y establece su valor como el ID de viaje.
En el siguiente ejemplo, se muestra cómo crear un token para realizar un seguimiento por ID de viaje:
{
"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",
}
}
Crea un recuperador de tokens de autenticación
Puedes crear un recuperador de tokens de autenticación para recuperar un token emitido con las reclamaciones apropiadas en tus servidores mediante un certificado de cuenta de servicio para tu proyecto. Es importante que solo crees tokens en tus servidores y nunca los compartas con ningún cliente. De lo contrario, comprometerás la seguridad de tu sistema.
La herramienta de recuperación debe mostrar una estructura de datos con dos campos, dentro de una promesa:
- Una cadena
token. - Un número
expiresInSeconds. Un token vence en este período después de la recuperación.
El SDK del consumidor de JavaScript solicita un token a través del recuperador de tokens de autenticación cuando se cumple alguna de las siguientes condiciones:
- No tiene un token válido, como cuando no llamó a la herramienta de recuperación en una carga de página nueva o cuando la herramienta de recuperación no mostró un token.
- El token que recuperó anteriormente venció.
- El token que recuperó anteriormente se encuentra dentro del minuto de vencimiento.
De lo contrario, el SDK usa el token que se emitió anteriormente y que aún es válido, y no llama a la herramienta de recuperación.
En el siguiente ejemplo, se muestra cómo crear un recuperador de tokens de autenticación:
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(),
};
}
Cuando implementes el extremo del servidor para crear los tokens, ten en cuenta lo siguiente:
- El extremo debe mostrar una hora de vencimiento del token. En el ejemplo anterior, se indica como
data.ExpiresInSeconds. - La herramienta de recuperación de tokens de autenticación debe pasar la hora de vencimiento (en segundos, desde el momento de la recuperación) a la biblioteca, como se muestra en el ejemplo.
- SERVER_TOKEN_URL depende de la implementación de tu proveedor. Estas son las URLs para el proveedor de ejemplo:
- https://
SERVER_URL/token/driver/VEHICLEID - https://
SERVER_URL/token/consumer/TRIPID
- https://
Cómo cargar un mapa desde HTML
En el siguiente ejemplo, se muestra cómo cargar el SDK de JavaScript desde una URL especificada. El parámetro devolución de llamada ejecuta la función initMap después de que se carga la API. El atributo defer permite que el navegador continúe procesando el resto de la página mientras se carga la API.
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing" defer></script>
Después de un viaje
En esta sección, se muestra cómo usar el SDK de JavaScript para seguir un viaje de transporte compartido o de entrega. Asegúrate de cargar la biblioteca desde la función de devolución de llamada especificada en la etiqueta de la secuencia de comandos antes de ejecutar el código.
Crea una instancia de un proveedor de ubicación de viajes
El SDK de JavaScript predefine un proveedor de ubicación para la API de Fleet Engine Ridesharing. Usa tu ID del proyecto y una referencia a la fábrica de tokens para crear una instancia.
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',
});
Cómo inicializar la vista de mapa
Después de cargar el SDK de JavaScript, inicializa la vista de mapa y agrégala a la página HTML. Tu página debe contener un elemento <div> con la vista de mapa. En el siguiente ejemplo, el elemento <div> se llama map_canvas.
Para evitar condiciones de carrera, establece el ID de viaje del proveedor de ubicación en la devolución de llamada que se invoca después de inicializar el 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);
Cómo escuchar eventos de cambio
Puedes recuperar metainformación sobre un viaje desde el objeto de tarea mediante el proveedor de ubicación. La información meta incluye la hora de llegada estimada y la distancia restante antes de la partida o el destino. Los cambios en la metainformación activan un evento update. En el siguiente ejemplo, se muestra cómo escuchar estos eventos de cambio.
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);
});
Cómo solucionar errores
Los errores que surgen de forma asíncrona de la solicitud de información de viaje activan eventos de error. En el siguiente ejemplo, se muestra cómo escuchar estos eventos para manejar los errores.
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);
});
Nota: Asegúrate de unir las llamadas a bibliotecas en bloques try...catch para controlar los errores inesperados.
Detener el seguimiento
Para evitar que el proveedor de ubicación siga el viaje, quita el ID de viaje de ese proveedor.
JavaScript
locationProvider.tripId = '';
TypeScript
locationProvider.tripId = '';
Quita el proveedor de ubicación de la vista de mapa
En el siguiente ejemplo, se muestra cómo quitar un proveedor de ubicación de la vista de mapa.
JavaScript
mapView.removeLocationProvider(locationProvider);
TypeScript
mapView.removeLocationProvider(locationProvider);
Cómo personalizar el aspecto del mapa base
Para personalizar el aspecto del componente de mapas, realiza el diseño de tu mapa con herramientas basadas en la nube o configura opciones directamente en el código.
Cómo utilizar el diseño de mapas basado en Cloud
El diseño de mapas basado en Cloud te permite crear y editar diseños de mapa para cualquiera de tus apps que usen Google Maps desde la consola de Google Cloud, sin necesidad de realizar cambios en tu código.
Los diseños de mapa se guardan como IDs de mapa en tu proyecto de Cloud. Para aplicar un diseño a tu mapa del SDK de JavaScript, especifica un mapId y cualquier otro mapOptions cuando crees el JourneySharingMapView. El campo mapId no se puede cambiar ni agregar después de que se crea una instancia de JourneySharingMapView. En el siguiente ejemplo, se muestra cómo habilitar un diseño de mapa creado anteriormente con un ID de 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.
});
Cómo utilizar el diseño de mapas basado en código
Otra forma de personalizar el diseño del mapa es establecer mapOptions cuando crees el elemento 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" }
]
}
]
}
});
Cómo personalizar los marcadores
Con el SDK de JavaScript, puedes personalizar el aspecto de los marcadores que se agregan al mapa. Para ello, debes especificar las personalizaciones de los marcadores, que el SDK de JavaScript aplicará antes de agregar marcadores al mapa y con cada actualización de marcadores.
La personalización más simple consiste en especificar un objeto MarkerOptions que se aplicará a todos los marcadores del mismo tipo. Los cambios especificados en el objeto se aplican después de la creación de cada marcador y reemplazan las opciones predeterminadas.
Una opción más avanzada es especificar una función de personalización. Las funciones de personalización permiten definir el estilo de los marcadores según los datos, además de agregarles interactividad, por ejemplo, controlar los clics. Específicamente, el progreso del viaje y el pedido le transmite a la función de personalización datos sobre el tipo de objeto que representa el marcador: vehículo, origen, punto de referencia o destino. De esta manera, el diseño del marcador puede cambiar en función del estado actual del elemento del marcador (por ejemplo, la cantidad de puntos de referencia restantes hasta que el vehículo finalice el viaje). Incluso puedes unir datos de fuentes fuera de Fleet Engine y diseñar el marcador en función de esa información.
El SDK de JavaScript proporciona los siguientes parámetros de personalización en FleetEngineTripLocationProviderOptions:
vehicleMarkerCustomizationoriginMarkerCustomizationwaypointMarkerCustomizationdestinationMarkerCustomization
Cambia el estilo de los marcadores con MarkerOptions.
En el siguiente ejemplo, se muestra cómo configurar el diseño de un marcador de vehículo con un objeto MarkerOptions. Sigue este patrón para personalizar el estilo de cualquier marcador con cualquiera de las personalizaciones de marcadores que se mencionaron anteriormente.
JavaScript
vehicleMarkerCustomization = {
cursor: 'grab'
};
TypeScript
vehicleMarkerCustomization = {
cursor: 'grab'
};
Cambia el estilo de los marcadores con las funciones de personalización
En el siguiente ejemplo, se muestra cómo configurar el estilo de un marcador de vehículo. Sigue este patrón para personalizar el estilo de cualquier marcador mediante cualquiera de los parámetros de personalización mencionados 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}`);
};
Cómo agregar la administración de clics a los marcadores
En el siguiente ejemplo, se muestra cómo agregar el manejo de clics a un marcador de vehículo. Sigue este patrón para agregar el control de clics a cualquier marcador mediante cualquiera de los parámetros de personalización del marcador mencionados 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.
});
}
};
Cómo usar personalizaciones de polilíneas
Con el SDK de JavaScript, también puedes personalizar el aspecto de la ruta del viaje en el mapa. La biblioteca crea un objeto google.maps.Polyline para cada par de coordenadas en la ruta activa o restante del vehículo.
Para aplicar diseño a los objetos Polyline, especifica las personalizaciones de polilíneas. Luego, la biblioteca aplica estas personalizaciones en dos situaciones: antes de agregar objetos al mapa y cuando cambian los datos utilizados para los objetos.
Al igual que con la personalización de marcadores, puedes especificar un conjunto de PolylineOptions para que se aplique a todos los objetos Polyline coincidentes cuando se crean o actualizan.
Del mismo modo, puedes especificar una función de personalización. Las funciones de personalización
permiten definir el estilo individual de los objetos según los datos que envía Fleet Engine.
La función puede cambiar el diseño de cada objeto según el estado actual del vehículo. Por ejemplo, puede darle un color al objeto Polyline con un tono más profundo o hacerlo más grueso cuando el vehículo se mueve más lento. Incluso puedes unirte a fuentes externas a Fleet Engine y diseñar el objeto Polyline según esa información.
Puedes especificar las personalizaciones mediante los parámetros proporcionados en FleetEngineTripLocationProviderOptions.
Puedes configurar personalizaciones para los diferentes estados de la ruta en el recorrido del vehículo, ya sea recorrida, de forma activa o aún no recorrida. Los parámetros son los siguientes:
takenPolylineCustomization, para una ruta ya recorridaactivePolylineCustomization, para un recorrido activoremainingPolylineCustomization, para una ruta aún no recorrida.
Cambia el estilo de los objetos Polyline con PolylineOptions.
En el siguiente ejemplo, se muestra cómo configurar el diseño de un objeto Polyline con PolylineOptions.
Sigue este patrón para personalizar el diseño de cualquier objeto Polyline con cualquiera de las personalizaciones de polilíneas que se mencionaron anteriormente.
JavaScript
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
TypeScript
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
Cambia el estilo de los objetos Polyline con funciones de personalización
En el siguiente ejemplo, se muestra cómo configurar el diseño de un objeto Polyline activo. Sigue este patrón para personalizar el diseño de cualquier objeto Polyline mediante cualquiera de los parámetros de personalización de polilíneas que se mencionaron 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'});
});
}
};
Controla la visibilidad de los objetos Polyline
De forma predeterminada, todos los objetos Polyline son visibles. Para hacer que un objeto Polyline sea invisible, establece su propiedad visible:
JavaScript
remainingPolylineCustomization = {visible: false};
TypeScript
remainingPolylineCustomization = {visible: false};
Procesa objetos Polyline adaptados al tráfico
Fleet Engine muestra datos de velocidad del tráfico de las rutas activas y restantes del vehículo seguido. Puedes usar esta información para definir el diseño de los objetos Polyline según sus velocidades de tráfico:
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'});
}
}
};
Muestra un InfoWindow para un vehículo o un marcador de ubicación
Puedes utilizar un objeto InfoWindow para mostrar información adicional sobre un vehículo o un marcador de ubicación.
En el siguiente ejemplo, se muestra cómo crear un InfoWindow y adjuntarlo a un marcador de vehí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();
Inhabilitar el ajuste automático
Para evitar que el mapa se adapte automáticamente al viewport en el vehículo y la ruta anticipada, inhabilita el ajuste automático. En el siguiente ejemplo, se muestra cómo inhabilitar el ajuste automático cuando configuras la vista de mapa del progreso del viaje y del 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,
...
});
Cómo reemplazar un mapa existente
Puedes utilizar el SDK de JavaScript para reemplazar un mapa existente que incluya marcadores u otras personalizaciones sin perder esas personalizaciones.
Por ejemplo, supongamos que tienes una página web con una entidad google.maps.Map estándar en la que se muestra un marcador:
<!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 agregar el SDK de JavaScript, haz lo siguiente:
- Agrega el código para la fábrica de tokens de autenticación.
- Inicializa un proveedor de ubicación en la función
initMap(). - Inicializa la vista de mapa en la función
initMap(). La vista contiene el mapa. - Traslada tu personalización a la función de devolución de llamada para inicializar la vista de mapa.
- Agrega la biblioteca de ubicación al cargador de la API.
En el siguiente ejemplo, se muestran los cambios que se deben realizar:
<!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>
Si operas un viaje con el ID especificado cerca de Uluru, ahora se renderizará en el mapa.