The new Routes Library, Maps JavaScript API includes theRoute class, which replaces thelegacy Directions Service. This page explains the differences between the legacy directions service and the newRoute 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 theRoute class.

Methods comparison

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

Code comparison

This section compares two similar pieces of code to illustrate the differences between the legacy Directions service and the newRoute 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, theDirectionsRenderer object is used to display polylines and markers to represent directions results on a map. In the Routes library, theDirectionsRenderer object has been replaced by thecreatePolylines() andcreateWaypointAdvancedMarkers() methods. This page explains the differences between the legacy Directions Service and the newRoute 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 theDirectionsRenderer to draw a polyline and markers on the map:

// Define a simple request.varrequest={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 thecreatePolylines method to draw a polyline on the map, and thecreateWaypointAdvancedMarkers method to draw markers on the map.

The newRoute class does not automatically render markers. You must callcreateWaypointAdvancedMarkers to render markers.

// Define a routes request.constrequest={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}=awaitRoute.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.constmarkers=awaitroutes[0].createWaypointAdvancedMarkers();// Add markers to the mapmarkers.forEach((marker)=>marker.setMap(map));
index.ts

// Define a routes request.constrequest={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}=awaitRoute.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.constmarkers=awaitroutes[0].createWaypointAdvancedMarkers();// Add markers to the mapmarkers.forEach((marker)=>marker.setMap(map));
index.js