Servicio de indicaciones

Información general

Puedes calcular indicaciones (usando varios métodos de transporte) con el objeto DirectionsService. Este objeto se comunica con el servicio de indicaciones de la Google Maps API, el cual recibe solicitudes de indicaciones y devuelve resultados computados. Puedes administrar estos resultados de indicaciones por ti mismo o usar el objeto DirectionsRenderer para representarlos.

Al especificar el origen o el destino en una consulta de indicaciones, puedes especificar una cadena de consulta (por ejemplo, “Chicago, IL” o “Darwin, NSW, Australia”), un valor LatLng o un objeto google.maps.Place.

El servicio de indicaciones puede devolver indicaciones de varias partes usando una serie de waypoints. Las indicaciones se muestran como una polilínea que dibuja la ruta en un mapa o, adicionalmente, como una serie de descripciones textuales dentro de un elemento <div> (p. ej., “Doble a la derecha en la rampa del puente de Williamsburg”).

Primeros pasos

Antes de usar el servicio de indicaciones de la Google Maps JavaScript API, debes asegurarte de que Google Maps Directions API esté habilitada en Google API Console, en el mismo proyecto que configuraste para la Google Maps JavaScript API.

Para ver tu lista de API habilitadas, realiza lo siguiente:

1. Ingresa a Google API Console.
2. Haz clic en el botón Select a project, luego selecciona el mismo proyecto que configuraste para la Google Maps JavaScript API y haz clic en Open.
3. En la lista de API del Panel de control, busca Google Maps Directions API.
4. Si ves la API en la lista, no necesitas hacer nada más. Si la API no está en la lista, habilítala:
   1. En la parte superior de la página, selecciona ENABLE API para mostrar la pestaña Library. Como alternativa, en el menú lateral izquierdo, selecciona Library.
   2. Busca Google Maps Directions API y luego selecciónala en la lista de resultados.
   3. Selecciona ENABLE. Cuando finalice el proceso, Google Maps Directions API aparecerá en la lista de API del Panel de control.

Límites y políticas de uso

Cuotas

Los siguientes límites de uso se encuentran en vigencia para el servicio de indicaciones:

Uso del servicio de indicaciones con el plan estándar

• 2500 solicitudes gratis por día, calculadas como la suma de las consultas del cliente y el servidor; habilitar facturación para acceder a las cuotas diarias por un costo de USD 0.50 cada 1000 solicitudes adicionales, hasta 100 000 solicitudes diarias.
• Hasta 23 waypoints por solicitud, más el origen y el destino.
• 50 solicitudes por segundo, calculadas como la suma de las consultas del cliente y el servidor.

Uso del servicio de indicaciones con el plan premium

• Cuota gratuita diaria compartida de 100 000 solicitudes cada 24 horas; las solicitudes adicionales se cargarán a la compra anual de créditos de Maps API..
• Hasta 23 waypoints permitidos por cada solicitud, más el origen y el destino.
• Ilimitado solicitudes del cliente por segundo, por proyecto. Ten en cuenta que la API del servidor tiene una cantidad límite de 50 solicitudes por segundo.

Políticas

El uso del servicio de indicaciones debe cumplir con las políticas que se describen para la Google Maps Directions API.

Solicitudes de indicaciones

El acceso al servicio de indicaciones es asincrónico, ya que la Google Maps API debe realizar una llamada a un servidor externo. Por esta razón, debes pasar un método callback para la ejecución al completarse la solicitud. Este método callback debe procesar los resultados. Ten en cuenta que el servicio de indicaciones puede devolver más de un itinerario posible como un conjunto de routes[] separadas.

Para usar las indicaciones de la Google Maps JavaScript API, crea un objeto del tipo DirectionsService, llama a DirectionsService.route() para iniciar una solicitud dirigida al servicio de indicaciones y pásale un literal de objeto DirectionsRequest que contenga los términos introducidos y un método callback para la ejecución al recibir la respuesta.

El literal de objeto DirectionsRequest contiene los siguientes campos:

{
  origin: LatLng | String | google.maps.Place,
  destination: LatLng | String | google.maps.Place,
  travelMode: TravelMode,
  transitOptions: TransitOptions,
  drivingOptions: DrivingOptions,
  unitSystem: UnitSystem,
  waypoints[]: DirectionsWaypoint,
  optimizeWaypoints: Boolean,
  provideRouteAlternatives: Boolean,
  avoidHighways: Boolean,
  avoidTolls: Boolean,
  region: String
}

Estos campos se explican a continuación:

• origin (obligatorio) especifica la ubicación inicial a partir de la cual deben calcularse las indicaciones. Este valor puede especificarse como un String (p. ej., “Chicago, IL”), un valor LatLng o un objeto google.maps.Place. Si usas un objeto google.maps.Place, puedes especificar un id. de sitio, una cadena de consulta o una ubicación LatLng. Puedes recuperar id. de sitios de los servicios de geocodificación, búsqueda de sitios y Autocompletado de sitios, en la Google Maps JavaScript API. Para hallar un ejemplo en el que se usen los id. de sitio del servicio de autocompletado de sitios, consulta Autocompletado de sitios e indicaciones.
• destination (obligatorio) especifica la ubicación final para la cual deben calcularse las indicaciones. Las opciones son las mismas que para el campo origin descrito antes.
• travelMode (obligatorio) especifica el modo de transporte que debe usarse al calcular indicaciones. En Modos de viaje, a continuación, se especifican valores válidos
• transitOptions (opcional) especifica valores que se aplican solo a solicitudes en las cuales travelMode es TRANSIT. En Opciones de transporte, a continuación, se describen valores válidos.
• drivingOptions (opcional) especifica valores que se aplican solo a solicitudes en las que travelMode es DRIVING. En Opciones de manejo, a continuación, se describen valores válidos.

• unitSystem (opcional) especifica el sistema de unidades que debe usarse al mostrar resultados. En Sistemas de unidades, a continuación, se especifican valores válidos

• waypoints[] (opcional) especifica un conjunto de DirectionsWaypoint. Los waypoints modifican un trayecto haciendo que pase por las ubicaciones especificadas. Un waypoint se especifica como un literal de objeto con los campos que se muestran a continuación:

  • location especifica la ubicación del waypoint, como un LatLng, un objeto google.maps.Place o un String que llevará geocodificación.
  • stopover es un booleano que indica que el waypoint es un punto de detención en la ruta, el cual tiene el efecto de dividirla en dos.

  (Para obtener más información sobre waypoints, consulta Cómo usar waypoints en rutas a continuación).

• optimizeWaypoints (opcional) especifica que la ruta en la que se usan los waypoints proporcionados puede optimizarse si se ordenan estos waypoints con mayor eficacia. Si el valor es true, el servicio de indicaciones devolverá los waypoints reordenados en un campo waypoint_order field. (Para obtener más información, consulta Cómo usar waypoints en rutas a continuación).
• provideRouteAlternatives (opcional), cuando se fija en el valor true, especifica que el servicio de indicaciones puede proporcionar más de una ruta alternativa en la respuesta. Ten en cuenta que proporcionar rutas alternativas puede aumentar el tiempo de respuesta del servidor.
• avoidHighways (opcional), cuando se fija en el valor true, indica que las rutas calculadas deben evitar carreteras principales, si es posible.
• avoidTolls (opcional), cuando se fija en el valor true, indica que las rutas calculadas deben evitar carreteras con peajes, si es posible.
• region (opcional) especifica el código de región, establecido como un valor ccTLD (“dominio de nivel superior”) de dos caracteres. (Para obtener más información, consulta Restricción por región a continuación).

A continuación, se muestra un ejemplo de DirectionsRequest:

{
  origin: 'Chicago, IL',
  destination: 'Los Angeles, CA',
  waypoints: [
    {
      location: 'Joplin, MO',
      stopover: false
    },{
      location: 'Oklahoma City, OK',
      stopover: true
    }],
  provideRouteAlternatives: false,
  travelMode: 'DRIVING',
  drivingOptions: {
    departureTime: new Date(/* now, or future date */),
    trafficModel: 'pessimistic'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}

Modos de viaje

Al calcular indicaciones, debes especificar el modo de transporte que se usará. Actualmente, se admiten los siguientes modos de viaje:

• DRIVING (predeterminado) establece indicaciones de manejo estándar por la red de carreteras.
• BICYCLING solicita indicaciones para el traslado en bicicleta por ciclovías y calles preferidas.
• TRANSIT solicita indicaciones por rutas de transporte público.
• WALKING solicita indicaciones de traslado a pie por sendas peatonales y veredas.

Consulta los datos de cobertura de Google Maps para determinar el punto hasta el cual un país admite indicaciones. Si solicitas indicaciones para una región en la cual el tipo de indicaciones en cuestión no está disponible, en la respuesta se devolverá DirectionsStatus="ZERO_RESULTS".

Es posible que en las indicaciones de traslado a pie no se incluyan sendas peatonales. Para estas indicaciones se devolverán, en el DirectionsResult, advertencias que debes mostrar si no usas el DirectionsRenderer predeterminado.

Opciones de transporte

Las opciones disponibles para una solicitud de indicaciones varían según el modo de viaje. Al solicitar indicaciones de transporte, se ignorarán las opciones avoidHighways, avoidTolls, waypoints[] y optimizeWaypoints. Puedes precisar opciones de rutas específicas para transportes a través del literal de objeto TransitOptions.

Las indicaciones de transporte están sujetas a la hora. Solo se devolverán para horas futuras.

El literal de objeto TransitOptions contiene los siguientes campos:

{
  arrivalTime: Date,
  departureTime: Date,
  modes[]: TransitMode,
  routingPreference: TransitRoutePreference
}

Estos campos se explican a continuación:

• arrivalTime (opcional) especifica la hora de llegada deseada como un objeto Date. Si se especifica la hora de llegada, se ignora la hora de partida.
• departureTime (opcional) especifica la hora de partida deseada como un objeto Date. Se ignorará departureTime si se especifica arrivalTime. El valor predeterminado es este momento (es decir, la hora actual) si no se especifican valores para departureTime o arrivalTime.
• modes[] (opcional) es un conjunto que contiene uno o más literales de objeto TransitMode. Este campo solo puede incluirse si en la solicitud se incluye una clave de API. En cada TransitMode se especifica un modo de transporte preferido. Se permiten los siguientes valores:
  • BUS indica que, para la ruta calculada, debe priorizarse el transporte en autobús.
  • RAIL indica que, para la ruta calculada, debe priorizarse el transporte en tren, tranvía, tren ligero y subterráneo.
  • SUBWAY indica que, para la ruta calculada, debe priorizarse el transporte en subterráneo.
  • TRAIN indica que, para la ruta calculada, debe priorizarse el transporte en tren.
  • TRAM indica que, para la ruta calculada, debe priorizarse el transporte en tranvía y tren ligero.
• routingPreference (opcional) especifica preferencias para rutas de transporte. Con esta opción, puedes restringir las opciones devueltas en lugar de aceptar la mejor ruta predeterminada seleccionada por la API. Este campo solo puede especificarse si en la solicitud se incluye una clave de API. Se permiten los siguientes valores:
  • FEWER_TRANSFERS indica que, para la ruta calculada, se debe preferir una cantidad limitada de transbordos.
  • LESS_WALKING indica que, para la ruta calculada, se deben preferir traslados a pie limitados.

A continuación, se muestra un ejemplo de DirectionsRequest mediante transporte:

{
  origin: 'Hoboken NJ',
  destination: 'Carroll Gardens, Brooklyn',
  travelMode: 'TRANSIT',
  transitOptions: {
    departureTime: new Date(1337675679473),
    modes: ['BUS'],
    routingPreference: 'FEWER_TRANSFERS'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}

Opciones de manejo

Puedes especificar opciones de rutas para indicaciones de manejo a través del objeto DrivingOptions. Debes proporcionar un id. de cliente de Google Maps APIs Premium Plan al cargar la API si deseas incluir un campo drivingOptions en DirectionsRequest.

El objeto DrivingOptions contiene los siguientes campos:

{
  departureTime: Date,
  trafficModel: TrafficModel
}

Estos campos se explican a continuación:

• departureTime (obligatorio para que el literal de objeto drivingOptions sea válido) especifica la hora de partida deseada como un objeto Date. El valor debe fijarse en la hora actual o en una hora futura determinada. No puede ser un horario pasado. (La API convierte todas las fechas al parámetro UTC para garantizar un manejo uniforme en todas las zonas horarias). Para los clientes de Google Maps APIs Premium Plan, si incluyes departureTime en la solicitud, la API devuelve la mejor ruta conforme a las condiciones de tráfico que se esperan en el horario en cuestión e incluye la hora prevista con tráfico (duration_in_traffic) en la respuesta. Si no especificas una hora de partida (es decir, si en la solicitud no se incluye drivingOptions), se devolverá una ruta generalmente recomendada sin considerar las condiciones del tráfico.
• trafficModel (opcional) especifica las suposiciones que deben aplicarse al calcular el tiempo con tráfico. Esta configuración afecta el valor devuelto en el campo duration_in_traffic en la respuesta, que contiene el tiempo previsto en el tráfico según promedios históricos. El valor predeterminado es bestguess. Se permiten los siguientes valores:
  • bestguess (predeterminado) indica que el valor duration_in_traffic devuelto debe ser el mejor cálculo en términos de tiempo de viaje a partir de lo que se conoce sobre las condiciones históricas del tráfico y el tráfico en tiempo real. Cuanto más se acerque departureTime al valor presente, mayor importancia cobrará el tráfico en tiempo real...
  • pessimistic indica que el valor duration_in_traffic devuelto debe ser superior al tiempo de viaje real en la mayoría de los días. Sin embargo, este valor puede ser inferior al tiempo de viaje real en ciertos días en que las condiciones de tráfico son particularmente desfavorables.
  • optimistic indica que el valor duration_in_traffic devuelto debe ser inferior al del tiempo de viaje real en la mayoría de los días. Sin embargo, este valor puede ser superior al tiempo de viaje real en ciertos días en que las condiciones de tráfico son particularmente favorables.

A continuación, se muestra un ejemplo de DirectionsRequest para indicaciones de manejo:

{
  origin: 'Chicago, IL',
  destination: 'Los Angeles, CA',
  travelMode: 'DRIVING',
  drivingOptions: {
    departureTime: new Date(Date.now() + N),  // for the time N milliseconds from now.
    trafficModel: 'optimistic'
  }
}

Sistemas de unidades

De manera predeterminada, las indicaciones se calculan y muestran mediante el sistema de unidades del país o la región del origen. (Nota: Los orígenes expresados con coordenadas de latitud y longitud en lugar de direcciones siempre aparecen en unidades métricas de manera predeterminada). Por ejemplo, para una ruta de “Chicago, IL” a “Toronto, ONT” los resultados se mostrarán en millas, mientras que para la ruta inversa se mostrarán en kilómetros. Puedes invalidar este sistema de unidades configurando uno explícitamente en la solicitud con uno de los siguientes valores UnitSystem:

• UnitSystem.METRIC especifica el uso del sistema métrico. Las distancias se muestran en kilómetros.
• UnitSystem.IMPERIAL especifica el uso del sistema imperial (inglés). Las distancias se muestran en kilómetros.

Nota: esta configuración del sistema de unidades solo tiene efecto sobre el texto que se muestra al usuario. El resultado de las indicaciones también contiene valores de distancia, que no se muestran al usuario y siempre se expresan en metros.

Restricción de regiones para indicaciones

El servicio de indicaciones de la Google Maps API devuelve resultados de direcciones afectados por el dominio (región o país) del que cargaste el arranque de JavaScript. (Debido a que la mayoría de los usuarios cargan https://maps.google.com/, esto establece un dominio implícito en Estados Unidos). Si cargas el arranque de un dominio admitido diferente, obtendrás resultados afectados por ese dominio. Por ejemplo, es posible que de las búsquedas que incluyan “San Francisco” surjan diferentes resultados en aplicaciones en las cuales se cargue https://maps.google.com/ (Estados Unidos) y http://maps.google.es/ (España).

También puedes configurar el servicio de indicaciones para que devuelva resultados restringidos a una región en particular usando el parámetro region. Este parámetro toma un código de región, especificado como una subetiqueta region en lenguaje IANA. En la mayoría de los casos, estas etiquetas realizan asignaciones directas a valores de ccTLD (“dominio de nivel superior”) de dos caracteres como, por ejemplo, “uk” en “co.uk”. En algunos casos, la etiqueta region también admite códigos ISO-3166-1, que a veces difieren de los valores ccTLD (por ejemplo, “GB” por “Gran Bretaña”).

Consulta los datos de cobertura de Google Maps para determinar el punto hasta el cual un país admite indicaciones.

Representación de indicaciones

Si se desea iniciar una solicitud de indicaciones para DirectionsService con el método route(), es necesario pasar un callback que se ejecute al completarse la solicitud de servicio. Este callback devolverá un DirectionsResult y un código DirectionsStatus en la respuesta.

Solicitud de estado of indicaciones

DirectionsStatus puede devolver los siguientes valores:

• OK indica que la respuesta contiene un DirectionsResult válido.
• NOT_FOUND indica que no se pudo geocodificar al menos a una de las ubicaciones especificadas en el origen, el destino o los waypoints de la solicitud.
• ZERO_RESULTS indica que no fue posible hallar una ruta entre el origen y el destino.
• MAX_WAYPOINTS_EXCEEDED indica que se proporcionaron demasiados campos DirectionsWaypoint en DirectionsRequest. Consulta la sección sobre límites de waypoints más adelante.
• INVALID_REQUEST indica que el DirectionsRequest proporcionado no fue válido. Estos códigos de error se deben con mayor frecuencia a la falta un origen o un destino en las solicitudes, o bien a la inclusión de waypoints en las mismas.
• OVER_QUERY_LIMIT indica que la página web ha enviado demasiadas solicitudes dentro del período de tiempo permitido.
• REQUEST_DENIED indica que la página web no puede usar el servicio de indicaciones.
• UNKNOWN_ERROR indica que no se pudo procesar una solicitud de indicaciones debido a un error en el servidor. La solicitud puede tener éxito si realizas un nuevo intento.

Debes asegurarte de que la solicitud de indicaciones devuelva resultados válidos verificando este valor antes de procesar el resultado.

Visualización de DirectionsResult

DirectionsResult contiene el resultado de la solicitud de indicaciones. Puedes administrarlo por ti mismo o pasarlo a un objeto DirectionsRenderer, el cual puede administrar en forma automática la visualización de dicho resultado en un mapa.

Para visualizar un DirectionsResult usando un DirectionsRenderer, simplemente debes hacer lo siguiente:

1. Crea un objeto DirectionsRenderer.
2. Llama a setMap() en el representador para vincularlo al mapa transferido.
3. Llama a setDirections() en el representador y pásale el DirectionsResult, como se indicó antes. Debido a que el representador es un MVCObject, detectará en forma automática los cambios realizados en sus propiedades y actualizará el mapa cuando sus indicaciones asociadas se hayan modificado.

En el ejemplo siguiente se calculan indicaciones entre dos ubicaciones de la ruta 66, donde el origen y el destino se configuran a través de los valores "start" y "end" en las listas desplegables. DirectionsRenderer administra la visualización de la polilínea entre las ubicaciones indicadas y la disposición de marcadores en el origen, el destino y los waypoints, si corresponde.

var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;

function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  var mapOptions = {
    zoom:7,
    center: chicago
  }
  map = new google.maps.Map(document.getElementById('map'), mapOptions);
  directionsDisplay.setMap(map);
}

function calcRoute() {
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  var request = {
    origin: start,
    destination: end,
    travelMode: 'DRIVING'
  };
  directionsService.route(request, function(result, status) {
    if (status == 'OK') {
      directionsDisplay.setDirections(result);
    }
  });
}

En el cuerpo HTML:

<div>
<strong>Start: </strong>
<select id="start" onchange="calcRoute();">
  <option value="chicago, il">Chicago</option>
  <option value="st louis, mo">St Louis</option>
  <option value="joplin, mo">Joplin, MO</option>
  <option value="oklahoma city, ok">Oklahoma City</option>
  <option value="amarillo, tx">Amarillo</option>
  <option value="gallup, nm">Gallup, NM</option>
  <option value="flagstaff, az">Flagstaff, AZ</option>
  <option value="winona, az">Winona</option>
  <option value="kingman, az">Kingman</option>
  <option value="barstow, ca">Barstow</option>
  <option value="san bernardino, ca">San Bernardino</option>
  <option value="los angeles, ca">Los Angeles</option>
</select>
<strong>End: </strong>
<select id="end" onchange="calcRoute();">
  <option value="chicago, il">Chicago</option>
  <option value="st louis, mo">St Louis</option>
  <option value="joplin, mo">Joplin, MO</option>
  <option value="oklahoma city, ok">Oklahoma City</option>
  <option value="amarillo, tx">Amarillo</option>
  <option value="gallup, nm">Gallup, NM</option>
  <option value="flagstaff, az">Flagstaff, AZ</option>
  <option value="winona, az">Winona</option>
  <option value="kingman, az">Kingman</option>
  <option value="barstow, ca">Barstow</option>
  <option value="san bernardino, ca">San Bernardino</option>
  <option value="los angeles, ca">Los Angeles</option>
</select>
</div>

Ver el ejemplo (directions-simple.html)

En el ejemplo siguiente se muestran indicaciones en las que se usan diferentes modos de traslado entre Haight-Ashbury y Ocean Beach, en San Francisco, CA:

var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var haight = new google.maps.LatLng(37.7699298, -122.4469157);
var oceanBeach = new google.maps.LatLng(37.7683909618184, -122.51089453697205);

function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var mapOptions = {
    zoom: 14,
    center: haight
  }
  map = new google.maps.Map(document.getElementById('map'), mapOptions);
  directionsDisplay.setMap(map);
}

function calcRoute() {
  var selectedMode = document.getElementById('mode').value;
  var request = {
      origin: haight,
      destination: oceanBeach,
      // Note that Javascript allows us to access the constant
      // using square brackets and a string value as its
      // "property."
      travelMode: google.maps.TravelMode[selectedMode]
  };
  directionsService.route(request, function(response, status) {
    if (status == 'OK') {
      directionsDisplay.setDirections(response);
    }
  });
}

En el cuerpo HTML:

<div>
<strong>Mode of Travel: </strong>
<select id="mode" onchange="calcRoute();">
  <option value="DRIVING">Driving</option>
  <option value="WALKING">Walking</option>
  <option value="BICYCLING">Bicycling</option>
  <option value="TRANSIT">Transit</option>
</select>
</div>

Ver el ejemplo (directions-travel-modes.html)

DirectionsRenderer no solo administra la visualización de la polilínea y de cualquier marcador asociado, sino también la visualización textual de indicaciones como series de pasos. Para hacerlo, simplemente llama a setPanel() en tu DirectionsRenderer y pásale el <div> en el cual debe mostrarse esta información. Al hacerse esto, también se garantiza la visualización de información sobre derechos de autor y de advertencias que pueden asociarse con el resultado.

Se proporcionarán indicaciones textuales en las que se usará la configuración de idioma preferida del navegador o el idioma especificado al cargar el código de JavaScript de la API mediante el parámetro language. (Para obtener más información, consulta Localización). En el caso de las indicaciones de transporte, el tiempo aparecerá en la zona horaria de la parada de transporte.

El siguiente ejemplo es idéntico al que se muestra antes, pero en él se incluye un panel <div> en el que deben mostrarse las indicaciones:

var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;

function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  var mapOptions = {
    zoom:7,
    center: chicago
  }
  map = new google.maps.Map(document.getElementById('map'), mapOptions);
  directionsDisplay.setMap(map);
  directionsDisplay.setPanel(document.getElementById('directionsPanel'));
}

function calcRoute() {
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  var request = {
    origin:start,
    destination:end,
    travelMode: 'DRIVING'
  };
  directionsService.route(request, function(response, status) {
    if (status == 'OK') {
      directionsDisplay.setDirections(response);
    }
  });
}

En el cuerpo HTML:

<div id="map" style="float:left;width:70%; height:100%"></div>
<div id="directionsPanel" style="float:right;width:30%;height 100%"></div>

Ver el ejemplo (directions-panel.html)

El objeto DirectionsResult

Al enviar solicitudes de indicaciones a DirectionsService, se recibe una respuesta que consta de un código de estado y un resultado, que es un objeto DirectionsResult. DirectionsResult es un literal de objeto que tiene los siguientes campos:

• geocoded_waypoints[] contiene un conjunto de objetos DirectionsGeocodedWaypoint, y cada uno de ellos contiene información detallada acerca de la geocodificación del origen, del destino y de los waypoints.
• routes[] contiene un conjunto de objetos DirectionsRoute. Cada ruta indica una manera de ir del origen al destino proporcionado en el objeto DirectionsRequest. En general, solo se devuelve una ruta para una solicitud determinada a menos que el valor establecido del campo provideRouteAlternatives de dicha solicitud sea true, en cuyo caso pueden devolverse varias rutas.

Waypoints con geocodificación para indicaciones

Un DirectionsGeocodedWaypoint contiene información detallada acerca de la geocodificación del origen, del destino y de los waypoints.

DirectionsGeocodedWaypoint es un literal de objeto que tiene los siguientes campos:

• geocoder_status indica el código de estado que se genera a partir de la operación de geocodificación. Este campo puede contener los siguientes valores:
  • "OK" indica que no ocurrieron errores, que la dirección se analizó correctamente y que se devolvió al menos un geocódigo.
  • ZERO_RESULTS indica que el geocódigo fue exitoso, pero no devolvió resultados. Esto puede ocurrir si se pasa un valor address inexistente al geocodificador.

• partial_match indica que el geocodificador no devolvió una coincidencia exacta para la solicitud original, aunque sí pudo establecer una coincidencia parcial para la dirección solicitada. Te recomendamos que examines la solicitud original para comprobar que no haya errores ortográficos y que la dirección no esté incompleta.

  Las coincidencias parciales generalmente ocurren cuando las direcciones que pasaste en la solicitud no existen en la localidad. También se pueden devolver coincidencias parciales cuando una solicitud coincide con dos o más ubicaciones en la misma localidad. Por ejemplo, "21 Henr St, Bristol, UK" devolverá una coincidencia parcial para Henry Street y Henrietta Street. Ten en cuenta que si una solicitud incluye una dirección con un componente que contiene errores ortográficos, el servicio de geocodificación puede sugerir una dirección alternativa. Las sugerencias propuestas de esta manera también se marcarán como una coincidencia parcial.

• place_id es un identificador único para un sitio, que puede usarse con otras API de Google. Por ejemplo, puedes usar place_id con la biblioteca de laGoogle Places API para obtener información detallada de un negocio local, como un número de teléfono, el horario de apertura, reseñas de usuarios y más. Consulta la información general sobre id. de sitio.
• types[] es un conjunto que indica el tipo del resultado devuelto. Esta matriz contiene un grupo de cero o más etiquetas que identifican el tipo de función devuelto en el resultado. Por ejemplo, para un geocódigo “Chicago”, se devuelve “localidad”, que indica que “Chicago” es una ciudad, y también se devuelve “político”, que indica que se trata de una entidad política.

Rutas de indicaciones

El objeto heredado DirectionsTrip lleva el nuevo nombre DirectionsRoute. Ten en cuenta que en una ruta actualmente se hace referencia a todo el viaje, de principio a fin, y no simplemente a una etapa de su totalidad.

El objeto DirectionsRoute contiene un único resultado del origen y el destino especificados. Esta ruta puede constar de una o más etapas (del tipo DirectionsLeg) según se especifiquen o no waypoints. Además, la ruta también contiene información sobre derechos de autor y advertencias que debe mostrarse al usuario junto con la información de ruta.

DirectionsRoute es un literal de objeto que tiene los siguientes campos:

• legs[] contiene un conjunto de objetos DirectionsLeg y cada uno estos contiene información sobre la etapa de la ruta, a partir de dos ubicaciones dentro de la ruta. Habrá una etapa separada para cada waypoint o destino especificado. (Una ruta sin waypoints contendrá exactamente un DirectionsLeg.) Cada etapa consta de una serie de objetos DirectionStep.
• waypoint_order contiene una matriz que indica el orden de los waypoints en la ruta calculada. Este conjunto puede contener un orden modificado si al DirectionsRequest se le transfirió optimizeWaypoints: true.
• overview_path contiene un conjunto de objetos LatLng que representan una ruta aproximada (unificada) a partir de las indicaciones resultantes.
• overview_polyline contiene un único objeto points que tiene una representación de polilínea codificada de la ruta. Esta polilínea es una ruta aproximada (unificada) a partir de las indicaciones resultantes.
• bounds contiene un objeto LatLngBounds que indica los límites de la polilínea a lo largo de esta ruta.
• copyrights contiene el texto sobre derechos de autor que debe mostrarse para esta ruta.
• warnings[] contiene una matriz de advertencias que deben exhibirse al mostrar estas indicaciones. Si no usas el objeto DirectionsRenderer proporcionado, debes administrar y mostrar estas advertencias por tu cuenta.
• fare contiene los gastos totales (es decir, los costos totales de los tiques) de esta ruta. Esta propiedad se devuelve únicamente para solicitudes de transporte y en el caso de rutas, cuando se encuentre disponible información sobre costos para todas las etapas del recorrido. La información incluye lo siguiente:
  • currency: código de moneda ISO 4217 que indica la divisa en la cual se expresa el monto.
  • value: monto total expresado en la moneda antes especificada.

Etapas de las indicaciones

El objeto heredado DirectionsRoute lleva el nuevo nombre DirectionsLeg.

Un elemento DirectionsLeg define una única etapa de un viaje desde el origen hasta el destino en la ruta calculada. Las rutas que no contienen waypoints consisten en una única “etapa”, pero aquellas en las que se definen uno o más waypoints consisten en una o más etapas, correspondientes a las etapas específicas del viaje.

DirectionsLeg es un literal de objeto que tiene los siguientes campos:

• steps[] contiene un conjunto de objetos DirectionsStep que designan información sobre cada paso separado de la etapa del viaje.

• distance indica la distancia total que se abarca en esta etapa, como un objeto Distance con la siguiente forma:

  • value indica la distancia en metros.
  • text contiene una representación de cadena de la distancia, que se muestra de manera predeterminada en las unidades usadas en el origen. (Por ejemplo, se usarán millas para cualquier origen dentro de Estados Unidos). Puedes invalidar este sistema de unidades configurando de manera específica un objeto UnitSystem en la consulta original. Ten en cuenta que el campo distance.value siempre contiene un valor expresado en metros, independientemente del sistema de unidades que uses.

  Estos campos pueden ser indefinidos si se desconoce la distancia.

• duration indica la duración total de esta etapa, como un objeto Duration con la siguiente forma:

  • value indica la duración en segundos.
  • text contiene una representación de cadena de la duración.

  Estos campos pueden ser indefinidos si se desconoce la duración.

• duration_in_traffic indica la duración total de esta etapa teniendo en cuenta las condiciones actuales del tráfico. duration_in_traffic solo se devuelve si todos los siguientes enunciados son verdaderos:

  • La solicitud incluye un ID de cliente de Google Maps APIs Premium Plan válido.
  • La solicitud no incluye waypoints de parada. Es decir, no incluye waypoints con stopover igual a true.
  • La solicitud es específica para indicaciones de manejo; mode está configurado en el valor driving.
  • departureTime se incluye como parte del campo drivingOptions en la solicitud.
  • Las condiciones del tráfico están disponibles para la ruta solicitada.

  duration_in_traffic contiene los siguientes campos:

  • value indica la duración en segundos.
  • text contiene una representación de la duración en lenguaje natural.
• arrival_time contiene la hora estimada de llegada para esta etapa. Esta propiedad solo se devuelve para indicaciones de transporte. El resultado se devuelve como un objeto Time con tres propiedades:
  • value contiene la hora especificada como objeto Date de JavaScript.
  • text contiene la hora especificada como cadena. La hora se muestra en la zona horaria de la parada de transporte.
  • time_zone contiene la zona horaria de esta estación. El valor es el nombre de la zona horaria tal como se define en la base de datos de zonas horarias de la IANA; p. ej., “America/New_York”.
• departure_time contiene la hora estimada de partida para esta etapa, especificada como un objeto Time. departure_time solo está disponible para indicaciones de transporte.
• start_location contiene el objeto LatLng del origen de esta etapa. Debido a que el servicio web de indicaciones calcula indicaciones entre ubicaciones usando la opción de transporte más cercana (generalmente, una carretera) en los puntos de partida y llegada, es posible que start_location se diferencie del origen proporcionado de esta etapa si, por ejemplo, no hay una carretera cerca del origen.
• end_location contiene el objeto LatLng del destino de esta etapa. Debido a que DirectionsService calcula indicaciones entre ubicaciones usando la opción de transporte más cercana (generalmente, una carretera) en los puntos de partida y llegada, es posible que end_location se diferencie del destino proporcionado de esta etapa si, por ejemplo, no hay una carretera cerca del destino.
• start_address contiene la dirección en lenguaje natural (normalmente, una dirección) del punto de partida de esta etapa.
• end_address contiene la dirección en lenguaje natural (normalmente, una dirección) del punto de llegada de esta etapa.

Pasos de indicaciones

Un objeto DirectionsStep es la unidad más pequeña de la ruta de una dirección, y contiene un único paso en el que se describe una instrucción específica y única del viaje. P. ej., “Doble a la izquierda en la calle 4, hacia el oeste”. En el paso no solo se describe la instrucción, sino también se incluye información sobre distancia y duración relacionada con la vinculación que este paso tiene con el siguiente. Por ejemplo, un paso indicado como “Tome la I-80 hacia el oeste” puede contener una duración de “37 millas” y “40 minutos”, que indica que el paso siguiente se encuentra a 37 millas o 40 minutos del paso actual.

Al usar el servicio de indicaciones para buscar indicaciones de transporte, en el conjunto de pasos se incluirá información específica sobre el transporte bajo la forma de un objeto transit. Si en las indicaciones se incluyen varios modos de transporte, se proporcionarán indicaciones detalladas relacionadas con pasos para el desplazamiento a pie o la conducción en un conjunto steps[]. Por ejemplo, en un paso para el desplazamiento a pie se incluirán indicaciones de las ubicaciones de partida y llegada: “Camine hasta la avenida Innes y la calle Fitch”. En ese paso se incluirán indicaciones detalladas de desplazamiento a pie para la ruta en el conjunto steps[], como las siguientes: “Diríjase hacia el noroeste”, “Doble a la izquierda en Arelious Walker” y “Doble a la izquierda en la avenida Innes”.

DirectionsStep es un literal de objeto que tiene los siguientes campos:

• instructions contiene instrucciones para este paso dentro de una cadena de texto.
• distance contiene la distancia que abarca este paso hasta el siguiente, como un objeto Distance. (Consulta la descripción de DirectionsLeg, arriba). Este campo puede no especificarse si se desconoce la distancia.
• duration contiene un cálculo del tiempo necesario para realizar el paso, hasta llegar al siguiente, como un objeto Duration. (Consulta la descripción de DirectionsLeg, arriba). Este campo puede no especificarse si se desconoce la duración.
• start_location contiene el objeto LatLng con geocodificación punto de partida de este paso.
• end_location contiene el objeto LatLng del punto de llegada de este paso.
• polyline contiene un único objeto points que tiene una representación de polilínea codificada del paso. Esta polilínea es una ruta aproximada (unificada) del paso.
• steps[] contiene un literal de objeto DirectionsStep que tiene indicaciones detalladas relacionadas con pasos para el desplazamiento a pie o la conducción en indicaciones de transporte. Solo hay subpasos disponibles para indicaciones de transporte.
• travel_mode contiene el objeto TravelMode empleado en este paso. En las indicaciones de transporte se puede incluir una combinación de indicaciones para el desplazamiento a pie y en transporte.
• path contiene un conjunto de LatLngs en el que se describe el recorrido de este paso.
• transit contiene información específica sobre el transporte, como los horarios de llegada y partida, y el nombre de la línea de transporte.

Información específica sobre el transporte

Las indicaciones de tránsito devuelven información adicional que no es relevante para otros modos de transporte. Estas propiedades adicionales se exhiben a través del objeto TransitDetails, el cual se devuelve como una propiedad de DirectionsStep. A partir del objeto TransitDetails, puedes acceder a información adicional para los objetos TransitStop, TransitLine, TransitAgency y VehicleType, como se describe a continuación.

Detalles sobre el transporte

El objeto TransitDetails exhibe las siguientes propiedades:

• arrival_stop contiene un objeto TransitStop que representa la estación o parada de llegada con las siguientes propiedades:
  • name el nombre de la estación/parada de transporte. P. ej., “Union Square”.
  • location contiene la ubicación de la estación o parada de transporte, como un objeto LatLng.
• departure_stop contiene un objeto TransitStop que representa la estación o parada de partida.
• arrival_time contiene la hora de llegada, especificada como un objeto Time con tres propiedades:
  • value contiene la hora especificada como objeto Date de JavaScript.
  • text contiene la hora especificada como cadena. La hora se muestra en la zona horaria de la parada de transporte.
  • time_zone contiene la zona horaria de esta estación. El valor es el nombre de la zona horaria tal como se define en la base de datos de zonas horarias de la IANA; p. ej., “America/New_York”.
• departure_time contiene la hora de partida, especificada como un objeto Time.
• headsign especifica la dirección en la cual se debe viajar en esta línea, según se marca en el vehículo o la parada de partida. A menudo, será la estación terminal.
• headway cuando está disponible, especifica los segundos que se esperan entre partidas de la misma parada en el momento. Por ejemplo, con un valor headway de 600, se debe prever una espera de diez minutos en caso de perder un autobús.
• line contiene un literal de objeto TransitLine que contiene información sobre la línea de transporte usada en este paso. TransitLine proporciona el nombre y el operador de la línea junto con otras propiedades descritas en la documentación de referencia de TransitLine.
• num_stops contiene el número de paradas de este paso. Incluye la parada de llegada, pero no la de partida. Por ejemplo, si en las indicaciones se incluye partir de la parada A, pasar por las paradas B y C, y llegar a la parada D, el valor devuelto por num_stops será 3.

Línea de transporte

El objeto TransitLine exhibe las siguientes propiedades:

• name contiene el nombre completo de esta línea de transporte. Por ejemplo, “7 Avenue Express” o “14th St Crosstown”.
• short_name contiene el nombre abreviado de esta línea de transporte. Normalmente, será el nombre de una línea, como "2” o “M14”.
• agencies contiene un conjunto del tipo TransitAgency. Cada objeto TransitAgency proporciona información sobre el operador de esta línea, incluidas las siguientes propiedades:
  • name contiene el nombre de la agencia de transporte.
  • url contiene la URL de la agencia de transporte.
  • phone contiene el número de teléfono de la agencia de transporte.

  Si representas indicaciones de tránsito manualmente en lugar de usar el objeto DirectionsRenderer, debes mostrar los nombres y las URL de las agencias de transporte que ofrecen los servicios de los resultados.

• url contiene una URL de esta línea de transporte proporcionada por la agencia de transporte.
• icon contiene una URL para el icono asociado con esta línea. La mayoría de las ciudades usan iconos genéricos que varían según el tipo de vehículo. Para algunas líneas de transporte, como el sistema de subterráneos de Nueva York, hay iconos específicos.
• color contiene el color que comúnmente se usa en la señalización del transporte en cuestión. El color se especificará como una cadena hexadecimal; por ejemplo: #FF0033.
• text_color contiene el color de texto que comúnmente se usa para la señalización de la línea en cuestión. El color se especificará como una cadena hexadecimal.
• vehicle contiene un objeto Vehicle que incluye las siguientes propiedades:
  • name contiene el nombre del vehículo de esta línea; p. ej., “Subterráneo”.
  • type contiene el tipo de vehículo que se usa en esta línea. Consulta la documentación sobre el tipo de vehículo para obtener una lista completa de los valores admitidos.
  • icon contiene una URL para el icono comúnmente asociado con este tipo de vehículo.
  • local_icon contiene la URL para el ícono asociado con este tipo de vehículo, según la señalización de transporte local.

Tipo de vehículo

El objeto VehicleType exhibe las siguientes propiedades:

Inspección de DirectionsResults

Es posible que los componentes de DirectionsResults (DirectionsRoute, DirectionsLeg, DirectionsStep y TransitDetails) se inspeccionen y se usen al procesar respuestas de indicaciones.

Importante: Si representas indicaciones de tránsito manualmente en lugar de usar el objeto DirectionsRenderer, debes mostrar los nombres y las URL de las agencias de transporte que ofrecen los servicios de los resultados.

En el ejemplo siguiente se representan indicaciones para el desplazamiento a pie hasta atracciones turísticas en Nueva York. Se inspecciona el componente DirectionsStep a fin de agregar marcadores para cada paso, y se adjunta información a un componenteInfoWindow a través de texto instructivo para el paso en cuestión.

Debido a que se calculan indicaciones para el desplazamiento a pie, también se muestran advertencias al usuario en un panel <div> separado.

var map;
var directionsDisplay;
var directionsService;
var stepDisplay;
var markerArray = [];

function initialize() {
  // Instantiate a directions service.
  directionsService = new google.maps.DirectionsService();

  // Create a map and center it on Manhattan.
  var manhattan = new google.maps.LatLng(40.7711329, -73.9741874);
  var mapOptions = {
    zoom: 13,
    center: manhattan
  }
  map = new google.maps.Map(document.getElementById('map'), mapOptions);

  // Create a renderer for directions and bind it to the map.
  var rendererOptions = {
    map: map
  }
  directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions)

  // Instantiate an info window to hold step text.
  stepDisplay = new google.maps.InfoWindow();
}

function calcRoute() {

  // First, clear out any existing markerArray
  // from previous calculations.
  for (i = 0; i < markerArray.length; i++) {
    markerArray[i].setMap(null);
  }

  // Retrieve the start and end locations and create
  // a DirectionsRequest using WALKING directions.
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  var request = {
      origin: start,
      destination: end,
      travelMode: 'WALKING'
  };

  // Route the directions and pass the response to a
  // function to create markers for each step.
  directionsService.route(request, function(response, status) {
    if (status == "OK") {
      var warnings = document.getElementById("warnings_panel");
      warnings.innerHTML = "" + response.routes[0].warnings + "";
      directionsDisplay.setDirections(response);
      showSteps(response);
    }
  });
}

function showSteps(directionResult) {
  // For each step, place a marker, and add the text to the marker's
  // info window. Also attach the marker to an array so we
  // can keep track of it and remove it when calculating new
  // routes.
  var myRoute = directionResult.routes[0].legs[0];

  for (var i = 0; i < myRoute.steps.length; i++) {
      var marker = new google.maps.Marker({
        position: myRoute.steps[i].start_point,
        map: map
      });
      attachInstructionText(marker, myRoute.steps[i].instructions);
      markerArray[i] = marker;
  }
}

function attachInstructionText(marker, text) {
  google.maps.event.addListener(marker, 'click', function() {
    stepDisplay.setContent(text);
    stepDisplay.open(map, marker);
  });
}

En el cuerpo HTML:

<div>
<strong>Start: </strong>
<select id="start">
  <option value="penn station, new york, ny">Penn Station</option>
  <option value="grand central station, new york, ny">Grand Central Station</option>
  <option value="625 8th Avenue New York NY 10018">Port Authority Bus Terminal</option>
  <option value="staten island ferry terminal, new york, ny">Staten Island Ferry Terminal</option>
  <option value="101 E 125th Street, New York, NY">Harlem - 125th St Station</option>
</select>
<strong>End: </strong>
<select id="end" onchange="calcRoute();">
  <option value="260 Broadway New York NY 10007">City Hall</option>
  <option value="W 49th St & 5th Ave, New York, NY 10020">Rockefeller Center</option>
  <option value="moma, New York, NY">MOMA</option>
  <option value="350 5th Ave, New York, NY, 10118">Empire State Building</option>
  <option value="253 West 125th Street, New York, NY">Apollo Theatre</option>
  <option value="1 Wall St, New York, NY">Wall St</option>
</select>
<div>

Ver el ejemplo (directions-complex.html)

Cómo usar waypoints en rutas

Como se mencionó dentro de la DirectionsRequest, también puedes especificar waypoints (del tipo DirectionsWaypoint) al calcular rutas a través del servicio de indicaciones de circulación para desplazarse a pie, en bicicleta o en automóviles. No se admiten waypoints para indicaciones de transporte. Los waypoints te permiten calcular rutas para ubicaciones adicionales, en cuyo caso la ruta devuelta pasa por los waypoints proporcionados.

Un waypoint consta de los siguientes campos:

• location (obligatorio) especifica la dirección del waypoint.
• stopover (opcional) indica si este waypoint es una parada real de la ruta (true) o si, en lugar de ello, se trata solo de una alternativa preferida a la ruta en la ubicación indicada (false). De manera predeterminada, los booleanos stopover son true.

De forma predeterminada, el servicio de indicaciones calcula una ruta a través de los waypoints proporcionados en su respectivo orden. Como alternativa, puedes pasar optimizeWaypoints: true dentro de DirectionsRequest para permitir que el servicio de indicaciones optimice la ruta proporcionada reorganizando los waypoints de manera más eficaz. Esta optimización es una aplicación del problema del viajante. El tiempo de viaje es el factor principal que se optimiza, pero también se pueden considerar otros factores, como la distancia, la cantidad de giros y muchos más, para decidir la ruta más eficiente. Todos los waypoints deben ser stopovers para que el servicio de indicaciones optimice su ruta.

Si introduces en el servicio indicaciones una instrucción para que optimice el orden de sus waypoints, dicho orden se devolverá en el campo waypoint_order dentro del objeto DirectionsResult.

En el ejemplo siguiente se calculan rutas para recorrer Estados Unidos con varios puntos de partida y de llegada, y waypoints. (Para seleccionar varios waypoints, presiona Ctrl+clic al elegir elementos dentro de la lista). Ten en cuenta que se inspeccionan routes.start_address y routes.end_address para que proporcionen el texto del punto de partida y llegada de cada ruta.

function initMap() {
  var directionsService = new google.maps.DirectionsService;
  var directionsDisplay = new google.maps.DirectionsRenderer;
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 6,
    center: {lat: 41.85, lng: -87.65}
  });
  directionsDisplay.setMap(map);

  document.getElementById('submit').addEventListener('click', function() {
    calculateAndDisplayRoute(directionsService, directionsDisplay);
  });
}

function calculateAndDisplayRoute(directionsService, directionsDisplay) {
  var waypts = [];
  var checkboxArray = document.getElementById('waypoints');
  for (var i = 0; i < checkboxArray.length; i++) {
    if (checkboxArray.options[i].selected) {
      waypts.push({
        location: checkboxArray[i].value,
        stopover: true
      });
    }
  }

  directionsService.route({
    origin: document.getElementById('start').value,
    destination: document.getElementById('end').value,
    waypoints: waypts,
    optimizeWaypoints: true,
    travelMode: 'DRIVING'
  }, function(response, status) {
    if (status === 'OK') {
      directionsDisplay.setDirections(response);
      var route = response.routes[0];
      var summaryPanel = document.getElementById('directions-panel');
      summaryPanel.innerHTML = '';
      // For each route, display summary information.
      for (var i = 0; i < route.legs.length; i++) {
        var routeSegment = i + 1;
        summaryPanel.innerHTML += '<b>Route Segment: ' + routeSegment +
            '</b><br>';
        summaryPanel.innerHTML += route.legs[i].start_address + ' to ';
        summaryPanel.innerHTML += route.legs[i].end_address + '<br>';
        summaryPanel.innerHTML += route.legs[i].distance.text + '<br><br>';
      }
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });
}

<div id="map"></div>
<div id="right-panel">
<div>
<b>Start:</b>
<select id="start">
  <option value="Halifax, NS">Halifax, NS</option>
  <option value="Boston, MA">Boston, MA</option>
  <option value="New York, NY">New York, NY</option>
  <option value="Miami, FL">Miami, FL</option>
</select>
<br>
<b>Waypoints:</b> <br>
<i>(Ctrl+Click or Cmd+Click for multiple selection)</i> <br>
<select multiple id="waypoints">
  <option value="montreal, quebec">Montreal, QBC</option>
  <option value="toronto, ont">Toronto, ONT</option>
  <option value="chicago, il">Chicago</option>
  <option value="winnipeg, mb">Winnipeg</option>
  <option value="fargo, nd">Fargo</option>
  <option value="calgary, ab">Calgary</option>
  <option value="spokane, wa">Spokane</option>
</select>
<br>
<b>End:</b>
<select id="end">
  <option value="Vancouver, BC">Vancouver, BC</option>
  <option value="Seattle, WA">Seattle, WA</option>
  <option value="San Francisco, CA">San Francisco, CA</option>
  <option value="Los Angeles, CA">Los Angeles, CA</option>
</select>
<br>
  <input type="submit" id="submit">
</div>
<div id="directions-panel"></div>
</div>

#right-panel {
  font-family: 'Roboto','sans-serif';
  line-height: 30px;
  padding-left: 10px;
}

#right-panel select, #right-panel input {
  font-size: 15px;
}

#right-panel select {
  width: 100%;
}

#right-panel i {
  font-size: 12px;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 100%;
  float: left;
  width: 70%;
  height: 100%;
}
#right-panel {
  margin: 20px;
  border-width: 2px;
  width: 20%;
  height: 400px;
  float: left;
  text-align: left;
  padding-top: 0;
}
#directions-panel {
  margin-top: 10px;
  background-color: #FFEE77;
  padding: 10px;
}

 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

function initMap() {
  var directionsService = new google.maps.DirectionsService;
  var directionsDisplay = new google.maps.DirectionsRenderer;
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 6,
    center: {lat: 41.85, lng: -87.65}
  });
  directionsDisplay.setMap(map);

  document.getElementById('submit').addEventListener('click', function() {
    calculateAndDisplayRoute(directionsService, directionsDisplay);
  });
}

function calculateAndDisplayRoute(directionsService, directionsDisplay) {
  var waypts = [];
  var checkboxArray = document.getElementById('waypoints');
  for (var i = 0; i < checkboxArray.length; i++) {
    if (checkboxArray.options[i].selected) {
      waypts.push({
        location: checkboxArray[i].value,
        stopover: true
      });
    }
  }

  directionsService.route({
    origin: document.getElementById('start').value,
    destination: document.getElementById('end').value,
    waypoints: waypts,
    optimizeWaypoints: true,
    travelMode: 'DRIVING'
  }, function(response, status) {
    if (status === 'OK') {
      directionsDisplay.setDirections(response);
      var route = response.routes[0];
      var summaryPanel = document.getElementById('directions-panel');
      summaryPanel.innerHTML = '';
      // For each route, display summary information.
      for (var i = 0; i < route.legs.length; i++) {
        var routeSegment = i + 1;
        summaryPanel.innerHTML += '<b>Route Segment: ' + routeSegment +
            '</b><br>';
        summaryPanel.innerHTML += route.legs[i].start_address + ' to ';
        summaryPanel.innerHTML += route.legs[i].end_address + '<br>';
        summaryPanel.innerHTML += route.legs[i].distance.text + '<br><br>';
      }
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });
}

Ver el ejemplo (directions-waypoints.html).

Límites y restricciones de los waypoints

Están en vigencia los límites y las restricciones de uso siguientes:

• Cuando se usa el servicio de indicaciones en la Google Maps JavaScript API, la máxima cantidad de waypoints permitida es 23, más el origen y el destino. En el servicio web de Google Maps Directions API, los límites son los mismos.
• En el servicio web de Google Maps Directions API, los clientes disponen de 23 waypoints, más el origen y el destino.
• Los clientes de Google Maps APIs Premium Plan disponen de 23 waypoints, más el origen y el destino.
• No se admiten waypoints para indicaciones de transporte.

Indicaciones arrastrables

Los usuarios pueden modificar indicaciones de desplazamiento en bicicleta, a pie o en auto mostradas mediante el uso dinámico de DirectionsRenderer en caso de que sean arrastrables, lo que permite a un usuario seleccionar y modificar rutas haciendo clic en los recorridos resultantes del mapa y arrastrándolos. Puedes indicar si en la pantalla de un representador se permiten indicaciones arrastrables fijando su propiedad draggable en el valor true. Las indicaciones de transporte no pueden convertirse en indicaciones arrastrables.

Cuando las indicaciones son arrastrables, un usuario puede seleccionar cualquier punto del recorrido (o waypoint) del resultado representado y mover el componente indicado hasta una ubicación nueva. DirectionsRenderer se actualizará en forma dinámica para mostrar el recorrido modificado. Después del lanzamiento, se agregará un waypoint transitorio al mapa (indicado por un marcador blanco pequeño). La selección y el movimiento de un segmento de recorrido modificará la etapa del recorrido en cuestión, mientras que la selección y el movimiento de un marcador de waypoint (incluidos el punto de partida y llegada) modificará las etapas de la ruta que pasa por un waypoint.

Debido a que el cliente es quien modifica y representa las indicaciones arrastrables, posiblemente te convenga controlar y administrar el evento directions_changed del elemento DirectionsRenderer, para que reciba notificaciones cuando el usuario modifique las indicaciones que se muestren.

En el siguiente código, se muestra un viaje desde Perth, en la costa occidental de Australia, hasta Sídney, en la costa oriental. El código controla el evento directions_changed para actualizar la distancia total de todas las etapas del viaje.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -24.345, lng: 134.46}  // Australia.
  });

  var directionsService = new google.maps.DirectionsService;
  var directionsDisplay = new google.maps.DirectionsRenderer({
    draggable: true,
    map: map,
    panel: document.getElementById('right-panel')
  });

  directionsDisplay.addListener('directions_changed', function() {
    computeTotalDistance(directionsDisplay.getDirections());
  });

  displayRoute('Perth, WA', 'Sydney, NSW', directionsService,
      directionsDisplay);
}

function displayRoute(origin, destination, service, display) {
  service.route({
    origin: origin,
    destination: destination,
    waypoints: [{location: 'Adelaide, SA'}, {location: 'Broken Hill, NSW'}],
    travelMode: 'DRIVING',
    avoidTolls: true
  }, function(response, status) {
    if (status === 'OK') {
      display.setDirections(response);
    } else {
      alert('Could not display directions due to: ' + status);
    }
  });
}

function computeTotalDistance(result) {
  var total = 0;
  var myroute = result.routes[0];
  for (var i = 0; i < myroute.legs.length; i++) {
    total += myroute.legs[i].distance.value;
  }
  total = total / 1000;
  document.getElementById('total').innerHTML = total + ' km';
}

<div id="map"></div>
<div id="right-panel">
  <p>Total Distance: <span id="total"></span></p>
</div>

#right-panel {
  font-family: 'Roboto','sans-serif';
  line-height: 30px;
  padding-left: 10px;
}

#right-panel select, #right-panel input {
  font-size: 15px;
}

#right-panel select {
  width: 100%;
}

#right-panel i {
  font-size: 12px;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 100%;
  float: left;
  width: 63%;
  height: 100%;
}
#right-panel {
  float: right;
  width: 34%;
  height: 100%;
}
.panel {
  height: 100%;
  overflow: auto;
}

 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -24.345, lng: 134.46}  // Australia.
  });

  var directionsService = new google.maps.DirectionsService;
  var directionsDisplay = new google.maps.DirectionsRenderer({
    draggable: true,
    map: map,
    panel: document.getElementById('right-panel')
  });

  directionsDisplay.addListener('directions_changed', function() {
    computeTotalDistance(directionsDisplay.getDirections());
  });

  displayRoute('Perth, WA', 'Sydney, NSW', directionsService,
      directionsDisplay);
}

function displayRoute(origin, destination, service, display) {
  service.route({
    origin: origin,
    destination: destination,
    waypoints: [{location: 'Adelaide, SA'}, {location: 'Broken Hill, NSW'}],
    travelMode: 'DRIVING',
    avoidTolls: true
  }, function(response, status) {
    if (status === 'OK') {
      display.setDirections(response);
    } else {
      alert('Could not display directions due to: ' + status);
    }
  });
}

function computeTotalDistance(result) {
  var total = 0;
  var myroute = result.routes[0];
  for (var i = 0; i < myroute.legs.length; i++) {
    total += myroute.legs[i].distance.value;
  }
  total = total / 1000;
  document.getElementById('total').innerHTML = total + ' km';
}

Ver el ejemplo(directions-draggable.html).