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

<br />

Customize the look and feel of markers added to the map. Customize the look
and feel of markers added to the map in two 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
   [Change the styling of markers using `MarkerOptions`](https://developers.google.com/maps/documentation/mobility/journey-sharing/on-demand/javascript/customize-markers.md.txt#markeropt) in this
   guide.

2. **Style markers based on data**: Specify a customization function to
   style markers based on data. You can style based on data from journey
   sharing, or from outside sources:

   - **Data from trip sharing**: Trip sharing passes marker data to the
     customization function including the type of object the marker represents:
     vehicle, origin, waypoint or destination. Marker styling then changes
     based on the current state of the marker element. For example, the number
     of waypoints remaining until the vehicle finishes the trip.

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

   For examples, see
   [Change the styling of markers using customization functions](https://developers.google.com/maps/documentation/mobility/journey-sharing/on-demand/javascript/customize-markers.md.txt#vehicle-markers)
   in this guide.
3. **Add click handling to markers** : For examples,
   see [Add click handling](https://developers.google.com/maps/documentation/mobility/journey-sharing/on-demand/javascript/customize-markers.md.txt#add-click).

## Marker customization options

Both options use the following customization parameters in the Google
Maps JavaScript API under
[`FleetEngineTripLocationProviderOptions`](https://developers.google.com/maps/documentation/javascript/reference/journey-sharing-trip-and-order-progress.md.txt#FleetEngineTripLocationProviderOptions):

- [`vehicleMarkerCustomization`](https://developers.google.com/maps/documentation/javascript/reference/journey-sharing-trip-and-order-progress.md.txt#FleetEngineTripLocationProviderOptions.vehicleMarkerCustomization)
- [`originMarkerCustomization`](https://developers.google.com/maps/documentation/javascript/reference/journey-sharing-trip-and-order-progress.md.txt#FleetEngineTripLocationProviderOptions.originMarkerCustomization)
- [`waypointMarkerCustomization`](https://developers.google.com/maps/documentation/javascript/reference/journey-sharing-trip-and-order-progress.md.txt#FleetEngineTripLocationProviderOptions.waypointMarkerCustomization)
- [`destinationMarkerCustomization`](https://developers.google.com/maps/documentation/javascript/reference/journey-sharing-trip-and-order-progress.md.txt#FleetEngineTripLocationProviderOptions.destinationMarkerCustomization)

## Change the styling of markers using `MarkerOptions`

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

### JavaScript

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

### TypeScript

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

## Change the styling of markers using customization functions

The following example shows how to configure vehicle marker styling using
customization functions. Follow this pattern to customize the styling of any
marker using any of the marker customization parameters listed in
[Marker customization options](https://developers.google.com/maps/documentation/mobility/journey-sharing/on-demand/javascript/customize-markers.md.txt#cust-options).

### JavaScript

```javascript
vehicleMarkerCustomization =
  (params) => {
    var distance = params.trip.remainingWaypoints.length;
    params.marker.setLabel(`${distance}`);
  };
```

### TypeScript

```typescript
vehicleMarkerCustomization =
  (params: TripMarkerCustomizationFunctionParams) => {
    const distance = params.trip.remainingWaypoints.length;
    params.marker.setLabel(`${distance}`);
};
```

## 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 marker
customization parameters listed in [Marker customization options](https://developers.google.com/maps/documentation/mobility/journey-sharing/on-demand/javascript/customize-markers.md.txt#cust-options).

### JavaScript

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

### TypeScript

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

## What's next

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