Cómo comenzar a usar el SDK de consumidor para JavaScript

El SDK de JavaScript te permite visualizar la ubicación de vehículos y ubicaciones de interés rastreadas en Fleet Engine. La biblioteca contiene un componente de mapa de JavaScript que reemplaza directamente para que se conecten una entidad google.maps.Map estándar y componentes de datos con Fleet Engine. Con el SDK de JavaScript, puedes proporcionar una experiencia personalizable y animada de viajes y pedidos desde tu aplicación web.

Componentes

El SDK de JavaScript proporciona componentes para la visualización de vehículos y puntos de referencia, así como feeds de datos sin procesar para la hora de llegada estimada del conductor o la distancia restante para conducir.

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 puntos de referencia. Si se conoce la ruta de un vehículo, se anima el componente de vista de mapa. el vehículo a medida que se desplaza por la ruta prevista.

Proveedor de ubicación del viaje

El SDK de JavaScript incluye una ubicación de viaje que envía información de ubicación para los objetos rastreados el mapa de progreso del viaje y el pedido.

Puedes usar el proveedor de ubicación de viajes para realizar un seguimiento de lo siguiente:

• Es el lugar de partida o de destino de un viaje.
• La ubicación y la ruta del vehículo que se asignó al viaje.

Objetos de ubicación con seguimiento

El proveedor de ubicación realiza un seguimiento de la ubicación de los 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 la ubicación donde termina un viaje. Marca la ubicación de destino.

Ubicación del punto de referencia

La ubicación de un punto de referencia es cualquier ubicación a lo largo de la ruta de un viaje rastreado. Por ejemplo, cada parada en 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 rastreada 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 tokens web JSON (JWT) para Fleet Engine en tu servidor. Luego, implementa un recuperador de tokens de autenticación como parte de tu aplicación web con el SDK de JavaScript para autenticar el acceso a los datos de ubicación.

Opciones de diseño

Los estilos de marcador y polilínea determinan el aspecto de la objetos de ubicación con seguimiento en el mapa. Puedes usar opciones de diseño personalizadas para cambiar el estilo predeterminado y que coincida con el estilo 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 para los objetos de ubicación con seguimiento en el mapa para los proveedores de ubicación predefinidos de Fleet Engine. Personalizada o derivada los proveedores de ubicación pueden cambiar las reglas de visibilidad.

Vehículos

Los vehículos de transporte compartido son visibles desde el momento en que se asigna a un viaje hasta el momento de la llegada. Si se cancela el viaje, el vehículo ya no estará visible.

Todos los demás marcadores de ubicación

Todos los demás marcadores de ubicación para el origen, el destino y los puntos de referencia siempre se muestra en el mapa. Por ejemplo, una ubicación de destino de transporte compartido o una ubicación de entrega del envío 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 lo siguiente: estar familiarizado con Fleet Engine y la obtención de una clave de API.

Para realizar el seguimiento de un viaje compartido, primero crea un reclamo de ID de viaje.

Crea un reclamo de ID de viaje

Para realizar el seguimiento de un viaje con el proveedor de ubicación de viajes, sigue estos pasos: crear 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 Utiliza la clave tripid y define su valor como el ID de viaje.

En el siguiente ejemplo, se muestra cómo crear un token para hacer 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 creado con los reclamos correspondientes en sus servidores que usan un certificado de cuenta de Google para tu proyecto. Es importante solo crear tokens en los servidores y nunca compartir los certificados con ningún cliente. De lo contrario, puedes poner en riesgo la seguridad del sistema.

El recuperador 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 y recuperar datos.

El SDK de consumidor de JavaScript solicita un token a través del token de autenticación recuperador 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 nueva carga de página o cuando el recuperador no ha regresado con un token.
• El token que recuperó ya venció.
• El token que recuperó está en el plazo de un minuto a partir de su vencimiento.

De lo contrario, el SDK usa el token válido que se emitió anteriormente y no llama al recuperador.

En el siguiente ejemplo, se muestra cómo crear un recuperador de token de autenticación:

async function authTokenFetcher(options) {
  // options is a record containing two keys called 
  // serviceType and context. The developer should
  // generate the correct SERVER_TOKEN_URL and request
  // based on the values of these fields.
  const response = await fetch(SERVER_TOKEN_URL);
  if (!response.ok) {
    throw new Error(response.statusText);
  }
  const data = await response.json();
  return {
    token: data.Token,
    expiresInSeconds: data.ExpiresInSeconds
  };
}

function authTokenFetcher(options: {
  serviceType: google.maps.journeySharing.FleetEngineServiceType,
  context: google.maps.journeySharing.AuthTokenContext,
}): Promise<google.maps.journeySharing.AuthToken> {
  // The developer should generate the correct
  // SERVER_TOKEN_URL based on options.
  const response = await fetch(SERVER_TOKEN_URL);
  if (!response.ok) {
    throw new Error(response.statusText);
  }
  const data = await response.json();
  return {
    token: data.jwt,
    expiresInSeconds: data.expirationTimestamp - Date.now(),
  };
}

Cuando implementes el extremo del servidor para acuñar los tokens, conserva el lo siguiente:

• El extremo debe mostrar una hora de vencimiento para el token. en el ejemplo. arriba, se da como data.ExpiresInSeconds.
• El recuperador 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 URL para el proveedor de ejemplo:
  • https://SERVER_URL/token/driver/VEHICLEID
  • https://SERVER_URL/token/consumer/TRIPID

Cómo cargar un mapa desde HTML

En el siguiente ejemplo, se muestra cómo cargar el SDK de JavaScript de una URL especificada. El parámetro devolución de llamada ejecuta la initMap. una vez que se carga la API. El atributo defer permite que el navegador continúa renderizando 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 realizar un viaje compartido o de entrega. Asegúrate de carga 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 transporte compartido de Fleet Engine. Usa tu ID del proyecto y una referencia a la fábrica de tokens para crear una instancia.

locationProvider =
    new google.maps.journeySharing
        .FleetEngineTripLocationProvider({
          projectId: 'your-project-id',
          authTokenFetcher: authTokenFetcher, // the token fetcher defined in the previous step

          // Optionally, you may specify a trip ID to
          // immediately start tracking.
          tripId: 'your-trip-id',
});

locationProvider =
    new google.maps.journeySharing
        .FleetEngineTripLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, you may specify a trip ID to
          // immediately start tracking.
          tripId: 'your-trip-id',
});

Cómo inicializar la vista de mapa

Después de cargar el SDK de JavaScript, inicializa la vista de mapa y agregarla a la página HTML. Tu página debe contener un elemento <div> que contiene la vista de mapa El elemento <div> se llama map_canvas en el siguiente ejemplo.

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.

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  // Styling customizations; see below.
  vehicleMarkerCustomization: vehicleMarkerCustomization,
  activePolylineCustomization: activePolylineCustomization,
  // Any undefined styling options will use defaults.
});

// If you did not specify a trip ID in the location
// provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.tripId = 'your-trip-id';

// Give the map an initial viewport to allow it to 
// initialize; otherwise, the 'ready' event above may 
// not fire. The user also has access to the mapView
// object to customize as they wish.
mapView.map.setCenter({lat: 37.2, lng: -121.9});
mapView.map.setZoom(14);

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  // Styling customizations; see below.
  vehicleMarkerCustomization: vehicleMarkerCustomization,
  activePolylineCustomization: activePolylineCustomization,
  // Any undefined styling options will use defaults.
});

// If you did not specify a trip ID in the location
// provider constructor, you may do so here.
locationProvider.tripId = 'your-trip-id';

// Give the map an initial viewport to allow it to 
// initialize; otherwise, the 'ready' event above may 
// not fire. The user also has access to the mapView 
// object to customize as they wish.
mapView.map.setCenter({lat: 37.2, lng: -121.9});
mapView.map.setZoom(14);

Cómo escuchar eventos de cambio

Puedes recuperar información meta sobre un viaje desde el objeto de tarea usando el proveedor de ubicación. La metainformación incluye la hora de llegada estimada y la distancia restante antes del punto de partida o de destino. Cambios en la metainformación activar un evento update En el siguiente ejemplo, se muestra cómo escuchar estos eventos de cambio.

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

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

Cómo solucionar errores

Errores que surgen de forma asíncrona al solicitar información de viaje los eventos de error. En el siguiente ejemplo, se muestra cómo escuchar estos eventos para manejar los errores.

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

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

Nota: Asegúrate de unir las llamadas a la biblioteca en bloques try...catch para manejar errores inesperados.

Detener el seguimiento

Para evitar que el proveedor de ubicación realice el seguimiento del viaje, quita el ID de viaje de el proveedor de ubicación.

locationProvider.tripId = '';

locationProvider.tripId = '';

Quitar 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.

mapView.removeLocationProvider(locationProvider);

mapView.removeLocationProvider(locationProvider);

Personalizar el aspecto del mapa base

Para personalizar el aspecto del componente de mapas, sigue estos pasos: aplicar diseño a tu mapa con herramientas basadas en la nube o configurando opciones directamente en el código.

Cómo utilizar el diseño de mapas basado en Cloud

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 en la consola de Google Cloud, sin necesidad de hacer cambios en tu código. Los diseños de mapa se guardan como IDs de mapa en tu proyecto de Cloud. Para aplica un diseño a tu mapa del SDK de JavaScript, especifica un mapId y cualquier otro mapOptions cuando crees el JourneySharingMapView. No se puede cambiar el campo mapId o se agrega después de que se crea una instancia de JourneySharingMapView. Lo siguiente En el ejemplo anterior, se muestra cómo habilitar un diseño de mapa creado previamente con una ID de mapa.

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

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

Usa el diseño de mapas basado en código

Otra forma de personalizar el diseño de mapa es establecer mapOptions cuando crea el JourneySharingMapView.

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

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

Cómo usar las personalizaciones de los marcadores

Con el SDK de JavaScript, puedes personalizar el aspecto de los marcadores que se agregan a el mapa. Para ello, especifica las personalizaciones de los marcadores, que El SDK de JavaScript se aplica antes de agregar marcadores al mapa y con cada la actualización de los marcadores.

La personalización más sencilla consiste en especificar un MarkerOptions que se aplicará a todos los marcadores del mismo tipo. Los cambios especificadas en el objeto se aplican después de crear cada marcador y reemplaza las opciones predeterminadas.

Una opción más avanzada es especificar una función de personalización. Personalización permiten definir el estilo de los marcadores según los datos, además de agregar interactividad con marcadores, como el manejo de clics. Específicamente, Viaje y pedido El progreso pasa datos a la función de personalización sobre el tipo de objeto que el marcador representa: vehículo, origen, punto de referencia o destino. Esto permite cómo cambiar el diseño del marcador en función del estado actual del elemento del marcador a sí mismo; por ejemplo, la cantidad de puntos de referencia restantes hasta que finalice el vehículo del viaje. Incluso puedes unir datos de fuentes fuera de Fleet Engine y diseñar el marcador según esa información.

El SDK de JavaScript proporciona los siguientes parámetros de personalización en FleetEngineTripLocationProviderOptions:

• vehicleMarkerCustomization
• originMarkerCustomization
• waypointMarkerCustomization
• destinationMarkerCustomization

Cómo cambiar 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 con cualquiera de las personalizaciones de marcadores mencionadas anteriormente.

vehicleMarkerCustomization = {
  cursor: 'grab'
};

vehicleMarkerCustomization = {
  cursor: 'grab'
};

Cómo cambiar el estilo de los marcadores con las funciones de personalización

En el siguiente ejemplo, se muestra cómo configurar el diseño de un marcador de vehículo. Seguir este patrón para personalizar el estilo de cualquier marcador con cualquiera de parámetros de personalización mencionados anteriormente.

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

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

Cómo agregar control de clics a los marcadores

En el siguiente ejemplo, se muestra cómo agregar el control de clics a un marcador de vehículo. Sigue este patrón para agregar el control de clics a cualquier marcador que utilice cualquiera de ellos. parámetros de personalización mencionados anteriormente.

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

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

Cómo personalizar las polilíneas

Con el SDK de JavaScript, también puedes personalizar el aspecto del viaje ruta en el mapa. La biblioteca crea google.maps.Polyline objeto de cada par de coordenadas en las coordenadas activas o restantes ruta de acceso. Puedes aplicar ajustes de diseño a los objetos Polyline especificando personalizaciones de polilíneas. El luego, aplica estas personalizaciones en dos situaciones: antes de agregar el objetos al mapa y cuándo los datos utilizados para los objetos cambiaron.

Al igual que con la personalización de marcadores, puedes especificar PolylineOptions que se aplicará a todos los objetos Polyline coincidentes cuando se crearse o actualizarse.

Del mismo modo, puedes especificar una función de personalización. Funciones de personalización permitir el diseño individual de los objetos según los datos que envía Fleet Engine. La función puede cambiar el estilo de cada objeto basándose en el estado actual de el vehículo por ejemplo, aplicar un color al objeto Polyline con un matiz más profundo o y se vuelve más grueso cuando el vehículo se mueve más lento. Incluso puedes unirte de fuentes fuera de Fleet Engine y diseñar el objeto Polyline en función de eso información.

Puedes especificar las personalizaciones con los parámetros proporcionados en FleetEngineTripLocationProviderOptions Puedes configurar personalizaciones para diferentes estados de ruta en el ya viajó, viajó activamente o aún no viajó. El son los siguientes:

• takenPolylineCustomization, para un camino ya recorrido;
• activePolylineCustomization, para un camino que transite activamente.
• remainingPolylineCustomization, para un camino que aún no ha recorrido.

Cambia el diseño 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 estilo de cualquier objeto Polyline que use cualquiera de las personalizaciones de polilíneas mencionadas anteriormente.

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

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

Cambia el estilo de los objetos Polyline con las funciones de personalización

En el siguiente ejemplo, se muestra cómo configurar la propiedad Polyline de un objeto activo estilo. Sigue este patrón para personalizar el diseño de cualquier objeto Polyline. usando cualquiera de los parámetros de personalización de polilíneas mencionados anteriormente.

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.trip.remainingWaypoints[0].distanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      });
    }
  };

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params: TripPolylineCustomizationFunctionParams) => {
    const distance = params.trip.remainingWaypoints[0].distanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      });
    }
  };

Controla la visibilidad de los objetos Polyline

De forma predeterminada, todos los objetos Polyline son visibles. Sigue estos pasos para crear un objeto Polyline: invisible, establece su visible propiedad:

remainingPolylineCustomization = {visible: false};

remainingPolylineCustomization = {visible: false};

Procesa objetos Polyline optimizados para el tráfico

Fleet Engine devuelve datos de velocidad de tráfico para las rutas activas y restantes para el vehículo que sigues. Puedes usar esta información para diseñar el Polyline de acuerdo con su velocidad de tráfico:

// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
  FleetEngineTripLocationProvider.
      TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;

// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
  (params) => {
    FleetEngineTripLocationProvider.
        TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
    for (const polylineObject of params.polylines) {
      if (polylineObject.get('strokeColor') === '#05f') {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
  FleetEngineTripLocationProvider.
      TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;

// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
  (params: TripPolylineCustomizationFunctionParams) => {
    FleetEngineTripLocationProvider.
        TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
    for (const polylineObject of params.polylines) {
      if (polylineObject.get('strokeColor') === '#05f') {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

Cómo mostrar una InfoWindow para un marcador de ubicación o vehículo

Puedes usar un 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 elemento InfoWindow y adjuntarlo a un marcador de vehículo:

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

locationProvider.addListener('update', e => {
  const stopsCount = e.trip.remainingWaypoints.length;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

  // 2. Attach the info window to a vehicle marker.   
  // This property can return multiple markers.
  const marker = mapView.vehicleMarkers[0];
  infoWindow.open(mapView.map, marker);
});

// 3. Close the info window.
infoWindow.close();

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineTripLocationProviderUpdateEvent) => {
  const stopsCount = e.trip.remainingWaypoints.length;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

  // 2. Attach the info window to a vehicle marker.   
  // This property can return multiple markers.
  const marker = mapView.vehicleMarkers[0];
  infoWindow.open(mapView.map, marker);
});

// 3. Close the info window.
infoWindow.close();

Inhabilitar el ajuste automático

Puedes impedir que el mapa ajuste automáticamente el viewport al vehículo. y la ruta prevista si inhabilitas el ajuste automático. El siguiente ejemplo se muestra cómo inhabilitar el ajuste automático cuando configuras el viaje y el pedido vista de mapa de progreso.

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

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

Puedes usar el SDK de JavaScript para reemplazar un mapa existente que incluya marcadores o cualquier otra personalización sin perder esas personalizaciones.

Por ejemplo, supongamos que tienes una página web con un elemento google.maps.Map estándar. entidad 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:

1. Agrega el código para la fábrica del token de autenticación.
2. Inicializa un proveedor de ubicación en la función initMap().
3. Inicializa la vista de mapa en la función initMap(). La vista contiene el mapa.
4. Mueve tu personalización a la función de devolución de llamada para inicializar la vista de mapa.
5. Agrega la biblioteca de ubicaciones al cargador de 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 realizas un viaje con las determinado ID cerca de Uluru, ahora se renderizará en el mapa.