Appliquer un style à une carte

Sélectionnez une plate-forme : Android iOS JavaScript

Ce document explique comment personnaliser l'apparence d'une carte et contrôler la visibilité des données et les options de fenêtre d'affichage. Pour ce faire, utilisez l'une des méthodes suivantes :

  • Utiliser les styles de cartes basés dans le cloud
  • Définir les options de style de carte directement dans votre propre code

Styliser la carte avec les styles de cartes basés dans le cloud

Pour appliquer un style de carte à votre carte JavaScript de partage de trajets pour les consommateurs, spécifiez un mapId et tout autre mapOptions lorsque vous créez le JourneySharingMapView.

Les exemples suivants montrent comment appliquer un style de carte avec un ID de carte.

JavaScript

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

TypeScript

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

Appliquer un style aux cartes directement dans votre propre code

Vous pouvez également personnaliser le style de la carte en définissant des options de carte lorsque vous créez le JourneySharingMapView. Les exemples suivants montrent comment styliser une carte à l'aide des options de carte. Pour en savoir plus sur les options de carte que vous pouvez définir, consultez mapOptions dans la documentation de référence de l'API Google Maps JavaScript.

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

Afficher des informations sur la carte

Affichez des informations supplémentaires sur un repère de véhicule ou de lieu à l'aide d'un InfoWindow. Pour en savoir plus, consultez InfoWindow.

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

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

Désactiver l'ajustement automatique

Vous pouvez empêcher la carte d'adapter automatiquement la fenêtre d'affichage au véhicule et à l'itinéraire prévu en désactivant l'adaptation automatique. L'exemple suivant montre comment désactiver l'ajustement automatique lorsque vous configurez la vue cartographique du partage de trajet.

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

Étape suivante

Personnaliser les repères