Customize markers

This document covers how to customize vehicle and location markers in the map you use for your web-based shipment tracking app for consumers.

With the JavaScript Consumer SDK, you can customize the look and feel of two types of markers added to the map:

You do this in one of two ways:

  • Simplest: Specify a MarkerOptions object to apply to all markers of the same type. The Consumer SDK then applies the styling in two situations: before adding the markers to the map, and when the data used for the markers have changed.
  • More advanced: Specify a customization function. Customization functions allow for styling of the markers based on data, as well as adding interactivity to markers, such as click handling. Specifically, the Consumer SDK passes data to the customization function about the type of object the marker represents: vehicle or destination. This then allows marker styling to change based on the current state of the marker element itself; for example, the number of planned stops remaining until the destination. You can even join against data from sources outside Fleet Engine and style the marker based on that information.

Simple example: use MarkerOptions

The following example shows how to configure a vehicle marker's styling with a MarkerOptions object. This example sets the marker opacity to 50%.

JavaScript

deliveryVehicleMarkerCustomization = {
  opacity: 0.5
};

TypeScript

deliveryVehicleMarkerCustomization = {
  opacity: 0.5
};

Advanced example: use a customization function

The following example shows how to configure a vehicle marker's styling to display the remaining stop count for the vehicle before reaching the stop for the scheduled task.

JavaScript

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.taskTrackingInfo.remainingStopCount;
    params.marker.setLabel(`${stopsLeft}`);
  };

TypeScript

deliveryVehicleMarkerCustomization =
  (params: ShipmentMarkerCustomizationFunctionParams) => {
    const stopsLeft = params.taskTrackingInfo.remainingStopCount;
    params.marker.setLabel(`${stopsLeft}`);
  };

Add click handling to markers

You can add click handling to any marker, such as in the following example for a vehicle marker.

JavaScript

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

TypeScript

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

Display additional information for markers

You can use an InfoWindow to display additional information about a vehicle or location marker. The following example creates an InfoWindow and attaches it to a vehicle marker:

JavaScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

locationProvider.addListener('update', e => {
  const stopsCount =
      e.taskTrackingInfo.remainingStopCount;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

  // 2. Attach the info window to a vehicle marker.
  // This property can return multiple markers.
  const marker = mapView.vehicleMarkers[0];
  infoWindow.open(mapView.map, marker);
});

// 3. Close the info window.
infoWindow.close();

TypeScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineShipmentLocationProviderUpdateEvent) => {
  const stopsCount =
      e.taskTrackingInfo.remainingStopCount;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

  // 2. Attach the info window to a vehicle marker.
  // This property can return multiple markers.
  const marker = mapView.vehicleMarkers[0];
  infoWindow.open(mapView.map, marker);
});

// 3. Close the info window.
infoWindow.close();

What's next