Cómo migrar a la clase Route

Desarrolladores del Espacio Económico Europeo (EEE)

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 Directions heredado y la nueva Route clase, y se proporciona código para compararlos.

Servicio Directions (heredado) en comparación con la clase Route

Parámetros de solicitud

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

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

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 Route clase.

Servicio Directions (heredado) Route
route() método Método computeRoutes()
DirectionsRenderer.setDirections() método 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 Directions heredado y la nueva clase Route. Los fragmentos de código muestran el código requerido 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 Directions heredado, se usa el DirectionsRenderer objeto para mostrar polilíneas y marcadores que representan los resultados de las direcciones en un mapa. En la biblioteca de Routes, el DirectionsRenderer objeto se reemplazó por los createPolylines() y createWaypointAdvancedMarkers() métodos. En esta página, se explican las diferencias entre el servicio Directions heredado y la nueva Route clase, y se proporciona código para compararlos.

Cómo llegar en automóvil

Servicio Directions (heredado)

El siguiente código obtiene indicaciones 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

El siguiente código obtiene indicaciones para llegar en automóvil con la nueva clase Route, 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.

TypeScript

// Define a routes request.
const request: google.maps.routes.ComputeRoutesRequest = {
    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 } = await Route.computeRoutes(request);

// Use createPolylines to create polylines for the route.
if (!routes) {
    console.warn('No routes found.');
    return;
}
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.map = 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 } = await Route.computeRoutes(request);

// Use createPolylines to create polylines for the route.
if (!routes) {
    console.warn('No routes found.');
    return;
}
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.map = map;
});