Select platform: [Android](https://developers.google.com/maps/documentation/mobility/journey-sharing/on-demand/android/style.md.txt "View this page for the Android platform docs.") [iOS](https://developers.google.com/maps/documentation/mobility/journey-sharing/on-demand/ios/style.md.txt "View this page for the iOS platform docs.") [JavaScript](https://developers.google.com/maps/documentation/mobility/journey-sharing/on-demand/javascript/style.md.txt "View this page for the JavaScript platform docs.")

<br />

This document covers how to customize the look and feel of a map and control
data visibility and viewport options. You can do this in the following ways:

- Use cloud-based map styling
- Set map style options directly in your own code

## Style the map with cloud-based maps styling

To apply a map style to your JavaScript consumer trip sharing map, specify a
[`mapId`](https://developers.google.com/maps/documentation/javascript/reference/map.md.txt#MapOptions.mapId) and
any other
[`mapOptions`](https://developers.google.com/maps/documentation/javascript/reference/map.md.txt#MapOptions)
when you create the `JourneySharingMapView`.

> [!NOTE]
> **Note:** You cannot change or add a `mapId` after the `JourneySharingMapView` has been instantiated.

The following examples show how to apply a map style with a map ID.

<br />

### JavaScript

<br />

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

<br />

### TypeScript

<br />

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

<br />

<br />

## Style maps directly in your own code

You can also customize map styling by setting map options when you create the
`JourneySharingMapView`. The following examples show how to style a map using
map options. For more information on what map options you can set, see
[`mapOptions`](https://developers.google.com/maps/documentation/javascript/reference/map.md.txt#MapOptions)
in the Google Maps JavaScript API reference.

<br />

### JavaScript

<br />

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

<br />

### TypeScript

<br />

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

<br />

<br />

## Display information on the map

Display additional information about a vehicle or location marker using an
`InfoWindow`. For more information, see
[`InfoWindow`](https://developers.google.com/maps/documentation/javascript/infowindows.md.txt).

The following example shows how to create an `InfoWindow` and attach it
to a vehicle marker:

### JavaScript

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

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

## Disable automatic fitting

You can stop the map from automatically fitting the viewport to the vehicle
and anticipated route by disabling automatic fitting. The following example
shows how to disable automatic fitting when you configure the journey sharing
map view.

### JavaScript

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

### TypeScript

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

## What's next

[Customize markers](https://developers.google.com/maps/documentation/mobility/journey-sharing/on-demand/javascript/customize-markers.md.txt)