The Routes Preferred API offers the possibility of requesting information about traffic conditions along the polyline. Traffic conditions are expressed in terms of speed categories (NORMAL, SLOW, TRAFFIC_JAM) applicable on a given interval of the response polyline. The intervals are defined by the indexes of their starting (inclusive) and ending (exclusive) polyline points.

Example Request

Traffic aware polyline is available for both route level and leg level. At the route level, the traffic speed information is provided as SpeedReadingIntervals under the RouteTravelAdvisory response field. In order to receive traffic information alongside the polyline of the route, include both polyline and speedReadingIntervals in the response field mask.

If the field mask contains routes.legs.travelAdvisory.speedReadingIntervals, then the response will contain the leg level traffic data under RouteLegTravelAdvisory.

X-Goog-FieldMask: routes.duration,routes.distanceMeters,routes.polyline.encodedPolyline,routes.travelAdvisory.speedReadingIntervals,routes.legs.polyline.encodedPolyline,routes.legs.travelAdvisory.speedReadingIntervals

Visit "Choose Fields to Return" for additional details on specifying the response fieldmask.

Example Response

As long as speedReadingIntervals are requested via the field mask, they are populated under routes.travelAdvisory.speedReadingIntervals. The leg level traffic is available under routes.legs.travelAdvisory.speedReadingIntervals. Every interval is described by its startPolylinePointIndex, endPolylinePointIndex, and the corresponding speed category. Note that the lack of start index within the interval corresponds with index 0 in accordance with the proto3 practices.

{
  "routes": [
    {
      "legs": {
        "polyline": {
          "encodedPolyline": "}boeF~zbjVAg@EmB`GWHlD"
        },
        "travelAdvisory": {
          "speedReadingIntervals": [
            {
              "endPolylinePointIndex": 1,
              "speed": "NORMAL"
            },
            {
              "startPolylinePointIndex": 1,
              "endPolylinePointIndex": 2,
              "speed": "SLOW"
            },
            {
              "startPolylinePointIndex": 2,
              "endPolylinePointIndex": 4,
              "speed": "NORMAL"
            }
          ] 
        }
      },
      "polyline": {
        "encodedPolyline": "}boeF~zbjVAg@EmB`GWHlD"
      },
      "travelAdvisory": {
        "speedReadingIntervals": [
          {
            "endPolylinePointIndex": 1,
            "speed": "NORMAL"
          },
          {
            "startPolylinePointIndex": 1,
            "endPolylinePointIndex": 2,
            "speed": "SLOW"
          },
          {
            "startPolylinePointIndex": 2,
            "endPolylinePointIndex": 4,
            "speed": "NORMAL"
          }
        ] 
      }
    }
  ]
}

Render Traffic Aware Polylines with Maps SDK

We recommend displaying traffic aware polylines on the map using the various features offered by Google Maps SDKs including custom coloring, strokes, and patterns along the polyline streches. For more details about using polylines, see Polyline Features for Android and Polyline Features for iOS.

Example Polyline rendering

The users of Maps SDK have the opportunity of defining a customized mapping logic between the speed categories and the polyline rendering schemas. As an example, one might decide to display "NORMAL" speed as a thick blue line on the map while "SLOW" speed might be displayed as a thick orange line, and so on.

The following snippets add a thick blue polyline with geodesic segments from Melbourne to Perth. For more information, see Customizing appearances (for Android) and Customize the Polyline (for iOS).

Android

Polyline line = map.addPolyline(new PolylineOptions()
    .add(new LatLng(-37.81319, 144.96298), new LatLng(-31.95285, 115.85734))
    .width(25)
    .color(Color.BLUE)
    .geodesic(true));

val line: Polyline = map.addPolyline(
  PolylineOptions()
    .add(LatLng(-37.81319, 144.96298), LatLng(-31.95285, 115.85734))
    .width(25f)
    .color(Color.BLUE)
    .geodesic(true)
)

iOS

GMSMutablePath *path = [GMSMutablePath path];
[path addLatitude:-37.81319 longitude:144.96298];
[path addLatitude:-31.95285 longitude:115.85734];
GMSPolyline *polyline = [GMSPolyline polylineWithPath:path];
polyline.strokeWidth = 10.f;
polyline.strokeColor = .blue;
polyline.geodesic = YES;
polyline.map = mapView;

let path = GMSMutablePath()
path.addLatitude(-37.81319, longitude: 144.96298)
path.addLatitude(-31.95285, longitude: 115.85734)
let polyline = GMSPolyline(path: path)
polyline.strokeWidth = 10.0
polyline.geodesic = true
polyline.map = mapView