Customize markers

Select platform: Android iOS JavaScript

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 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 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 journey sharing: Journey 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 journey 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 in this guide.

3. Add click handling to markers: For examples, see Add click handling.

Marker customization options

Both options use the following customization parameters in the Google Maps JavaScript API under FleetEngineTripLocationProviderOptions:

• vehicleMarkerCustomization
• originMarkerCustomization
• waypointMarkerCustomization
• 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.

JavaScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

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.

JavaScript

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

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.

JavaScript

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

TypeScript

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

What's next

• Customize route polylines