Work with polylines

European Economic Area (EEA) developers

The computeRoutes method returns the route represented by a polyline as part of the response. You can request two types of polylines:

  • Basic polyline (default), represents a route but without traffic information embedded in the polyline. Requests that return a basic polyline are billed at the Routes Basic rate. Learn more about billing for Routes API.
  • Traffic-aware polyline, contains information about the traffic conditions along the route. Traffic conditions are expressed in terms of speed categories (NORMAL, SLOW, TRAFFIC_JAM) applicable on a given interval of the polyline. Requests for traffic-aware polylines are billed at the Routes Preferred rate. Learn more about billing for Routes API.
  • Multimodal polyline, contains transit details as well as traffic information. Requests for multimodal polylines are billed at the Routes Preferred rate. Learn more about billing for Routes API.

Basic polyline (default)

A polyline is represented by a Polyline object; a path is an array of LatLngAltitude coordinates. To return a basic polyline, call the computeRoutes method with the fields property set to path, then call the createPolylines method on the route instance to get a Polyline object.

The following example shows how to request a basic polyline:

// Define a basic routes request.
const requestWithBasicPolyline = {
  origin: '155 Steuart St, San Francisco, CA 94105',
  destination: '450 Powell St, San Francisco, CA 94102',
  travelMode: 'WALKING',
  fields: ['path'],  // Request path field to get a polyline.
};

Traffic-aware polyline

To request a traffic-aware polyline, add the following properties to your request:

  1. Set the travelMode property to DRIVING.
  2. Set the routingPreference property to TRAFFIC_AWARE.
  3. Set the extraComputations property to TRAFFIC_ON_POLYLINE.
  4. Specify thepath, speedPaths, and routeLabels fields.

The following example shows how to request a traffic-aware polyline:

// Define a traffic aware routes request.
const requestWithTraffic = {
  origin: '200 King St San Francisco, CA 94107',
  destination: 'Pier 41, San Francisco, CA 94133',
  travelMode: 'DRIVING',
  routingPreference: 'TRAFFIC_AWARE',
  extraComputations: ['TRAFFIC_ON_POLYLINE'],
  fields: ['speedPaths'],
};

Display polylines on a map

To display polylines on a map, call createPolylines on the route object, then use the setMap method to set the polyline's map to the map object. The map object is used to display the polyline on the map.

The following example shows how to show a polyline on a map:

  // Call createPolylines to create polylines for the first route.
  mapPolylines = routes[0].createPolylines();
  // Add polylines to the map.
  mapPolylines.forEach((polyline) => polyline.setMap(map));