Places UI Kit: A ready-to-use library that provides room for customization and low-code development. Try it out, and share your input on your UI Kit experience.

Migrate to the Route Matrix class

European Economic Area (EEA) developers

The RouteMatrix class replaces the Distance Matrix Service, Maps JavaScript API (Legacy). This page explains the differences between the legacy Distance Matrix service and the new JavaScript library, and provides some code for comparison.

Distance Matrix API (Legacy) versus Route Matrix class

The following table compares the request parameters for the legacy Distance Matrix API and the RouteMatrix class.

Distance Matrix Service (Legacy)	`RouteMatrix`
Required Parameters
`origins`	`origins`
`destinations`	`destinations`
Optional Parameters
`travelMode`	`travelMode`
`transitOptions`	`transitPreference`
`arrivalTime`	`arrivalTime`
`drivingOptions`	`departureTime`, `trafficModel`
`unitSystem`	`units`
`avoidHighways`, `avoidTolls`	`RouteModifiers`

Code comparison

This section compares two similar pieces of code to illustrate the differences between the legacy Distance Matrix API and the new RouteMatrix class. The code snippets show the code required on each respective API to make a directions request, and view the results.

Directions API (Legacy)

The following code makes a distance matrix request using the legacy Distance Matrix API.

// Define the request.
constrequest={
origins:[{lat:55.93,lng:-3.118},'Greenwich, England'],
destinations:['Stockholm, Sweden',{lat:50.087,lng:14.421}],
travelMode:'DRIVING',
drivingOptions:{
departureTime:newDate(Date.now()),
trafficModel:'optimistic'
}
};
// Make the request.
service.getDistanceMatrix(request).then((response)=>{
// Display the response.
document.getElementById("response").textContent=JSON.stringify(
response,
null,
2,
);
});

Route Matrix class

The following code makes a distance matrix request using the new Route Matrix class:

// Define the request.
constrequest={
origins:[{lat:55.93,lng:-3.118},'Greenwich, England'],
destinations:['Stockholm, Sweden',{lat:50.087,lng:14.421}],
travelMode:'DRIVING',
departureTime:newDate(),
trafficModel:'optimistic'
};
// Make the request.
constresponse=awaitRouteMatrix.computeRouteMatrix(request);
// Display the response.
document.getElementById("response").setValue(JSON.stringify(response,null,2,));