Definizione di una mappa

Seleziona la piattaforma: Android iOS JavaScript

Questo documento spiega come personalizzare l'aspetto di una mappa e controllare la visibilità dei dati e le opzioni della finestra. Puoi farlo nei seguenti modi:

  • Utilizzare la personalizzazione delle mappe basata su cloud
  • Impostare le opzioni di stile di mappa direttamente nel codice

Personalizzare la mappa con la personalizzazione delle mappe basata su cloud

Per applicare uno stile di mappa alla mappa di condivisione del viaggio del consumatore JavaScript, specifica un mapId e qualsiasi altro mapOptions quando crei JourneySharingMapView.

Gli esempi seguenti mostrano come applicare uno stile di mappa con un ID mappa.

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

Personalizzare le mappe direttamente nel codice

Puoi anche personalizzare lo stile della mappa impostando le opzioni della mappa quando crei JourneySharingMapView. Gli esempi seguenti mostrano come personalizzare una mappa utilizzando le opzioni della mappa. Per ulteriori informazioni sulle opzioni della mappa che puoi impostare, consulta mapOptions nel riferimento dell'API Maps JavaScript di Google.

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

Visualizzare le informazioni sulla mappa

Visualizza ulteriori informazioni su un marcatore di veicolo o indicatore di posizione utilizzando un InfoWindow. Per ulteriori informazioni, consulta InfoWindow.

L'esempio seguente mostra come creare un InfoWindow e collegarlo a un indicatore di veicolo:

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

Disattivare l'adattamento automatico

Puoi impedire alla mappa di adattare automaticamente la finestra al veicolo e al percorso previsto disattivando l'adattamento automatico. L'esempio seguente mostra come disabilitare l'adattamento automatico quando configuri la visualizzazione della mappa di condivisione del viaggio.

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

Passaggi successivi

Personalizzare i marcatori