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 de instrucciones sobre cómo llegar heredado y la nueva clase Route, y se proporciona código para comparar.

Servicio Directions (heredado) frente a la clase Route

Parámetros de solicitud

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

Servicio Directions (heredado) Route
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 de Directions heredado y la clase Route.

Servicio Directions (heredado) Route
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. En los fragmentos de código, se muestra el código necesario en cada API respectiva para realizar una solicitud de instrucciones sobre cómo llegar y, luego, usar el resultado para dibujar una polilínea y marcadores en el mapa.

En el servicio Directions heredado, el objeto DirectionsRenderer se usa para mostrar polilíneas y marcadores que representan los resultados de las instrucciones sobre cómo llegar 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 servicio de Directions heredado y la nueva clase Route, y se proporciona un código para comparar.

Cómo llegar en automóvil

Servicio Directions (heredado)

En el siguiente código, se obtiene la ruta en auto con el servicio Directions heredado y, luego, se 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 de ruta

En el siguiente código, se obtiene la ruta en auto con la nueva clase Route y, luego, se 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 los 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;
});