Cómo migrar a la clase Route

La nueva biblioteca de Routes de la API de Maps JavaScript incluye la clase Route, que reemplaza al servicio Directions heredado. En esta página, se explican las diferencias entre el servicio de Directions heredado y la nueva clase Route, y se proporciona código para compararlos.

Comparación entre el servicio Directions (heredado) y la clase Route (beta)

parámetros de solicitud

En la siguiente tabla, se comparan los parámetros de solicitud del servicio Directions heredado y la clase Route.

Servicio Directions (heredado) Route (beta)
Método DirectionsService.route() Método Route.computeRoutes()

Parámetros obligatorios
origin origin
destination destination
travelMode travelMode (opcional)

Parámetros opcionales
optimizeWaypoints optimizeWaypointOrder
provideRouteAlternatives computeAlternativeRoutes
avoidFerries, avoidHighways, avoidTolls routeModifiers
drivingOptions departureTime, trafficModel
region region
transitOptions transitPreference
arrivalTime arrivalTime
unitSystem units
waypoints intermediates

Comparación de métodos

En la siguiente tabla, se comparan los métodos clave del servicio Directions heredado y la clase Route.

Servicio Directions (heredado) Route (beta)
Método route() Método computeRoutes()
Método DirectionsRenderer.setDirections() Método createPolylines(), método createWaypointAdvancedMarkers()

Comparación de código

En esta sección, se comparan dos fragmentos de código similares para ilustrar las diferencias entre el servicio de Directions heredado y la nueva clase Route. Los fragmentos de código muestran el código necesario en cada API respectiva para realizar una solicitud de direcciones y, luego, usar el resultado para dibujar una polilínea y marcadores en el mapa.

En el servicio de Directions heredado, el objeto DirectionsRenderer se usa para mostrar polilíneas y marcadores que representan los resultados de las indicaciones en un mapa. En la biblioteca de Routes, el objeto DirectionsRenderer se reemplazó por los métodos createPolylines() y createWaypointAdvancedMarkers(). En esta página, se explican las diferencias entre el Directions Service heredado y la nueva clase Route, y se proporciona código para realizar comparaciones.

Cómo llegar en automóvil

Servicio Directions (heredado)

El siguiente código obtiene instrucciones para llegar en automóvil con el servicio Directions heredado y, luego, usa DirectionsRenderer para dibujar una polilínea y marcadores en el mapa: 

// 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.
  }
});

Clase Route (beta)

El siguiente código obtiene indicaciones para llegar en automóvil con la nueva clase Route y, luego, usa el método createPolylines para dibujar una polilínea en el mapa y el método createWaypointAdvancedMarkers para dibujar marcadores en el mapa.

La nueva clase Route no renderiza marcadores automáticamente. Debes llamar a createWaypointAdvancedMarkers para renderizar marcadores. 

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

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

// Use createPolylines to create a polyline 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));