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

## Control the visibility of task data to the SDK

You can control the visibility of certain task objects on the map using
visibility rules.

> [!NOTE]
> **Note:** **Location markers are always visible on the map.** For example, a shipment delivery location is always shown on the map, regardless of the state of the delivery. You can, however, customize the look of these markers. See [Customize markers](https://developers.google.com/maps/documentation/mobility/journey-sharing/scheduled/shipment-tracking/customize-markers.md.txt).

### Task data default visibility

By default, data for tasks assigned to a vehicle are **visible when the
vehicle is within 5 stops of the task**. The visibility ends when the task is
completed or canceled.

This table shows the default visibility for each type of task. You can
customize the visibility for many tasks, but not all. For more details on task
types, see [Task types](https://developers.google.com/maps/documentation/mobility/fleet-engine/essentials/tasks-intro.md.txt) in the **Scheduled tasks** guide.

| Type of task | Default visibility | Customizable? | Description |
|---|---|---|---|
| Unavailability tasks | Not visible | No | Used for driver breaks and refueling. If a route to a delivery task also contains another vehicle stop, that stop is not shown if it contains only unavailability tasks. Estimated arrival time and estimated task completion time are still shown for the delivery task itself. |
| Open vehicle tasks | Visible | Yes | Visibility ends when the task is completed or canceled. You can customize the visibility of open vehicle tasks. See [Customize the visibility of open vehicle tasks](https://developers.google.com/maps/documentation/mobility/journey-sharing/scheduled/shipment-tracking/style-map.md.txt#open-viz). |
| Closed vehicle tasks | Not visible | No | You cannot customize the visibility of closed vehicle tasks. |

### Customize the visibility of open vehicle tasks

The [`TaskTrackingInfo`](https://developers.google.com/maps/documentation/javascript/reference/journey-sharing-fleet-engine-entities.md.txt#TaskTrackingInfo) interface provides a number of task data elements
that can be made visible with the Consumer SDK.

| Customizable task data elements ||
|---|---|
| Route polylines Estimated time to arrival Estimated task completion time | Remaining driving distance to the task Remaining stop count Vehicle location |

#### Visibility options per task

You can customize the visibility configuration on a per-task basis by setting
the [`TaskTrackingViewConfig`](https://developers.google.com/maps/documentation/mobility/fleet-engine/reference/tasks/rpc/maps.fleetengine.delivery.v1.md.txt#tasktrackingviewconfig) when creating or updating a task within
Fleet Engine. Use the following visibility options to create criteria to
determine visibility of a task element:

| Visibility options |||
|---|---|---|
| Remaining stop count Duration until estimated arrival time Remaining driving distance | Always visible Never visible |

> [!NOTE]
> **Note:** Any given data element may be associated with only one visibility option. It is not possible to combine criteria using OR or AND.

To illustrate, suppose an example customization adjusts visibility for three
data elements using the criteria shown in the following table. All other
elements follow the default visibility rules.

| Data element to adjust | Visibility | Criterion |
|---|---|---|
| Route polyline | Show | The vehicle is within 3 stops. |
| ETA | Show | The remaining driving distance is shorter than 5000 meters. |
| Remaining stop count | Never show | The vehicle is within 3 stops. |

The following example shows this configuration:

```javascript
"taskTrackingViewConfig": {
  "routePolylinePointsVisibility": {
    "remainingStopCountThreshold": 3
  },
  "estimatedArrivalTimeVisibility": {
    "remainingDrivingDistanceMetersThreshold": 5000
  },
  "remainingStopCountVisibility": {
    "never": true
  }
}
```

> [!NOTE]
> **Note:** You can also customize the default visibility options for your project by [contacting the support team](https://console.cloud.google.com/google/maps-apis/support).

#### Route polylines and vehicle location visibility rules

Route polylines cannot be visible unless the vehicle location is also
visible; otherwise the vehicle location can be inferred by the end of a
polyline.

> [!NOTE]
> **Key point:** Route polyline visibility rules must be **equally restrictive or more restrictive** than visibility rules for vehicle location.

These guidelines help you provide a valid combination for route
polyline and vehicle location visibility options.

| Same visibility options | Visibility criterion | Guidance |
| Same visibility options |
| Same visibility options |
| Same visibility options |
|---|---|---|
| Route polylines options set to always visible. | Set vehicle location to always visible. |
| Vehicle location set to never visible. | Set route polylines to never visible. |
| Visibility option is any of: - remaining stop count - duration until ETA - remaining driving distance | Set route polyline options to a value less than or equal to the value set for the vehicle location. For example: ``` "taskTrackingViewConfig": { "routePolylinePointsVisibility": { "remainingStopCountThreshold": 3 }, "vehicleLocationVisibility": { "remainingStopCountThreshold": 5 }, } ``` |
| Vehicle location is visible | This happens only when **both** vehicle location and polyline visibility options are satisfied. For example: ``` "taskTrackingViewConfig": { "routePolylinePointsVisibility": { "remainingStopCountThreshold": 3 }, "vehicleLocationVisibility": { "remainingDrivingDistanceMetersThreshold": 3000 }, } ``` In this example, the vehicle location is only visible if the remaining stop count is at least 3 **AND** the remaining driving distance is at least 3000 meters. |

## 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/scheduled/shipment-tracking/customize-markers.md.txt)
- [Customize polylines](https://developers.google.com/maps/documentation/mobility/journey-sharing/scheduled/shipment-tracking/customize-polylines.md.txt)