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
Request parameters
The following table compares the request parameters for the legacy Directions service and the Route class.
Methods comparison
The following table compares key methods for the legacy Directions service and the Route class.
| Directions Service (Legacy) | Route |
|---|---|
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
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));
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));