With the JavaScript fleet tracking library, you can customize the look and feel
of markers added to the map. You do this by specifying marker customizations,
which the fleet tracking library then applies before adding markers to the map
and with every marker update. You can customize the look and feel of markers in
these ways:

1. **Style markers based on type** : Specify a
   [`MarkerOptions`](https://developers.google.com/maps/documentation/javascript/reference/marker.md.txt#MarkerOptions)
   object to style markers of the same type. The changes you specify are then
   applied after each marker is created, overwriting any default options. For
   examples, see [Style markers based on type](https://developers.google.com/maps/documentation/mobility/operations/fleet-tracking/customize-markers.md.txt#style-by-type) in
   this guide.

2. **Style markers based on data**: Specify a customization function based on
   data, as well as adding interactivity to markers, such as click handling.
   You can style based on data from fleet tracking, or from outside sources:

   - **Data from fleet tracking**: Fleet Tracking passes data to the
     customization function including the type of object the marker
     represents: vehicle, stop, or task. Marker styling then changes
     based on the current state of the marker element. For example, the number
     of remaining stops or type of task.

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

   For examples, see [Style markers based on data](https://developers.google.com/maps/documentation/mobility/operations/fleet-tracking/customize-markers.md.txt#vehicle-markers).
3. **Add click handling to markers** : For examples, see
   [Add click handling](https://developers.google.com/maps/documentation/mobility/operations/fleet-tracking/customize-markers.md.txt#click).

4. **Filter which markers are visible**: Filter which markers appear
   with the filtering capabilities available in the JavaScript location
   provider. For example:

   - [`FleetEngineDeliveryFleetLocationProvider.deliveryVehicleFilter`](https://developers.google.com/maps/documentation/javascript/reference/journey-sharing-fleet-tracking.md.txt#FleetEngineDeliveryFleetLocationProviderOptions.deliveryVehicleFilter)
   - [`FleetEngineFleetLocationProvider.vehicleFilter`](https://developers.google.com/maps/documentation/javascript/reference/journey-sharing-fleet-tracking-odrd.md.txt#FleetEngineFleetLocationProvider.vehicleFilter)

   > [!NOTE]
   > **Note:** While you can also filter marker visibility using customization functions, it may impact performance. If you must do this, call [`setVisible(false)`](https://developers.google.com/maps/documentation/javascript/reference/marker.md.txt#Marker.setVisible) on the marker. For examples, see [Filter which markers are visible](https://developers.google.com/maps/documentation/mobility/operations/fleet-tracking/customize-markers.md.txt#viz).

5. **Use marker customization to track a scheduled tasks delivery vehicle** :
   You can customize markers to track vehicles. For more information, see [Use
   marker customization to track a delivery vehicle](https://developers.google.com/maps/documentation/mobility/operations/fleet-tracking/view-fleet#track-with-marker).

## Marker customization options

The fleet tracking library provides the following customization parameters:

### On-demand trips customization parameters

- [`FleetEngineVehicleLocationProviderOptions`](https://developers.google.com/maps/documentation/javascript/reference/journey-sharing-fleet-tracking-odrd.md.txt#FleetEngineVehicleLocationProviderOptions)
  - [`vehicleMarkerCustomization`](https://developers.google.com/maps/documentation/javascript/reference/journey-sharing-fleet-tracking-odrd.md.txt#FleetEngineVehicleLocationProviderOptions.vehicleMarkerCustomization)
  - [`originMarkerCustomization`](https://developers.google.com/maps/documentation/javascript/reference/journey-sharing-fleet-tracking-odrd.md.txt#FleetEngineVehicleLocationProviderOptions.originMarkerCustomization)
  - [`destinationMarkerCustomization`](https://developers.google.com/maps/documentation/javascript/reference/journey-sharing-fleet-tracking-odrd.md.txt#FleetEngineVehicleLocationProviderOptions.destinationMarkerCustomization)
  - [`intermediateDestinationMarkerCustomization`](https://developers.google.com/maps/documentation/javascript/reference/journey-sharing-fleet-tracking-odrd.md.txt#FleetEngineVehicleLocationProviderOptions.intermediateDestinationMarkerCustomization)
- [`FleetEngineFleetLocationProviderOptions`](https://developers.google.com/maps/documentation/javascript/reference/journey-sharing-fleet-tracking-odrd.md.txt#FleetEngineFleetLocationProviderOptions)
  - [`vehicleMarkerCustomization`](https://developers.google.com/maps/documentation/javascript/reference/journey-sharing-fleet-tracking-odrd.md.txt#FleetEngineFleetLocationProviderOptions.vehicleMarkerCustomization)

### Scheduled tasks customization parameters

- [`FleetEngineDeliveryVehicleLocationProviderOptions`](https://developers.google.com/maps/documentation/javascript/reference/journey-sharing-fleet-tracking.md.txt#FleetEngineDeliveryVehicleLocationProviderOptions)
  - [`deliveryVehicleMarkerCustomization`](https://developers.google.com/maps/documentation/javascript/reference/journey-sharing-fleet-tracking.md.txt#FleetEngineDeliveryVehicleLocationProviderOptions.deliveryVehicleMarkerCustomization)
  - [`plannedStopMarkerCustomization`](https://developers.google.com/maps/documentation/javascript/reference/journey-sharing-fleet-tracking.md.txt#FleetEngineDeliveryVehicleLocationProviderOptions.plannedStopMarkerCustomization)
  - [`taskMarkerCustomization`](https://developers.google.com/maps/documentation/javascript/reference/journey-sharing-fleet-tracking.md.txt#FleetEngineDeliveryVehicleLocationProviderOptions.taskMarkerCustomization)
  - [`taskOutcomeMarkerCustomization`](https://developers.google.com/maps/documentation/javascript/reference/journey-sharing-fleet-tracking.md.txt#FleetEngineDeliveryVehicleLocationProviderOptions.taskOutcomeMarkerCustomization)
- [`FleetEngineDeliveryFleetLocationProviderOptions`](https://developers.google.com/maps/documentation/javascript/reference/journey-sharing-fleet-tracking.md.txt#FleetEngineDeliveryFleetLocationProviderOptions)
  - [`deliveryVehicleMarkerCustomization`](https://developers.google.com/maps/documentation/javascript/reference/journey-sharing-fleet-tracking.md.txt#FleetEngineDeliveryFleetLocationProviderOptions.deliveryVehicleMarkerCustomization)

## Style markers based on type

The following example shows how to configure a vehicle marker's styling with
a `MarkerOptions` object. Follow this pattern to customize the styling of any
marker using any of the options listed in
[Marker customization options](https://developers.google.com/maps/documentation/mobility/operations/fleet-tracking/customize-markers.md.txt#cust-options).

### On-demand trips example

<br />

### JavaScript

<br />

```javascript
vehicleMarkerCustomization = {
  cursor: 'grab'
};
```

<br />

### TypeScript

<br />

```typescript
vehicleMarkerCustomization = {
  cursor: 'grab'
};
```

<br />

<br />

### Scheduled tasks example

<br />

### JavaScript

<br />

```javascript
deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};
```

<br />

### TypeScript

<br />

```typescript
deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};
```

<br />

<br />

## Style markers based on data

The following example shows how to configure a vehicle marker's styling using
customization functions. Follow this pattern to customize the styling of any
marker based on data using any of the options listed in
[Marker customization options](https://developers.google.com/maps/documentation/mobility/operations/fleet-tracking/customize-markers.md.txt#cust-options) listed above.

### On-demand trips example

<br />

### JavaScript

<br />

```javascript
vehicleMarkerCustomization =
  (params) => {
    const remainingWaypoints = params.vehicle.waypoints.length;
    params.marker.setLabel(`${remainingWaypoints}`);
  };
```

<br />

### TypeScript

<br />

```typescript
vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    var remainingWaypoints = params.vehicle.waypoints.length;
    params.marker.setLabel(`${remainingWaypoints}`);
  };
```

<br />

<br />

### Scheduled tasks example

<br />

### JavaScript

<br />

```javascript
deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    params.marker.setLabel(`${stopsLeft}`);
  };
```

<br />

### TypeScript

<br />

```typescript
deliveryVehicleMarkerCustomization =
  (params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    params.marker.setLabel(`${stopsLeft}`);
  };
```

<br />

<br />

## Add click handling to markers

The following example shows how to add click handling to a vehicle marker.
Follow this pattern to add click handling to any marker using any of the
options listed in [Marker customization options](https://developers.google.com/maps/documentation/mobility/operations/fleet-tracking/customize-markers.md.txt#cust-options) listed above.

### On-demand trips example

<br />

### JavaScript

<br />

```javascript
vehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform chosen action.
      });
    }
  };
```

<br />

### TypeScript

<br />

```typescript
vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform chosen action.
      });
    }
  };
```

<br />

<br />

### Scheduled tasks example

<br />

### JavaScript

<br />

```javascript
deliveryVehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform chosen action.
      });
    }
  };
```

<br />

### TypeScript

<br />

```typescript
deliveryVehicleMarkerCustomization =
  (params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform chosen action.
      });
    }
  };
```

<br />

<br />

## Filter which markers are visible

> [!CAUTION]
> **Caution:** If you filter marker visibility using `setVisible`, it can impact performance. As a best practice, you should filter which markers appear with the filtering capabilities available in the JavaScript location provider.

If you need to use `setVisible`, follow this pattern to filter any markers
using any of the options listed in [Marker customization options](https://developers.google.com/maps/documentation/mobility/operations/fleet-tracking/customize-markers.md.txt#cust-options) above.

### On-demand trips example

<br />

### JavaScript

<br />

```javascript
vehicleMarkerCustomization =
  (params) => {
    var remainingWaypoints = params.vehicle.remainingWaypoints.length;
    if (remainingWaypoints > 10) {
      params.marker.setVisible(false);
    }
  };
```

<br />

### TypeScript

<br />

```typescript
vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    var remainingWaypoints = params.vehicle.remainingWaypoints.length;
    if (remainingWaypoints > 10) {
      params.marker.setVisible(false);
    }
  };
```

<br />

<br />

### Scheduled tasks example

<br />

### JavaScript

<br />

```javascript
deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    if (stopsLeft > 10) {
      params.marker.setVisible(false);
    }
  };
```

<br />

### TypeScript

<br />

```typescript
deliveryVehicleMarkerCustomization =
  (params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    if (stopsLeft > 10) {
      params.marker.setVisible(false);
    }
  };
```

<br />

<br />

## What's next

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