Premiers pas avec le SDK Consumer pour JavaScript

Le SDK JavaScript vous permet de visualiser l'emplacement de véhicules et de lieux d'intérêt suivis dans Fleet Engine. La bibliothèque contient un composant de carte JavaScript qui est un outil de remplacement prête à l'emploi ; pour qu'une entité google.maps.Map standard et des composants de données puissent se connecter avec Fleet Engine. Avec le SDK JavaScript, vous pouvez proposer une expérience personnalisable et animée de trajet et de progression des commandes depuis votre application Web.

Composants

Le SDK JavaScript fournit des composants pour la visualisation de véhicules et de points de cheminement, ainsi que des flux de données brutes pour l'heure d'arrivée prévue du conducteur. ou la distance restante à parcourir.

Affichage de la carte de progression du trajet et de la commande

Le composant "Carte" permet de visualiser la position des véhicules et des points de cheminement. Si l'itinéraire d'un véhicule est connu, le composant Vue de la carte s'anime au véhicule lorsqu'il se déplace sur sa trajectoire prédite.

Fournisseur de lieux de voyage

Le SDK JavaScript inclut un lieu de trajet un fournisseur qui transmet les informations de localisation des objets suivis la carte de progression du trajet et de la commande.

Vous pouvez utiliser le fournisseur de localisation de trajets pour effectuer le suivi des éléments suivants:

• Lieu de prise en charge ou de dépose d'un trajet.
• L'emplacement et l'itinéraire du véhicule associé au trajet.

Objets de localisation suivis

Le fournisseur de localisation suit la position d'objets tels que des points de cheminement et des véhicules.

Lieu de départ

Le lieu de départ est le point de départ du voyage. Elle marque le lieu de prise en charge.

Emplacement de la destination

La destination est le lieu où se termine le trajet. Elle marque le lieu de dépose.

Emplacement du point de cheminement

L'emplacement d'un point de cheminement est un emplacement situé sur le trajet d'un trajet suivi. Par exemple, chaque arrêt sur un itinéraire de bus constitue un point de cheminement.

Emplacement du véhicule

La position du véhicule correspond à sa position. Elle peut éventuellement inclure un itinéraire pour le véhicule.

Outil de récupération des jetons d'authentification

Pour contrôler l'accès aux données de localisation stockées dans Fleet Engine, vous devez implémenter un service de frappe de jetons Web JSON (JWT) pour Fleet Engine ; sur votre serveur. Ensuite, implémentez un outil de récupération de jetons d'authentification dans le cadre de votre application Web, à l'aide du SDK JavaScript pour authentifier l'accès aux données de localisation.

Options de style

Les styles de marqueur et de polyligne déterminent l'apparence objets de localisation suivis sur la carte. Vous pouvez utiliser des options de style personnalisé pour modifier le style par défaut afin qu'il corresponde au style de votre application Web.

Contrôler la visibilité des lieux suivis

Cette section décrit les règles de visibilité des objets "Lieu suivi" sur la carte pour les fournisseurs de localisation prédéfinis Fleet Engine. Personnalisé ou dérivé les fournisseurs de services de localisation peuvent modifier les règles de visibilité.

Véhicules

Un véhicule avec partage de course est visible à partir du moment où il est attribué à un trajet. jusqu'à l'heure de dépose. Si le trajet est annulé, le véhicule n'est plus visible.

Tous les autres repères de position

Tous les autres repères de position pour le point de départ, la destination et les points de cheminement sont toujours affiché sur la carte. Par exemple, un lieu de dépose des courses en VTC ou un lieu de livraison est toujours affiché sur la carte, quelle que soit de l'état du trajet ou de la livraison.

Premiers pas avec le SDK JavaScript

Avant d'utiliser le SDK JavaScript, assurez-vous d'être Fleet Engine et d'obtenir une clé API.

Pour suivre un trajet en partage de course, commencez par créer une revendication d'identifiant de trajet.

Créer une revendication d'identifiant de trajet

Pour suivre un trajet à l'aide du fournisseur de localisation de trajets, procédez comme suit : créer un jeton Web JSON (JWT) avec une revendication d'ID de trajet ;

Pour créer la charge utile JWT, ajoutez une revendication supplémentaire dans la section "Autorisation". à l'aide de la clé tripid et définissez sa valeur sur l'identifiant du trajet.

L'exemple suivant montre comment créer un jeton pour le suivi par ID de trajet:

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

Créer un outil de récupération de jetons d'authentification

Vous pouvez créer un outil de récupération des jetons d'authentification pour récupérer un jeton frappé avec les revendications appropriées sur vos serveurs via un service pour votre projet. Il est important de ne frapper que les jetons sur vos serveurs et de ne jamais partager vos certificats avec des clients. Sinon, vous risquez de compromettre la sécurité de votre système.

L'extracteur doit renvoyer une structure de données. avec deux champs inclus dans une promesse:

• Une chaîne token.
• Un nombre expiresInSeconds. Un jeton expire dans ce délai après la récupération.

Le SDK client JavaScript demande un jeton via le jeton d'authentification extracteur lorsque l'une des conditions suivantes est remplie:

• Il ne possède pas de jeton valide, par exemple lorsqu'il n'a pas appelé l'extracteur sur un nouveau chargement de page ou lorsque l'outil d'extraction ne renvoie pas de jeton.
• Le jeton récupéré précédemment a expiré.
• Le jeton récupéré précédemment a expiré moins d'une minute.

Sinon, le SDK utilise le jeton précédemment émis, mais toujours valide, et n'utilise pas sans appeler l'outil de récupération.

L'exemple suivant montre comment créer un outil de récupération de jetons d'authentification:

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

Lors de l'implémentation du point de terminaison côté serveur pour générer les jetons, conservez à l'esprit ce qui suit:

• Le point de terminaison doit renvoyer un délai d'expiration pour le jeton. dans l'exemple ci-dessus, il est indiqué sous la forme data.ExpiresInSeconds.
• L'outil de récupération de jetons d'authentification doit passer le délai d'expiration (en secondes, au moment de la récupération) à la bibliothèque, comme illustré dans l'exemple.
• SERVER_TOKEN_URL dépend de la mise en œuvre de votre fournisseur. Voici les URL de l'exemple de fournisseur:
  • https://SERVER_URL/token/driver/VEHICLEID
  • https://SERVER_URL/token/consumer/TRIPID

Charger une carte à partir d'un code HTML

L'exemple suivant montre comment charger le SDK JavaScript à partir d'une URL spécifiée. Le paramètre callback exécute la initMap après le chargement de l'API. L'attribut defer permet au navigateur le reste de la page pendant le chargement de l'API.

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

Après un trajet

Cette section explique comment utiliser le SDK JavaScript pour suivre un trajet en covoiturage ou en livraison. Veillez à Charger la bibliothèque à partir de la fonction de rappel spécifiée dans la balise de script avant d'exécuter votre code.

Instancier un fournisseur de localisation de trajet

Le SDK JavaScript prédéfinit un fournisseur de localisation pour l'API de partage de course Fleet Engine. Utilisez l'ID de votre projet et une référence à votre fabrique de jetons pour l'instancier.

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

Initialiser la vue plan

Après avoir chargé le SDK JavaScript, initialisez la vue plan et de l'ajouter à la page HTML. Votre page doit contenir Un élément <div> contenant la vue plan Élément <div> est nommée map_canvas dans l'exemple ci-dessous.

Pour éviter les conditions de concurrence, définissez l'ID de trajet pour le fournisseur de localisation dans le rappel qui est appelé après l'initialisation de la carte.

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

Écouter les événements de modification

Vous pouvez récupérer des méta-informations sur un trajet à partir de l'objet de tâche à l'aide du fournisseur de services de localisation. Les méta-informations comprennent l'heure d'arrivée prévue et la distance restante avant la prise en charge ou le dépose. Modifications apportées aux méta-informations déclencher un événement update. L'exemple suivant montre comment écouter ces événements de modification.

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

Gérer les erreurs

Erreurs générées de manière asynchrone en demandant un déclencheur d'informations sur le trajet les événements d'erreur. L'exemple suivant montre comment écouter ces événements afin de gérer les erreurs.

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

Remarque:Veillez à encapsuler les appels de bibliothèque dans des blocs try...catch. pour gérer les erreurs imprévues.

Arrêter le suivi

Pour empêcher le fournisseur de géolocalisation de suivre le trajet, supprimez l'identifiant du trajet de le fournisseur de services de localisation.

locationProvider.tripId = '';

locationProvider.tripId = '';

Supprimer le fournisseur de localisation de la vue plan

L'exemple suivant montre comment supprimer un fournisseur de localisation de la vue plan.

mapView.removeLocationProvider(locationProvider);

mapView.removeLocationProvider(locationProvider);

Personnaliser l'apparence de la carte de base

Pour personnaliser l'apparence du composant "Cartes" : appliquer un style à votre carte à l'aide d'outils cloud ou en définissant des options directement dans le code.

Utiliser les styles de cartes basés dans le cloud

Styles de cartes basés dans le cloud vous permet de créer et de modifier des styles de carte pour toutes vos applications utilisant Google Maps depuis la console Google Cloud, sans avoir à modifier votre code. Les styles de carte sont enregistrés en tant qu'ID de carte dans votre projet Cloud. À un style à la carte de votre SDK JavaScript, spécifiez mapId et tout autre mapOptions lorsque vous créez le JourneySharingMapView. Impossible de modifier le champ mapId ou ajoutés après l'instanciation de JourneySharingMapView. Les éléments suivants : exemple montre comment activer un style de carte créé précédemment avec une ID de carte.

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

Utiliser des styles de cartes basés sur du code

Vous pouvez aussi personnaliser le style de carte mapOptions lorsque vous créer le 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" }
        ]
      }
    ]
  }
});

Utiliser la personnalisation des repères

Le SDK JavaScript vous permet de personnaliser l'apparence des repères ajoutés à sur la carte. Pour ce faire, vous devez spécifier des personnalisations de repère, que le Le SDK JavaScript s'applique ensuite avant d'ajouter des repères à la carte et à chaque mise à jour du repère.

La personnalisation la plus simple consiste à spécifier MarkerOptions qui sera appliqué à tous les repères du même type. Les changements spécifiés dans l'objet sont appliqués après la création de chaque repère, en remplaçant les options par défaut.

Une option plus avancée consiste à spécifier une fonction de personnalisation. Personnalisation permettent de styliser les repères en fonction des données et d'ajouter avec les repères, comme la gestion des clics. Plus précisément, "Trip and Order" (Trajet et commande) La progression transmet à la fonction de personnalisation des données sur le type d'objet Le repère représente le véhicule, le point de départ, le point de cheminement ou la destination. Cela permet ensuite Le style du repère change en fonction de l'état actuel de l'élément de repère elle-même ; (par exemple, le nombre de points de cheminement restants avant la fin du véhicule) le trajet. Vous pouvez même effectuer une jointure avec des données provenant de sources externes à Fleet Engine Appliquez un style au repère en fonction de ces informations.

Le SDK JavaScript fournit les paramètres de personnalisation suivants dans FleetEngineTripLocationProviderOptions:

• vehicleMarkerCustomization
• originMarkerCustomization
• waypointMarkerCustomization
• destinationMarkerCustomization

Modifier le style des repères à l'aide de MarkerOptions

L'exemple suivant montre comment configurer le style d'un repère de véhicule avec un objet MarkerOptions. Suivez ce modèle pour personnaliser le style le repère en utilisant l'une des personnalisations listées précédemment.

vehicleMarkerCustomization = {
  cursor: 'grab'
};

vehicleMarkerCustomization = {
  cursor: 'grab'
};

Modifier le style des repères à l'aide de fonctions de personnalisation

L'exemple suivant montre comment configurer le style d'un repère de véhicule. Suivre ce motif pour personnaliser le style de n'importe quel repère en utilisant l'un des repères les paramètres de personnalisation listés précédemment.

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

Ajouter la gestion des clics aux repères

L'exemple suivant montre comment ajouter la gestion des clics à un repère de véhicule. Suivez cette procédure pour ajouter la gestion des clics à n'importe quel repère utilisant l'un de ces repères. les paramètres de personnalisation listés précédemment.

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

Utiliser des personnalisations de polylignes

Le SDK JavaScript vous permet également de personnaliser l'apparence du trajet sur la carte. La bibliothèque crée google.maps.Polyline pour chaque paire de coordonnées dans les données actives ou restantes path. Vous pouvez styliser les objets Polyline en spécifiant des personnalisations de polyligne. La applique ensuite ces personnalisations dans deux situations: avant d'ajouter la classe objets à la carte, et quand les données utilisées pour ces objets ont changé.

Comme pour la personnalisation des repères, vous pouvez spécifier un ensemble PolylineOptions à appliquer à tous les objets Polyline correspondants lorsqu'ils créées ou mises à jour.

De même, vous pouvez spécifier une fonction de personnalisation. Fonctions de personnalisation permettent d'appliquer un style individuel aux objets en fonction des données envoyées par Fleet Engine. La fonction peut modifier le style de chaque objet en fonction de l'état actuel le véhicule ; (par exemple, en attribuant une nuance plus profonde à l'objet Polyline) ; ce qui le rend plus épais lorsque le véhicule roule plus lentement. Vous pouvez même vous joindre à provenant de sources extérieures à Fleet Engine et appliquez un style à l'objet Polyline en fonction des informations.

Vous pouvez spécifier les personnalisations à l'aide des paramètres fournis dans FleetEngineTripLocationProviderOptions Vous pouvez définir des personnalisations pour différents états de chemin dans les (j'ai déjà voyagé, en voyage actif ou je n'ai pas encore voyagé). La sont les suivants:

• takenPolylineCustomization, pour un chemin déjà emprunté ;
• activePolylineCustomization, pour un parcours actif ;
• remainingPolylineCustomization, sur un chemin qui n'a pas encore été emprunté.

Modifier le style des objets Polyline à l'aide de PolylineOptions

L'exemple suivant montre comment configurer le style d'un objet Polyline par PolylineOptions Suivez ce schéma pour personnaliser le style de n'importe quel objet Polyline à l'aide des des personnalisations de polylignes répertoriées précédemment.

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

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

Modifier le style des objets Polyline à l'aide de fonctions de personnalisation

L'exemple suivant montre comment configurer un objet Polyline actif du style. Suivez ce schéma pour personnaliser le style de n'importe quel objet Polyline. en utilisant l'un des paramètres de personnalisation de polyligne listés précédemment.

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

Contrôler la visibilité des objets Polyline

Par défaut, tous les objets Polyline sont visibles. Créer un objet Polyline invisible, définissez visible :

remainingPolylineCustomization = {visible: false};

remainingPolylineCustomization = {visible: false};

Afficher des objets Polyline tenant compte du trafic

Fleet Engine renvoie des données sur la vitesse du trafic pour les chemins actifs et restants pour le véhicule suivi. Vous pouvez utiliser ces informations pour appliquer un style à Polyline en fonction de la vitesse de leur trafic:

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

Afficher un InfoWindow pour un véhicule ou un repère de position

Vous pouvez utiliser un InfoWindow pour afficher des informations supplémentaires sur un véhicule ou un repère de position.

L'exemple suivant montre comment créer une InfoWindow et l'associer à un repère de véhicule:

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

Désactiver l'ajustement automatique

Vous pouvez empêcher la carte d'ajuster automatiquement la fenêtre d'affichage au véhicule et prévu en désactivant l'ajustement automatique. L'exemple suivant montre comment désactiver l'ajustement automatique lorsque vous configurez le trajet et l'ordre carte de progression.

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

Vous pouvez utiliser le SDK JavaScript pour remplacer Une carte existante contenant des repères ou d'autres éléments de personnalisation sans perdre ces personnalisations.

Par exemple, supposons que l'une de vos pages Web comporte un google.maps.Map standard entité sur laquelle un repère est affiché:

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

Pour ajouter le SDK JavaScript:

1. Ajoutez du code pour la fabrique de jetons d'authentification.
2. Initialisez un fournisseur de localisation dans la fonction initMap().
3. Initialisez la vue de carte dans la fonction initMap(). La vue contient la carte.
4. Déplacez votre personnalisation dans la fonction de rappel pour l'initialisation de la vue de carte.
5. Ajoutez la bibliothèque d'emplacements au chargeur d'API.

L'exemple suivant montre les modifications à apporter:

<!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 vous effectuez un trajet avec spécifié près d'Uluru, il sera affiché sur la carte.