Aplica diseño a un mapa

Selecciona la plataforma: Android iOS JavaScript

En este documento, se explica cómo personalizar el aspecto de un mapa y controlar la visibilidad de los datos y las opciones de la ventana gráfica. Puedes hacerlo de las siguientes maneras:

  • Cómo usar el diseño de mapas basado en Cloud
  • Cómo establecer opciones de diseño del mapa directamente en tu propio código

Aplica el diseño de mapas basado en Cloud al mapa

Para aplicar un diseño de mapa a tu mapa de uso compartido del viaje del consumidor de JavaScript, especifica un mapId y cualquier otro mapOptions cuando crees el JourneySharingMapView.

En los siguientes ejemplos, se muestra cómo aplicar un diseño de mapa 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'
  }
  // 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.
});

Cómo aplicar estilos a los mapas directamente en tu propio código

También puedes personalizar el diseño del mapa configurando opciones del mapa cuando creas el JourneySharingMapView. En los siguientes ejemplos, se muestra cómo aplicar diseño a un mapa con opciones de mapa. Para obtener más información sobre las opciones de mapa que puedes configurar, consulta mapOptions en la referencia de la API de 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" }
        ]
      }
    ]
  }
});

Cómo mostrar información en el mapa

Muestra información adicional sobre un marcador de vehículo o de ubicación con un InfoWindow. Para obtener más información, consulta InfoWindow.

En el siguiente ejemplo, se muestra cómo crear un objeto 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();

Inhabilita el ajuste automático

Puedes inhabilitar el ajuste automático para evitar que el mapa ajuste automáticamente el viewport al vehículo y la ruta prevista. En el siguiente ejemplo, se muestra cómo inhabilitar el ajuste automático cuando configuras la vista del mapa de uso compartido del viaje.

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

¿Qué sigue?

Personaliza los marcadores