This document covers how to customize the look and feel of routes for tracked
vehicles on a map. Routes are drawn on a map in polylines. For each pair of
coordinates in a vehicle's active or remaining [path](https://developers.google.com/maps/documentation/javascript/reference/journey-sharing-fleet-engine-entities.md.txt#VehicleJourneySegment.path) the library creates a
[`google.maps.Polyline`](https://developers.google.com/maps/documentation/javascript/reference/polygon.md.txt#Polyline) object.
You can style the `Polyline` objects by specifying polyline customizations that
the library then applies in two situations:

- Before adding the objects to the map
- When the data used for the objects have changed

## Style polylines

Similar to how you can customize markers, you can style route polylines in
different ways:

1. **Style route polylines by type** : Use
   [`PolylineOptions`](https://developers.google.com/maps/documentation/javascript/reference/polygon.md.txt#PolylineOptions)
   to apply to all of the matched `Polyline` objects when they are
   created or updated. For an example, see [Style polylines by type](https://developers.google.com/maps/documentation/mobility/operations/fleet-tracking/customize-polylines.md.txt#type).

2. **Style route polylines based on data**: Specify a customization function
   based on data from fleet tracking, or from outside sources:

   - **Data from fleet tracking** : Fleet tracking passes polyline data to the
     customization function, including data on the current vehicle
     state. You can style polylines based on this data, including coloring
     the `Polyline` object a deeper shade, or making it thicker when the
     vehicle is moving slower.

   - **Outside sources** : You can combine fleet tracking data with data from
     sources outside Fleet Engine and style the `Polyline` object based on that
     information.

   For an example, see [Style polylines based on data](https://developers.google.com/maps/documentation/mobility/operations/fleet-tracking/customize-polylines.md.txt#data).
3. **Control the visibility of route polylines** : You can hide or show
   polylines using the `visible` property. For details, see
   [Control the visibility of polylines](https://developers.google.com/maps/documentation/mobility/operations/fleet-tracking/customize-polylines.md.txt#viz) in this guide.

4. **Display additional information for a vehicle or location marker** :
   You can show additional information using the `infowindow` property. For
   details, see
   [Display additional information for a vehicle or location marker](https://developers.google.com/maps/documentation/mobility/operations/fleet-tracking/customize-polylines.md.txt#infowindow) in
   this guide.

## Polyline customization options

The following customizations options are available in both
[`FleetEngineVehicleLocationProviderOptions`](https://developers.google.com/maps/documentation/javascript/reference/journey-sharing-fleet-tracking-odrd.md.txt#FleetEngineVehicleLocationProviderOptions)
and
[`FleetEngineDeliveryVehicleLocationProviderOptions`](https://developers.google.com/maps/documentation/javascript/reference/journey-sharing-fleet-tracking.md.txt#FleetEngineDeliveryVehicleLocationProviderOptions).
You can set customizations for different path states in the vehicle's
journey:

- **Already traveled path** : Use `takenPolylineCustomization` -
  [On-demand trips](https://developers.google.com/maps/documentation/javascript/reference/journey-sharing-fleet-tracking-odrd.md.txt#FleetEngineVehicleLocationProviderOptions.takenPolylineCustomization), [Scheduled tasks](https://developers.google.com/maps/documentation/javascript/reference/journey-sharing-fleet-tracking.md.txt#FleetEngineDeliveryVehicleLocationProviderOptions.takenPolylineCustomization) reference.

- **Actively traveling path** : Use `activePolylineCustomization` -
  [On-demand trips](https://developers.google.com/maps/documentation/javascript/reference/journey-sharing-fleet-tracking-odrd.md.txt#FleetEngineVehicleLocationProviderOptions.activePolylineCustomization), [Scheduled tasks](https://developers.google.com/maps/documentation/javascript/reference/journey-sharing-fleet-tracking.md.txt#FleetEngineDeliveryVehicleLocationProviderOptions.activePolylineCustomization) reference.

- **Not yet traveled path** : Use `remainingPolylineCustomization` -
  [On-demand trips](https://developers.google.com/maps/documentation/javascript/reference/journey-sharing-fleet-tracking-odrd.md.txt#FleetEngineVehicleLocationProviderOptions.remainingPolylineCustomization), [Scheduled tasks](https://developers.google.com/maps/documentation/javascript/reference/journey-sharing-fleet-tracking.md.txt#FleetEngineDeliveryVehicleLocationProviderOptions.remainingPolylineCustomization) reference.

## Style route polylines by type

To style route polylines by type, change the styling of `Polyline` objects
using `PolylineOptions`.

The following example shows how to configure the styling for a `Polyline` object
with [`PolylineOptions`](https://developers.google.com/maps/documentation/javascript/reference/polygon.md.txt#PolylineOptions). Follow this pattern to customize the styling of any
`Polyline` object using any of the route polyline customizations listed in
[Polyline customization options](https://developers.google.com/maps/documentation/mobility/operations/fleet-tracking/customize-polylines.md.txt#options) in this guide.

### Example for either on-demand trips or scheduled tasks

<br />

### JavaScript

<br />

```javascript
activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};
```

<br />

### TypeScript

<br />

```typescript
activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};
```

<br />

<br />

## Style route polylines using data

To style route polylines using data, change the styling of `Polyline` objects
using customization functions.

The following example shows how to configure the styling for an active route
using a customization function. Follow this pattern to customize the styling of
any `Polyline` object using any of the polyline customization parameters listed
in [Polyline customization options](https://developers.google.com/maps/documentation/mobility/operations/fleet-tracking/customize-polylines.md.txt#options) in this guide.

### On-demand trips example

<br />

### JavaScript

<br />

```javascript
// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.vehicle.waypoints[0].distanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };
```

<br />

### TypeScript

<br />

```typescript
// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params: VehiclePolylineCustomizationFunctionParams) => {
    const distance = params.vehicle.waypoints[0].distanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };
```

<br />

<br />

### Scheduled tasks example

<br />

### JavaScript

<br />

```javascript
// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.deliveryVehicle.remainingDistanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };
```

<br />

### TypeScript

<br />

```typescript
// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params: DeliveryVehiclePolylineCustomizationFunctionParams) => {
    const distance = params.deliveryVehicle.remainingDistanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };
```

<br />

<br />

### Traffic-aware styling example (on-demand trips only)

Fleet Engine returns traffic speed data for the active and remaining paths for
the followed vehicle. You can use this information to style `Polyline`
objects according to their traffic speeds:

<br />

### JavaScript

<br />

```javascript
// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
  FleetEngineVehicleLocationProvider.
      TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;

// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
  (params) => {
    FleetEngineVehicleLocationProvider.
        TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
    for (const polylineObject of params.polylines) {
      if (polylineObject.get('strokeColor') === '#05f') {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };
```

<br />

### TypeScript

<br />

```typescript
// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
  FleetEngineVehicleLocationProvider.
      TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;

// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
  (params: VehiclePolylineCustomizationFunctionParams) => {
    FleetEngineVehicleLocationProvider.
        TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
    for (const polylineObject of params.polylines) {
      if (polylineObject.get('strokeColor') === '#05f') {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };
```

<br />

<br />

## Control the visibility of polylines

By default, all `Polyline` objects are visible. To make a `Polyline` object
invisible, set its [`visible`](https://developers.google.com/maps/documentation/javascript/reference/polygon.md.txt#PolylineOptions.visible) property to `false`.

### Example for either on-demand trips or scheduled tasks

<br />

### JavaScript

<br />

```javascript
remainingPolylineCustomization = {visible: false};
```

<br />

### TypeScript

<br />

```typescript
remainingPolylineCustomization = {visible: false};
```

<br />

<br />

## Display an information window for a vehicle or location marker

You can use an [`InfoWindow`](https://developers.google.com/maps/documentation/javascript/infowindows.md.txt) to display additional information about a
vehicle or location marker.

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

### On-demand trips example

<br />

### JavaScript

<br />

```javascript
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

// (Assumes a vehicle location provider.)
locationProvider.addListener('update', e => {
  if (e.vehicle) {
    const distance =
          e.vehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next drop-off point.`);

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

<br />

### TypeScript

<br />

```typescript
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

// (Assumes a vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineVehicleLocationProviderUpdateEvent) => {
  if (e.vehicle) {
    const distance =
          e.vehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next drop-off.`);
    // 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();
```

<br />

<br />

### Scheduled tasks example

<br />

### JavaScript

<br />

```javascript
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', e => {
  if (e.deliveryVehicle) {
    const distance =
           e.deliveryVehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next task.`);

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

<br />

### TypeScript

<br />

```typescript
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProviderUpdateEvent) => {
  if (e.deliveryVehicle) {
    const distance =
           e.deliveryVehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next task.`);

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

<br />

<br />

## What's next

- [Style a map](https://developers.google.com/maps/documentation/mobility/operations/fleet-tracking/style.md.txt)
- [Customize markers](https://developers.google.com/maps/documentation/mobility/operations/fleet-tracking/customize-markers.md.txt)