Customize markers

Select platform: Android iOS JavaScript

The ConsumerMapStyle class provides setter and getter methods with dynamic customization for markers and polylines. You expose this class asynchronously using the ConsumerController.getConsumerMapStyle() method.

UI customization persists across device rotations and remains in effect until you detach the ConsumerController.

Customize markers

To set the marker type and its properties, use the ConsumerMapStyle.setMarkerStyleOptions() method. Your custom marker options override the default values provided by the Consumer SDK. To restore the default values, call setMarkerStyleOptions() using null for the MarkerOptions parameter. Retrieve the active MarkerOptions using getMarkerStyleOptions().

Select a marker type

You can use and customize the following marker icons:

• TRIP_PICKUP_POINT - Displays during journey sharing
• TRIP_DROPOFF_POINT - Displays during journey sharing
• TRIP_INTERMEDIATE_DESTINATION

• TRIP_VEHICLE - Displays during journey sharing

  The Consumer SDK updates the rotation of the TRIP_VEHICLE icon during trip monitoring to mimic the behavior of the actual vehicle as it travels the route.

Note: For the most realistic animation results, use a top view perspective for TRIP_VEHICLE, with the front of the vehicle oriented upwards.

Note: The marker icon doesn't change according to the actual vehicle type for the trip.

Select marker options

You can customize markers for your consumer app by following these steps:

1. Use the properties for each marker provided by Google Maps MarkerOptions.

2. Build MarkerOptions using its constructor.

3. Specify custom properties using 'Setter' style methods.

   Note: Since the SDK provides default values for each marker property, only specify custom properties for the values you want to change.

4. If you prefer, use your own UI element by mimicking the patterns provided by the MarkerOptions constructor.

5. To turn off a marker, set the visible property to false. You can then use your own UI element in its place.

For more information, see Google Maps MarkerOptions.

Example marker customizations

Java

// Initializing marker options.
consumerController
    .getConsumerMapStyle()
    .addOnSuccessListener(
        consumerMapStyle -> {
          consumerMapStyle.setMarkerStyleOptions(
              MarkerType.TRIP_VEHICLE,
              new MarkerOptions()
                  .visible(false));
        });

// Reset marker options to default values.
consumerMapStyle.setMarkerStyleOptions(MarkerType.TRIP_VEHICLE, null);

Kotlin

// Initializing marker options.
consumerController
  .getConsumerMapStyle()
  .addOnSuccessListener({ consumerMapStyle ->
    consumerMapStyle.setMarkerStyleOptions(MarkerType.TRIP_VEHICLE, MarkerOptions().visible(false))
  })

// Reset marker options to default values.
consumerMapStyle.setMarkerStyleOptions(MarkerType.TRIP_VEHICLE, null)

What's next

• Customize route polylines