Migrate to the Route class

European Economic Area (EEA) developers

The new Routes Library, Maps JavaScript API includes the Route class, which replaces the legacy Directions Service. This page explains the differences between the legacy directions service and the new Route class, and provides some code for comparison.

Directions service (Legacy) versus Route class (Beta)

Request parameters

The following table compares the request parameters for the legacy Directions service and the Route class.

Directions Service (Legacy) Route (Beta)
DirectionsService.route() method Route.computeRoutes() method

Required Parameters
origin origin
destination destination
travelMode travelMode (optional)

Optional Parameters
optimizeWaypoints optimizeWaypointOrder
provideRouteAlternatives computeAlternativeRoutes
avoidFerries, avoidHighways, avoidTolls routeModifiers
drivingOptions departureTime, trafficModel
region region
transitOptions transitPreference
arrivalTime arrivalTime
unitSystem units
waypoints intermediates

Methods comparison

The following table compares key methods for the legacy Directions service and the Route class.

Directions Service (Legacy) Route (Beta)
route() method computeRoutes() method
DirectionsRenderer.setDirections() method createPolylines() method, createWaypointAdvancedMarkers() method

Code comparison

This section compares two similar pieces of code to illustrate the differences between the legacy Directions service and the new Route class. The code snippets show the code required on each respective API to make a directions request, and then use the result to draw a polyline and markers on the map.

In the legacy Directions service, the DirectionsRenderer object is used to display polylines and markers to represent directions results on a map. In the Routes library, the DirectionsRenderer object has been replaced by the createPolylines() and createWaypointAdvancedMarkers() methods. This page explains the differences between the legacy Directions Service and the new Route class, and provides some code for comparison.

Get driving directions

Directions service (Legacy)

The following code gets driving directions using the legacy Directions service, and then uses the DirectionsRenderer to draw a polyline and markers on the map: 

// Define a simple request.
var request = {
  origin: 'Mountain View, CA',
  destination: 'San Francisco, CA',
  travelMode: 'DRIVING'
};
// Call the Directions Service to get the directions.
directionsService.route(request, function(result, status) {
  if (status == 'OK') {
    directionsRenderer.setDirections(result); // Add polyline and markers to the map.
  }
});

Route class (Beta)

The following code gets driving directions using the new Route class, then uses the createPolylines method to draw a polyline on the map, and the createWaypointAdvancedMarkers method to draw markers on the map.

The new Route class does not automatically render markers. You must call createWaypointAdvancedMarkers to render markers.

TypeScript

// Define a routes request.
const request = {
  origin: 'Mountain View, CA',
  destination: 'San Francisco, CA',
  travelMode: 'DRIVING',
  fields: ['path'], // Request fields needed to draw polylines.
};

// Call computeRoutes to get the directions.
const {routes, fallbackInfo, geocodingResults} = await Route.computeRoutes(request);

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

// Create markers to start and end points.
const markers = await routes[0].createWaypointAdvancedMarkers();
// Add markers to the map
markers.forEach((marker) => marker.setMap(map));
index.ts

JavaScript

// Define a routes request.
const request = {
    origin: 'Mountain View, CA',
    destination: 'San Francisco, CA',
    travelMode: 'DRIVING',
    fields: ['path'], // Request fields needed to draw polylines.
};
// Call computeRoutes to get the directions.
const { routes, fallbackInfo, geocodingResults } = await Route.computeRoutes(request);
// Use createPolylines to create polylines for the route.
mapPolylines = routes[0].createPolylines();
// Add polylines to the map.
mapPolylines.forEach((polyline) => polyline.setMap(map));
// Create markers to start and end points.
const markers = await routes[0].createWaypointAdvancedMarkers();
// Add markers to the map
markers.forEach((marker) => marker.setMap(map));
index.js