Style a map

This document covers how to customize the look and feel of a map and control data visibility and viewport options. You can do this in the following ways:

• Use cloud-based map styling
• Set map style options directly in your own code

Style the map with cloud-based maps styling

Customize the look and feel of the maps component using cloud-based maps styling. You create and edit map styles on the Google Cloud console for any of your apps that use Google Maps, without requiring any changes to your code. For more information, see Cloud-based maps styling.

Both the ConsumerMapView and the ConsumerMapFragment classes support cloud-based maps styling. In order to use cloud-based maps styling, ensure that the selected maps renderer is LATEST. The following sections show examples of how to use cloud-based maps styling with your project.

ConsumerMapView

To use cloud-based maps styling in the ConsumerMapView, set the mapId field on GoogleMapOptions and pass the GoogleMapOptions to getConsumerGoogleMapAsync(ConsumerMapReadyCallback, Fragment, GoogleMapOptions) or getConsumerGoogleMapAsync(ConsumerMapReadyCallback, FragmentActivity, GoogleMapOptions)

Example

Java

public class SampleAppActivity extends AppCompatActivity {

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    ConsumerMapView mapView = findViewById(R.id.consumer_map_view);

    if (mapView != null) {
      GoogleMapOptions optionsWithMapId = new GoogleMapOptions().mapId("map-id");
      mapView.getConsumerGoogleMapAsync(
          new ConsumerMapReadyCallback() {
            @Override
            public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerGoogleMap) {
              // ...
            }
          },
          /* fragmentActivity= */ this,
          /* googleMapOptions= */ optionsWithMapId);
    }
  }
}

Kotlin

class SampleAppActivity : AppCompatActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    val mapView = findViewById(R.id.consumer_map_view) as ConsumerMapView

    val optionsWithMapId = GoogleMapOptions().mapId("map-id")
    mapView.getConsumerGoogleMapAsync(
      object : ConsumerGoogleMap.ConsumerMapReadyCallback() {
        override fun onConsumerMapReady(consumerGoogleMap: ConsumerGoogleMap) {
          // ...
        }
      },
      /* fragmentActivity= */ this,
      /* googleMapOptions= */ optionsWithMapId)
  }
}

ConsumerMapFragment

There are two ways to use cloud-based maps styling in ConsumerMapFragments:

• Statically with the XML.
• Dynamically with newInstance.

Statically with the XML

To use cloud-based maps styling with the XML in the ConsumerMapFragment, add the map:mapId XML attribute with the specified mapId. See the following example:

<fragment
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:map="http://schemas.android.com/apk/res-auto"
    android:name="com.google.android.libraries.mapsplatform.transportation.consumer.view.ConsumerMapFragment"
    android:id="@+id/consumer_map_fragment"
    map:mapId="map-id"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

Dynamically with newInstance

To use cloud-based maps styling with newInstance in ConsumerMapFragment, set the mapId field on GoogleMapOptions and pass the GoogleMapOptions to newInstance. See the following example:

Java

public class SampleFragmentJ extends Fragment {

  @Override
  public View onCreateView(
      @NonNull LayoutInflater inflater,
      @Nullable ViewGroup container,
      @Nullable Bundle savedInstanceState) {

    final View view = inflater.inflate(R.layout.consumer_map_fragment, container, false);

    GoogleMapOptions optionsWithMapId = new GoogleMapOptions().mapId("map-id");
    ConsumerMapFragment consumerMapFragment = ConsumerMapFragment.newInstance(optionsWithMapId);

    getParentFragmentManager()
        .beginTransaction()
        .add(R.id.consumer_map_fragment, consumerMapFragment)
        .commit();

    consumerMapFragment.getConsumerGoogleMapAsync(
        new ConsumerMapReadyCallback() {
          @Override
          public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerGoogleMap) {
            // ...
          }
        });

    return view;
  }
}

Kotlin

class SampleFragment : Fragment() {
  override fun onCreateView(
    inflater: LayoutInflater,
    container: ViewGroup?,
    savedInstanceState: Bundle?): View? {

    val view = inflater.inflate(R.layout.consumer_map_fragment, container, false)

    val optionsWithMapId = GoogleMapOptions().mapId("map-id")
    val consumerMapFragment = ConsumerMapFragment.newInstance(optionsWithMapId)

    parentFragmentManager
      .beginTransaction()
      .add(R.id.consumer_map_fragment, consumerMapFragment)
      .commit()

    consumerMapFragment.getConsumerGoogleMapAsync(
      object : ConsumerMapReadyCallback() {
        override fun onConsumerMapReady(consumerGoogleMap: ConsumerGoogleMap) {
          // ...
        }
      })

    return view
  }
}

To apply a map style to your JavaScript consumer trip sharing map, specify a mapId and any other mapOptions when you create the JourneySharingMapView.

Note: You cannot change or add a mapId after the JourneySharingMapView has been instantiated.

The following examples show how to apply a map style with a map ID.

JavaScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
  // Any other styling options.
});

TypeScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
  // Any other styling options.
});

Style maps directly in your own code

You can also customize map styling by setting map options when you create the JourneySharingMapView. The following examples show how to style a map using map options. For more information on what map options you can set, see mapOptions in the Google Maps JavaScript API reference.

JavaScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    styles: [
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "color": "#CCFFFF" }
        ]
      }
    ]
  }
});

TypeScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    styles: [
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "color": "#CCFFFF" }
        ]
      }
    ]
  }
});

Control the visibility of task data to the SDK

You can control the visibility of certain task objects on the map using visibility rules.

Note: Location markers are always visible on the map. For example, a shipment delivery location is always shown on the map, regardless of the state of the delivery. You can, however, customize the look of these markers. See Customize markers.

Task data default visibility

By default, data for tasks assigned to a vehicle are visible when the vehicle is within 5 stops of the task. The visibility ends when the task is completed or canceled.

This table shows the default visibility for each type of task. You can customize the visibility for many tasks, but not all. For more details on task types, see Task types in the Scheduled tasks guide.

Type of task	Default visibility	Customizable?	Description
Unavailability tasks	Not visible	No	Used for driver breaks and refueling. If a route to a delivery task also contains another vehicle stop, that stop is not shown if it contains only unavailability tasks. Estimated arrival time and estimated task completion time are still shown for the delivery task itself.
Open vehicle tasks	Visible	Yes	Visibility ends when the task is completed or canceled. You can customize the visibility of open vehicle tasks. See Customize the visibility of open vehicle tasks.
Closed vehicle tasks	Not visible	No	You cannot customize the visibility of closed vehicle tasks.

Customize the visibility of open vehicle tasks

The TaskTrackingInfo interface provides a number of task data elements that can be made visible with the Consumer SDK.

Customizable task data elements
Route polylines Estimated time to arrival Estimated task completion time	Remaining driving distance to the task Remaining stop count Vehicle location

Visibility options per task

You can customize the visibility configuration on a per-task basis by setting the TaskTrackingViewConfig when creating or updating a task within Fleet Engine. Use the following visibility options to create criteria to determine visibility of a task element:

Visibility options
Remaining stop count Duration until estimated arrival time Remaining driving distance	Always visible Never visible

Note: Any given data element may be associated with only one visibility option. It is not possible to combine criteria using OR or AND.

To illustrate, suppose an example customization adjusts visibility for three data elements using the criteria shown in the following table. All other elements follow the default visibility rules.

Data element to adjust	Visibility	Criterion
Route polyline	Show	The vehicle is within 3 stops.
ETA	Show	The remaining driving distance is shorter than 5000 meters.
Remaining stop count	Never show	The vehicle is within 3 stops.

The following example shows this configuration:

"taskTrackingViewConfig": {
  "routePolylinePointsVisibility": {
    "remainingStopCountThreshold": 3
  },
  "estimatedArrivalTimeVisibility": {
    "remainingDrivingDistanceMetersThreshold": 5000
  },
  "remainingStopCountVisibility": {
    "never": true
  }
}

Note: You can also customize the default visibility options for your project by contacting the support team.

Route polylines and vehicle location visibility rules

Route polylines cannot be visible unless the vehicle location is also visible; otherwise the vehicle location can be inferred by the end of a polyline.

Key point: Route polyline visibility rules must be equally restrictive or more restrictive than visibility rules for vehicle location.

These guidelines help you provide a valid combination for route polyline and vehicle location visibility options.

Same visibility options	Visibility criterion	Guidance
	Route polylines options set to always visible.	Set vehicle location to always visible.
	Vehicle location set to never visible.	Set route polylines to never visible.
	Visibility option is any of: remaining stop count duration until ETA remaining driving distance	Set route polyline options to a value less than or equal to the value set for the vehicle location. For example: "taskTrackingViewConfig": { "routePolylinePointsVisibility": { "remainingStopCountThreshold": 3 }, "vehicleLocationVisibility": { "remainingStopCountThreshold": 5 }, }
Different visibility options	Visibility criteria	Guidance
	Vehicle location is visible	This happens only when both vehicle location and polyline visibility options are satisfied. For example: "taskTrackingViewConfig": { "routePolylinePointsVisibility": { "remainingStopCountThreshold": 3 }, "vehicleLocationVisibility": { "remainingDrivingDistanceMetersThreshold": 3000 }, } In this example, the vehicle location is only visible if the remaining stop count is at least 3 AND the remaining driving distance is at least 3000 meters.

Disable automatic fitting

You can stop the map from automatically fitting the viewport to the vehicle and anticipated route by disabling automatic fitting. The following example shows how to disable automatic fitting when you configure the journey sharing map view.

JavaScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  automaticViewportMode:
      google.maps.journeySharing
          .AutomaticViewportMode.NONE,
  ...
});

TypeScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  automaticViewportMode:
      google.maps.journeySharing
          .AutomaticViewportMode.NONE,
  ...
});

What's next

• Customize markers
• Customize polylines