Customize markers

AI-generated Key Takeaways

• The ConsumerMapStyle class allows you to customize markers and polylines for the consumer experience using setter and getter methods.

• You can customize the marker type, appearance, and visibility using the setMarkerStyleOptions() method and restore defaults by passing null as the MarkerOptions parameter.

• The available marker types include TRIP_PICKUP_POINT, TRIP_DROPOFF_POINT, TRIP_INTERMEDIATE_DESTINATION, and TRIP_VEHICLE, which dynamically rotates during trip monitoring.

• Use the Google Maps MarkerOptions properties to customize marker appearance and set visible to false to hide a marker and potentially replace it with your own UI element.

• UI customizations persist across device rotations and remain in effect until the ConsumerController is detached.

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 while following a trip
• TRIP_DROPOFF_POINT - Displays while following a trip
• TRIP_INTERMEDIATE_DESTINATION

• TRIP_VEHICLE - Displays while following a trip

  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