Servicio Directions

Descripción general

Puedes obtener instrucciones sobre cómo llegar (usando varios medios de transporte) con el objeto DirectionsService. Este objeto se comunica con el servicio Directions de la API de Google Maps, que recibe solicitudes de instrucciones sobre cómo llegar y muestra una ruta eficiente. 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. Puedes controlar estos resultados de instrucciones sobre cómo llegar por tu cuenta o usar el objeto DirectionsRenderer para renderizar estos resultados.

Cuando especificas el origen o el destino en una solicitud de instrucciones sobre cómo llegar, puedes especificar una cadena de consulta (por ejemplo, "Chicago, IL" o "Darwin, NSW, Australia"), un valor LatLng un objeto Place.

El servicio Directions puede mostrar instrucciones de varias partes con una serie de puntos de referencia. Las instrucciones sobre cómo llegar se muestran como una polilínea que dibuja la ruta en un mapa o, adicionalmente, como una serie de descripciones textuales en un elemento <div> (por ejemplo, "Gira a la derecha en la rampa del puente de Williamsburg").

Cómo comenzar

Antes de usar el servicio Directions en la API de Maps JavaScript, asegúrate de que la API de Directions esté habilitada en la consola de Google Cloud, en el mismo proyecto que configuraste para la API de Maps JavaScript.

Para ver tu lista de APIs habilitadas, haz lo siguiente:

1. Ve a la consola de Google Cloud.
2. Haz clic en el botón Seleccionar un proyecto, selecciona el mismo proyecto que configuraste para la API de Maps JavaScript y haz clic en Abrir.
3. En la lista de APIs del panel, busca API de Directions.
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 HABILITAR API para abrir la pestaña Biblioteca. También puedes seleccionar Biblioteca en el menú lateral izquierdo.
   2. Busca API de Directions y selecciónala en la lista de resultados.
   3. Selecciona HABILITAR. Cuando finalice el proceso, la API de Directions aparecerá en la lista de APIs del panel.

Precios y políticas

Precios

El 16 de julio de 2018, entró en vigencia un nuevo plan de precios de pago por uso para Maps, Routes y Places. Para obtener más información sobre los nuevos precios y límites de uso del servicio Directions de JavaScript, consulta Uso y facturación para la API de Directions.

Políticas

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

Solicitudes de Directions

El acceso al servicio Directions es asíncrono, ya que la API de Google Maps debe realizar una llamada a un servidor externo. Por ese motivo, debes pasar un método de devolución de llamada para la ejecución una vez que se complete la solicitud. Este método de devolución de llamada debe procesar el resultado. Ten en cuenta que el servicio Directions puede mostrar más de un itinerario posible como un array de routes[] diferentes.

Para usar las instrucciones sobre cómo llegar en la API de Maps JavaScript, crea un objeto del tipo DirectionsService y llama a DirectionsService.route() para iniciar una solicitud al servicio Directions en la que se pase un literal del objeto DirectionsRequest que contenga los términos de entrada y un método de devolución de llamada para la ejecución al recibir la respuesta.

El literal del 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,
  avoidFerries: Boolean,
  avoidHighways: Boolean,
  avoidTolls: Boolean,
  region: String
}

Estos campos se explican a continuación:

• origin (obligatorio) especifica la ubicación de inicio a partir de la cual se calcularán las instrucciones sobre cómo llegar. Este valor se puede especificar como una String (por ejemplo, "Chicago, IL"), como un valor de LatLng o como un objeto Place. Si usas un objeto Place, puedes especificar un ID de lugar, una cadena de consulta o una ubicación LatLng. Puedes recuperar los IDs de lugar de los servicios Geocoding, Place Search y Place Autocomplete en la API de Maps JavaScript. Para ver un ejemplo que use IDs de lugar de Place Autocomplete, consulta el artículo Place Autocomplete y Directions.
• destination (obligatorio) especifica la ubicación de destino para la que se calcularán las instrucciones sobre cómo llegar. Las opciones son las mismas que para el campo origin descrito anteriormente.
• travelMode (obligatorio) especifica el medio de transporte que se usará para calcular las instrucciones sobre cómo llegar. Los valores válidos se especifican en la sección Medios de transporte a continuación.
• transitOptions (opcional) especifica valores que se aplican solo a solicitudes en las que travelMode es TRANSIT. Los valores válidos se describen en la sección Opciones de transporte público a continuación.
• drivingOptions (opcional) especifica valores que se aplican solo a solicitudes en las que travelMode es DRIVING. Los valores válidos se describen en la sección Opciones de manejo a continuación.

• unitSystem (opcional) especifica el sistema de unidades que se usará para mostrar los resultados. Los valores válidos se especifican en la sección Sistemas de unidades a continuación.

• waypoints[] (opcional) especifica un array de DirectionsWaypoint. Los puntos de referencia modifican una ruta para que pase por las ubicaciones especificadas. Un punto de referencia se especifica como un literal de objeto con los campos que se muestran a continuación:

  • location especifica la ubicación del punto de referencia, como un valor de LatLng, como un objeto Place o como una String que se geocodificará.
  • stopover es un valor booleano que indica que el punto de referencia es una parada en la ruta, lo cual tiene el efecto de dividirla en dos.

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

• optimizeWaypoints (opcional) especifica que la ruta en la que se usan los waypoints proporcionados se puede optimizar si se reordenan los puntos de referencia de una forma más eficiente. Si el valor es true, el servicio Directions mostrará los waypoints reordenados en un campo waypoint_order (para obtener más información, consulta Cómo usar puntos de referencia en las rutas a continuación).
• provideRouteAlternatives (opcional), cuando se establece en true, especifica que el servicio Directions 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. Esta opción solo está disponible para las solicitudes sin puntos de referencia intermedios.
• avoidFerries (opcional), cuando se establece en true, indica que las rutas calculadas deben evitar los ferris, si es posible.
• avoidHighways (opcional), cuando se establece en true, indica que las rutas calculadas deben evitar las autopistas principales, si es posible.
• avoidTolls (opcional), cuando se establece en true, indica que las rutas calculadas deben evitar las rutas con peaje, si es posible.
• region (opcional) indica el código de región, especificado como un valor ccTLD ("dominio de nivel superior") de dos caracteres. (Para obtener más información, consulta la sección Personalización de resultados en función de la 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
}

Medios de transporte

Al calcular las instrucciones sobre cómo llegar a un lugar, debes especificar el medio de transporte que se usará. Actualmente, se admiten los siguientes medios de transporte:

• DRIVING (predeterminado) indica la ruta en auto estándar por la red de rutas.
• BICYCLING solicita la ruta en bicicleta por ciclovías y calles preferidas.
• TRANSIT solicita instrucciones sobre cómo llegar a un lugar mediante rutas de transporte público.
• WALKING solicita instrucciones sobre cómo llegar a un lugar a pie a través de rutas peatonales y veredas.

Consulta los Detalles de la cobertura de Google Maps Platform para determinar en qué medida se admiten las instrucciones sobre cómo llegar en un país determinado. Si solicitas instrucciones sobre cómo llegar en una región en la que ese tipo de instrucciones no están disponibles, la respuesta mostrará DirectionsStatus="ZERO_RESULTS".

Nota: Es posible que las instrucciones sobre cómo llegar a pie no incluyan rutas peatonales claras, por lo que estas indicaciones mostrarán advertencias en DirectionsResult. Esas advertencias se deben mostrar al usuario siempre. Si no usas el DirectionsRenderer predeterminado, será tu responsabilidad garantizar que se muestren las advertencias.

Opciones de transporte público

Las opciones disponibles para realizar una solicitud de instrucciones sobre cómo llegar varían según el medio de transporte. Cuando solicites rutas en transporte público, se ignorarán las opciones avoidHighways, avoidTolls, waypoints[] y optimizeWaypoints. Puedes especificar opciones de rutas específicas de transporte público a través del literal del objeto TransitOptions.

Las rutas en transporte público están sujetas a un horario. Solo se mostrarán para horas futuras.

El literal del 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 ignorará la hora de salida.
• departureTime (opcional) especifica la hora de salida deseada como un objeto Date. departureTime se ignorará si se especifica arrivalTime. Si no se especifica ningún valor para departureTime o arrivalTime, el valor predeterminado es ahora (es decir, la hora actual).
• modes[] (opcional) es un array que contiene uno o más literales del objeto TransitMode. Este campo solo puede especificarse si en la solicitud se incluye una clave de API. Cada TransitMode especifica un medio de transporte público 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 metro.
  • SUBWAY indica que, para la ruta calculada, debe priorizarse el transporte en metro.
  • 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 las preferencias para las rutas de transporte público. Con esta opción, puedes personalizar las opciones que se muestran en lugar de aceptar la mejor ruta predeterminada que selecciona 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, debe priorizarse una cantidad limitada de transbordos.
  • LESS_WALKING indica que, para la ruta calculada, debe priorizarse una distancia limitada de recorrido a pie.

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

{
  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 ruta para rutas en auto a través del objeto DrivingOptions.

El objeto DrivingOptions contiene los siguientes campos:

{
  departureTime: Date,
  trafficModel: TrafficModel
}

Estos campos se explican a continuación:

• departureTime (obligatorio para que el literal del objeto drivingOptions sea válido) especifica la hora de salida deseada como un objeto Date. El valor debe establecerse en la hora actual o en una hora futura determinada. No puede ser un horario anterior. (La API convierte todas las fechas al estándar UTC para garantizar un manejo uniforme en todas las zonas horarias). En el caso de los clientes del plan Premium de Google Maps Platform, si incluyes el campo departureTime en la solicitud, la API mostrará la mejor ruta en función de las condiciones de tráfico esperadas en ese momento y también indicará el tiempo previsto en el tráfico (duration_in_traffic) en la respuesta. Si no especificas una hora de salida (es decir, si la solicitud no incluye drivingOptions), se suele mostrar una buena ruta sin tener en cuenta las condiciones de tráfico.
• trafficModel (opcional) especifica las suposiciones que se usarán para calcular el tiempo en el tráfico. Esta configuración afecta el valor que se muestra en el campo duration_in_traffic de la respuesta, que contiene el tiempo previsto en el tráfico según los promedios históricos. La configuración predeterminada es bestguess. Se permiten los siguientes valores:
  • bestguess (predeterminado) indica que el valor de duration_in_traffic que se muestra debe ser la mejor estimación de la duración del viaje según lo que se conoce sobre las condiciones de tráfico histórico y tráfico en tiempo real. Cuanto más se acerque el valor de departureTime al momento presente, más importancia cobrará el tráfico en tiempo real.
  • pessimistic indica que el valor de duration_in_traffic que se muestra debe ser mayor que el tiempo de viaje real la mayoría de los días; no obstante, es posible que se supere este valor determinados días en que las condiciones de tráfico son particularmente desfavorables.
  • optimistic indica que el valor de duration_in_traffic que se muestra debe ser menor que el tiempo de viaje real en la mayoría de los días, aunque puede llegar a ser aún más corto en determinados días en que las condiciones de tráfico sean particularmente buenas.

A continuación, se muestra un ejemplo de DirectionsRequest mediante rutas en auto:

{
  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 instrucciones sobre cómo llegar a un lugar se calculan y muestran mediante el sistema de unidades del país o la región de origen. (Nota: Los orígenes expresados con coordenadas de latitud y longitud en lugar de direcciones siempre se indican en unidades del sistema métrico 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. Para anular este sistema de unidades, configura una unidad explícitamente en la solicitud con uno de los siguientes valores de 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 millas.

Nota: Esta configuración del sistema de unidades solo afecta el texto que se muestra al usuario. El resultado de las instrucciones sobre cómo llegar también contiene valores de distancia, que no se muestran al usuario y que siempre se expresan en metros.

Personalización de resultados de Directions en función de la región

El servicio Directions de la API de Google Maps muestra resultados de direcciones en función del dominio (región o país) desde el que cargaste el arranque de JavaScript. (Debido a que la mayoría de los usuarios cargan https://maps.googleapis.com/, se establece un dominio implícito en Estados Unidos). Si cargas el arranque de un dominio admitido diferente, obtendrás resultados en función de ese dominio. Por ejemplo, las búsquedas de "San Francisco" pueden mostrar resultados diferentes en las aplicaciones que cargan https://maps.googleapis.com/ (Estados Unidos) y en las que cargan http://maps.google.es/ (España).

También puedes configurar el servicio Directions para que muestre resultados personalizados según una región en particular mediante el parámetro region. Este parámetro toma un código de región, que se indica como una subetiqueta de región Unicode de dos caracteres (no numérica). En la mayoría de los casos, estas etiquetas se asignan directamente a valores de ccTLD ("dominio de nivel superior") de dos caracteres, como "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" para "Gran Bretaña").

Cuando uses el parámetro region, haz lo siguiente:

• Solo especifica un país o una región. Los valores múltiples se ignoran y pueden generar errores en la solicitud.
• Usa solo subetiquetas regionales de dos caracteres (formato CLDR de Unicode). Todas las demás entradas generarán errores.

La personalización de resultados en función de la región solo se admite en los países y las regiones donde se pueden solicitar instrucciones sobre cómo llegar a un lugar. Consulta los Detalles de la cobertura de Google Maps Platform para ver la cobertura internacional de la API de Directions.

Cómo renderizar las instrucciones sobre cómo llegar

Para iniciar una solicitud de instrucciones sobre cómo llegar en DirectionsService con el método route(), se debe pasar una devolución de llamada que se ejecute al completarse la solicitud de servicio. Esta devolución de llamada mostrará los códigos DirectionsResult y DirectionsStatus en la respuesta.

Estado de la consulta de instrucciones sobre cómo llegar

DirectionsStatus puede mostrar los siguientes valores:

• OK indica que la respuesta contiene un DirectionsResult válido.
• NOT_FOUND indica que no se pudo geocodificar al menos una de las ubicaciones especificadas en el origen, el destino o los puntos de referencia de la solicitud.
• ZERO_RESULTS indica que no se encontró ninguna ruta entre el origen y el destino.
• MAX_WAYPOINTS_EXCEEDED indica que se proporcionaron demasiados campos DirectionsWaypoint en DirectionsRequest. Consulta la sección sobre los límites de puntos de referencia a continuación.
• MAX_ROUTE_LENGTH_EXCEEDED indica que la ruta solicitada es demasiado larga y no se puede procesar. Este error se produce cuando se muestran instrucciones más complejas sobre cómo llegar a un lugar. Intenta reducir la cantidad de puntos de referencia, giros o instrucciones.
• INVALID_REQUEST indica que la DirectionsRequest proporcionada no era válida. Las causas más frecuentes de este código de error son la falta de un origen o destino en la solicitud o solicitudes de transporte público que incluyen puntos de referencia.
• OVER_QUERY_LIMIT indica que la página web envió demasiadas solicitudes dentro del período permitido.
• REQUEST_DENIED indica que la página web no puede usar el servicio Directions.
• UNKNOWN_ERROR indica que no se pudo procesar una solicitud de instrucciones sobre cómo llegar debido a un error del servidor. La solicitud puede completarse correctamente si realizas un nuevo intento.

Debes asegurarte de que la consulta de instrucciones sobre cómo llegar muestre resultados válidos. Para ello, verifica este valor antes de procesar el resultado.

Cómo mostrar DirectionsResult

DirectionsResult contiene el resultado de la consulta de instrucciones sobre cómo llegar, que puedes controlar tú mismo o pasarlo a un objeto DirectionsRenderer, que puede controlar automáticamente cómo se muestra el resultado en un mapa.

Para mostrar un DirectionsResult con un DirectionsRenderer, debes hacer lo siguiente:

1. Crea un objeto DirectionsRenderer.
2. Llama a setMap() en el procesador para vincularlo al mapa que se pasó.
3. Llama a setDirections() en el procesador y pásale el DirectionsResult como se indicó más arriba. Debido a que el procesador es un MVCObject, detectará automáticamente los cambios en sus propiedades y actualizará el mapa cuando cambien las instrucciones asociadas sobre cómo llegar a un lugar.

En el siguiente ejemplo, se calculan instrucciones sobre cómo llegar entre dos ubicaciones en la ruta 66, en la que el origen y el destino se establecen mediante los valores "start" y "end" de las listas desplegables. DirectionsRenderer controla la visualización de la polilínea entre las ubicaciones indicadas y la posición de los marcadores en el origen, el destino y cualquier punto de referencia, si corresponde.

function initMap() {
  var directionsService = new google.maps.DirectionsService();
  var directionsRenderer = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  var mapOptions = {
    zoom:7,
    center: chicago
  }
  var map = new google.maps.Map(document.getElementById('map'), mapOptions);
  directionsRenderer.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') {
      directionsRenderer.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 ejemplo

En el siguiente ejemplo, se muestran instrucciones sobre cómo llegar en las que se usan diferentes medios de transporte entre Haight-Ashbury y Ocean Beach, en San Francisco, California:

function initMap() {
  var directionsService = new google.maps.DirectionsService();
  var directionsRenderer = new google.maps.DirectionsRenderer();
  var haight = new google.maps.LatLng(37.7699298, -122.4469157);
  var oceanBeach = new google.maps.LatLng(37.7683909618184, -122.51089453697205);
  var mapOptions = {
    zoom: 14,
    center: haight
  }
  var map = new google.maps.Map(document.getElementById('map'), mapOptions);
  directionsRenderer.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') {
      directionsRenderer.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 ejemplo

Un DirectionsRenderer no solo controla la visualización de la polilínea y los marcadores asociados, sino también la visualización textual de las instrucciones sobre cómo llegar como una serie de pasos. Para esto, llama a setPanel() en tu DirectionsRenderer y pásale el <div> en el que se debe mostrar esta información. De esta manera, también te aseguras de que se muestre la información sobre derechos de autor adecuada y las advertencias que pueden asociarse con el resultado.

Las instrucciones textuales sobre cómo llegar se proporcionarán mediante la configuración de idioma preferida del navegador o el idioma especificado al cargar la API de JavaScript con el parámetro language. (Para obtener más información, consulta el artículo Localización). En el caso de las rutas en transporte público, la hora aparecerá en la zona horaria de la parada de transporte público.

El siguiente ejemplo es idéntico al anterior, pero incluye un panel <div> en el que se mostrarán las instrucciones sobre cómo llegar:

function initMap() {
  var directionsService = new google.maps.DirectionsService();
  var directionsRenderer = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  var mapOptions = {
    zoom:7,
    center: chicago
  }
  var map = new google.maps.Map(document.getElementById('map'), mapOptions);
  directionsRenderer.setMap(map);
  directionsRenderer.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') {
      directionsRenderer.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 ejemplo

El objeto DirectionsResult

Cuando envías a DirectionsService una solicitud de instrucciones sobre cómo llegar, recibes una respuesta que consta de un código de estado y un resultado, que es un objeto DirectionsResult. DirectionsResult es un literal de objeto con los siguientes campos:

• geocoded_waypoints[] contiene un array de objetos DirectionsGeocodedWaypoint, y cada uno incluye detalles sobre la geocodificación del origen, el destino y los puntos de referencia.
• routes[] contiene un array de objetos DirectionsRoute. Cada ruta indica una forma de ir desde el origen hasta el destino proporcionados en DirectionsRequest. Por lo general, solo se muestra una ruta para cada solicitud, a menos que el campo provideRouteAlternatives de la solicitud esté configurado como true, en cuyo caso se pueden mostrar varias rutas.

Nota: La propiedad via_waypoint está obsoleta en las rutas alternativas. La versión 3.27 es la versión más reciente de la API que agrega más trayectos mediante puntos de referencia en rutas alternativas. En las versiones 3.28 y posteriores de la API, puedes seguir implementando instrucciones sobre cómo llegar arrastrables mediante el servicio Directions. Para ello, inhabilita el arrastre de rutas alternativas. Solo la ruta principal debe ser arrastrable. Los usuarios pueden arrastrar la ruta principal hasta que coincida con una alternativa.

Puntos de referencia con geocodificación para instrucciones sobre cómo llegar

Un DirectionsGeocodedWaypoint contiene detalles sobre la geocodificación del origen, el destino y los puntos de referencia.

DirectionsGeocodedWaypoint es un literal de objeto con 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 se produjeron errores, es decir, que la dirección se analizó correctamente y mostró al menos un código geográfico.
  • "ZERO_RESULTS" indica que el geocódigo era correcto, pero no mostró resultados. Esto puede ocurrir si se pasó un valor address inexistente al geocodificador.

• partial_match indica que el geocodificador no mostró una concordancia exacta para la solicitud original, aunque sí encontró 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 se pasan en la solicitud no existen en la localidad. También se pueden mostrar coincidencias parciales cuando una solicitud concuerda con dos o más ubicaciones en la misma localidad. Por ejemplo, "Hillpar St, Bristol, UK" mostrará una coincidencia parcial tanto para Henry Street como para 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 de un lugar que se puede usar con otras APIs de Google. Por ejemplo, puedes usar el place_id con la biblioteca de la API de Google Places para obtener detalles de una empresa local, como el número de teléfono, el horario de atención, las opiniones de los usuarios y mucho más. Consulta la descripción general del ID de lugar.
• types[] es un array que indica el tipo de resultado que se muestra. Este array incluye un conjunto de cero o más etiquetas que identifican el tipo de componente que se muestra en el resultado. Por ejemplo, el código geográfico "Chicago" muestra la etiqueta "localidad", que indica que "Chicago" es una ciudad, y también "política", que indica que es una entidad política.

Rutas de instrucciones sobre cómo llegar

Nota: Se cambió el nombre del objeto DirectionsTrip heredado por DirectionsRoute. Ten en cuenta que actualmente una ruta hace referencia a todo el viaje, de principio a fin, y no simplemente a un segmento del viaje principal.

Una DirectionsRoute contiene un solo resultado del origen y el destino especificados. Esta ruta puede constar de uno o más segmentos (del tipo DirectionsLeg) según se hayan especificado o no puntos de referencia. 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 la ruta.

DirectionsRoute es un literal de objeto con los siguientes campos:

• legs[] contiene un array de objetos DirectionsLeg, cada uno de los cuales contiene información sobre un segmento de la ruta, a partir de dos ubicaciones de una ruta determinada. Habrá un segmento separado para cada punto de referencia o destino especificados. (Una ruta sin puntos de referencia contendrá exactamente un DirectionsLeg). Cada etapa consta de una serie de DirectionStep.
• waypoint_order contiene un array que indica el orden de los puntos de referencia en la ruta calculada. Este array puede contener un orden modificado si se pasó optimizeWaypoints: true a DirectionsRequest.
• overview_path contiene un array de LatLng que representa una ruta aproximada (unificada) del resultado de las instrucciones sobre cómo llegar.
• overview_polyline contiene un solo objeto points que incluye una representación de la polilínea codificada de la ruta. Esta polilínea es una ruta aproximada (unificada) del resultado de las instrucciones sobre cómo llegar.
• bounds contiene un objeto LatLngBounds que indica los límites de la polilínea a lo largo de esta ruta determinada.
• copyrights contiene el texto de los derechos de autor que se debe mostrar para esta ruta.
• warnings[] contiene un array de advertencias que aparecerán cuando se muestren estas instrucciones sobre cómo llegar. Si no usas el objeto DirectionsRenderer proporcionado, debes controlar y mostrar estas advertencias por tu cuenta.
• fare contiene la tarifa total (es decir, el costo total de los pasajes) de esta ruta. Esta propiedad se muestra únicamente para las solicitudes de transporte público y solo para las rutas que disponen de información sobre las tarifas para todos los segmentos del recorrido. La información incluye lo siguiente:
  • currency: Es un código de moneda ISO 4217 que indica la moneda en la que se expresa el importe.
  • value: Es el importe total de la tarifa expresado en la moneda especificada más arriba.

Segmentos de las instrucciones sobre cómo llegar

Nota: Se cambió el nombre del objeto DirectionsRoute heredado por DirectionsLeg.

Un objeto DirectionsLeg define un solo segmento de un viaje desde el origen hasta el destino en la ruta calculada. Las rutas que no contienen puntos de referencia tienen un solo "segmento", pero aquellas en las que se definen uno o más puntos de referencia tienen uno o más segmentos, correspondientes a cada segmento específico del viaje.

DirectionsLeg es un literal de objeto con los siguientes campos:

• steps[] contiene un array de objetos DirectionsStep que denota información sobre cada paso individual del segmento del viaje.

• distance indica la distancia total cubierta por este segmento, como un objeto Distance de la siguiente forma:

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

  Estos campos pueden no definirse si se desconoce la distancia.

• duration indica la duración total de este segmento, como un objeto Duration de la siguiente forma:

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

  Estos campos pueden no definirse si se desconoce la duración.

• duration_in_traffic indica la duración total de este segmento teniendo en cuenta las condiciones actuales del tráfico. duration_in_traffic solo se muestra si se cumplen todas las condiciones que se indican a continuación:

  • La solicitud no incluye puntos de referencia de parada. Es decir, no incluye puntos de referencia en los que stopover es true.
  • La solicitud se realiza específicamente para obtener la ruta en auto (mode se establece en driving).
  • El departureTime se incluye como parte del campo drivingOptions en la solicitud.
  • Las condiciones de 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 legible por humanos de la duración.
• arrival_time contiene la hora estimada de llegada para este segmento. Esta propiedad solo se muestra para las rutas en transporte público. El resultado se muestra como un objeto Time con tres propiedades:
  • value es la hora especificada como un objeto Date de JavaScript.
  • text es la hora especificada como una string. La hora se muestra en la zona horaria de la parada de transporte público.
  • 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 IANA, p. ej., "America/New_York".
• departure_time contiene la hora estimada de salida para este segmento, especificada como un objeto Time. departure_time solo está disponible para las rutas en transporte público.
• start_location contiene la LatLng del origen de este segmento. Debido a que el servicio web Directions calcula las instrucciones sobre cómo llegar entre ubicaciones con la opción de transporte más cercana (por lo general, una ruta) en los puntos de partida y destino, es posible que start_location sea diferente del origen proporcionado para este segmento si, por ejemplo, una ruta no está cerca del origen.
• end_location contiene la LatLng del destino de este segmento. Debido a que DirectionsService calcula las instrucciones sobre cómo llegar entre ubicaciones con la opción de transporte más cercana (por lo general, una ruta) en los puntos de partida y destino, es posible que end_location sea diferente del destino proporcionado para este segmento si, por ejemplo, no hay una ruta cerca del destino.
• start_address contiene una dirección legible por humanos (por lo general, una dirección postal) del comienzo de este segmento
  
  Este contenido se debe leer tal como está. No analices la dirección con formato de manera programática.
• end_address contiene una dirección legible por humanos (por lo general, una dirección postal) del final de este segmento.
  
  Este contenido se debe leer tal como está. No analices la dirección con formato de manera programática.

Pasos de las instrucciones sobre cómo llegar

Un DirectionsStep es la unidad más pequeña de la ruta de una instrucción sobre cómo llegar y contiene un paso individual en el que se describe una instrucción específica y única para el viaje. Por ejemplo, "Gira a la izquierda en la calle 4". En el paso no solo se describe la instrucción, sino que también se incluye información sobre la distancia y la duración de este paso con respecto al siguiente. Por ejemplo, el paso "Incorpórate a la I-80 hacia el oeste" puede contener una duración de "37 millas" y "40 minutos", lo que indica que el próximo paso se encuentra a 37 millas o 40 minutos del paso actual.

Cuando uses el servicio Directions para buscar rutas en transporte público, el array de pasos incluirá información específica sobre el transporte público en forma de objeto transit. Si las instrucciones incluyen varios medios de transporte, se proporcionarán instrucciones detalladas para los pasos a pie o en auto en un array steps[]. Por ejemplo, un paso a pie incluirá instrucciones sobre cómo llegar desde las ubicaciones de partida y destino: "Camina hasta Innes Ave y Fitch St". Ese paso incluirá instrucciones detalladas sobre cómo llegar a pie para esa ruta en el array steps[], como "Dirígete hacia el noroeste", "Gira a la izquierda en Arelious Walker" y "Gira a la izquierda en Innes Ave".

DirectionsStep es un literal de objeto con los siguientes campos:

• instructions contiene instrucciones para este paso en una string de texto.
• distance contiene la distancia entre este paso y el siguiente como un objeto Distance. (Consulta la descripción de DirectionsLeg más arriba). Este campo puede no definirse si se desconoce la distancia.
• duration contiene una estimación del tiempo necesario para realizar el paso, hasta el siguiente, como un objeto Duration. (Consulta la descripción de DirectionsLeg más arriba). Este campo puede no definirse si se desconoce la duración.
• start_location contiene el objeto LatLng geocodificado del punto de partida de este paso.
• end_location contiene el objeto LatLng del destino de este paso.
• polyline contiene un solo objeto points que contiene una representación de la polilínea codificada del paso. Esta polilínea es una ruta aproximada (unificada) del paso.
• steps[] es un literal del objeto DirectionsStep que contiene instrucciones detalladas sobre cómo llegar a pie o en auto en las rutas en transporte público. Los pasos secundarios solo están disponibles para las rutas en transporte público.
• travel_mode contiene el TravelMode que se usa en este paso. Las rutas en transporte público pueden incluir una combinación de instrucciones sobre cómo llegar a pie y en transporte público.
• path contiene un array de LatLngs que describe el recorrido de este paso.
• transit contiene información específica sobre el transporte público, como las horas de llegada y salida, y el nombre de la línea de transporte público.

Información específica sobre el transporte público

Las rutas en transporte público muestran información adicional que no es relevante para otros medios de transporte. Estas propiedades adicionales se exponen a través del objeto TransitDetails, que se muestra como una propiedad de DirectionsStep. Desde el objeto TransitDetails, puedes acceder a información adicional sobre los objetos TransitStop, TransitLine, TransitAgency y VehicleType, tal como se describe a continuación.

Detalles sobre el transporte público

El objeto TransitDetails expone las siguientes propiedades:

• arrival_stop contiene un objeto TransitStop que representa la estación o la parada de llegada con las siguientes propiedades:
  • name es el nombre de la estación o la parada de transporte público, p. ej., "Union Square".
  • location es la ubicación de la estación o la parada de transporte público, representada como un objeto LatLng.
• departure_stop contiene un objeto TransitStop que representa la estación o la parada de salida.
• arrival_time contiene la hora de llegada, especificada como un objeto Time con tres propiedades:
  • value es la hora especificada como un objeto Date de JavaScript.
  • text es la hora especificada como una string. La hora se muestra en la zona horaria de la parada de transporte público.
  • 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 IANA, p. ej., "America/New_York".
• departure_time contiene la hora de salida, especificada como un objeto Time.
• headsign especifica la dirección en la que se debe viajar en esta línea, como se marca en el vehículo o la parada de salida. Suele ser la estación terminal.
• headway, cuando está disponible, especifica la cantidad de segundos previstos entre las salidas desde la misma parada a esa hora. 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 del objeto TransitLine que incluye información sobre la línea de transporte público que se usa 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 la cantidad de paradas de este paso. Incluye la parada de llegada, pero no la de salida. Por ejemplo, si las instrucciones sobre cómo llegar implican salir de la parada A, pasar por las paradas B y C, y llegar a la parada D, num_stops mostrará 3 paradas.

Línea de transporte público

El objeto TransitLine expone las siguientes propiedades:

• name contiene el nombre completo de esta línea de transporte público, p. ej., "7 Avenue Express" o "14th St Crosstown".
• short_name contiene el nombre corto de esta línea de transporte público. Suele ser el número de la línea, como "2" o "M14".
• agencies es un array que contiene un solo objeto TransitAgency. El objeto TransitAgency proporciona información sobre el operador de esta línea, incluidas las siguientes propiedades:
  • name contiene el nombre de la empresa de transporte público.
  • phone contiene el número de teléfono de la empresa de transporte público.
  • url contiene la URL de la empresa de transporte público.

  Nota: Si renderizas las rutas en transporte público de forma manual en lugar de usar el objeto DirectionsRenderer, debes mostrar los nombres y las URLs de las empresas de transporte público que ofrecen los servicios de los resultados del viaje.

• url contiene la URL de esta línea de transporte público tal como la proporciona la empresa de transporte público.
• icon contiene una URL para el ícono asociado con esta línea. La mayoría de las ciudades usan íconos genéricos que varían según el tipo de vehículo. Para algunas líneas de transporte público, como el sistema de metro de Nueva York, hay íconos específicos.
• color contiene el color que se suele usar para la señalización de este transporte público. El color se especificará con una string hexadecimal, como #FF0033.
• text_color contiene el color del texto que se suele usar para la señalización de esta línea. 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., "Metro".
  • type contiene el tipo de vehículo que se usa en esta línea. Consulta la documentación sobre tipos de vehículos para obtener una lista completa de los valores admitidos.
  • icon contiene una URL para el ícono que se suele asociar con este tipo de vehículo.
  • local_icon contiene la URL del ícono asociado con este tipo de vehículo, según la señalización del transporte local.

Tipos de vehículos

El objeto VehicleType expone las siguientes propiedades:

Cómo inspeccionar DirectionsResults

Los componentes de DirectionsResults (DirectionsRoute, DirectionsLeg, DirectionsStep y TransitDetails) se pueden inspeccionar y usar cuando se analizan las respuestas de instrucciones sobre cómo llegar a un lugar.

Importante: Si renderizas las rutas en transporte público de forma manual en lugar de usar el objeto DirectionsRenderer, debes mostrar los nombres y las URLs de las empresas de transporte público que ofrecen los servicios indicados en los resultados del viaje.

En el siguiente ejemplo, se muestran las instrucciones sobre cómo llegar a pie a determinadas atracciones turísticas de Nueva York. Inspeccionamos el DirectionsStep de la ruta a fin de agregar marcadores para cada paso y adjuntamos información a una InfoWindow con texto instructivo para ese paso.

Nota: Debido a que se calculan instrucciones sobre cómo llegar a pie, también se muestran advertencias al usuario en un panel <div> independiente.

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

function initMap() {
  // 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
  }
  directionsRenderer = 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 + "";
      directionsRenderer.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 ejemplo

Cómo usar puntos de referencia en las rutas

Como se mencionó en DirectionsRequest, también puedes especificar puntos de referencia (del tipo DirectionsWaypoint) cuando calculas rutas mediante el servicio Directions para obtener instrucciones sobre cómo llegar a pie o rutas en bicicleta o auto. Los puntos de referencia no están disponibles para las rutas en transporte público. Los puntos de referencia te permiten calcular rutas a través de ubicaciones adicionales; en este caso, la ruta que se muestra pasa por los puntos de referencia proporcionados.

Un waypoint consta de los siguientes campos:

• location (obligatorio) especifica la dirección del punto de referencia.
• stopover (opcional) indica si este punto de referencia es una parada real en la ruta (true) o si se trata solo de una alternativa de ruta preferida a través de la ubicación indicada (false). Las paradas están establecidas en true de forma predeterminada.

De forma predeterminada, el servicio Directions calcula una ruta a través de los puntos de referencia proporcionados en su respectivo orden. De manera opcional, puedes pasar optimizeWaypoints: true en la DirectionsRequest para permitir que el servicio Directions optimice la ruta proporcionada reordenando los puntos de referencia de una forma más eficiente. (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 cuál es la ruta más eficiente. Todos los puntos de referencia deben ser paradas para que el servicio Directions optimice la ruta.

Si le indicas al servicio Directions que optimice el orden de los puntos de referencia, dicho orden se mostrará en el campo waypoint_order en el objeto DirectionsResult.

En el siguiente ejemplo, se calculan rutas a través de Estados Unidos con varios puntos de partida, destinos y puntos de referencia. (Para seleccionar varios puntos de referencia, presiona Ctrl + clic al elegir elementos de la lista). Ten en cuenta que inspeccionamos routes.start_address y routes.end_address para que nos proporcionen el texto del punto de partida y el destino de cada ruta.

function initMap(): void {
  const directionsService = new google.maps.DirectionsService();
  const directionsRenderer = new google.maps.DirectionsRenderer();
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 6,
      center: { lat: 41.85, lng: -87.65 },
    }
  );

  directionsRenderer.setMap(map);

  (document.getElementById("submit") as HTMLElement).addEventListener(
    "click",
    () => {
      calculateAndDisplayRoute(directionsService, directionsRenderer);
    }
  );
}

function calculateAndDisplayRoute(
  directionsService: google.maps.DirectionsService,
  directionsRenderer: google.maps.DirectionsRenderer
) {
  const waypts: google.maps.DirectionsWaypoint[] = [];
  const checkboxArray = document.getElementById(
    "waypoints"
  ) as HTMLSelectElement;

  for (let i = 0; i < checkboxArray.length; i++) {
    if (checkboxArray.options[i].selected) {
      waypts.push({
        location: (checkboxArray[i] as HTMLOptionElement).value,
        stopover: true,
      });
    }
  }

  directionsService
    .route({
      origin: (document.getElementById("start") as HTMLInputElement).value,
      destination: (document.getElementById("end") as HTMLInputElement).value,
      waypoints: waypts,
      optimizeWaypoints: true,
      travelMode: google.maps.TravelMode.DRIVING,
    })
    .then((response) => {
      directionsRenderer.setDirections(response);

      const route = response.routes[0];
      const summaryPanel = document.getElementById(
        "directions-panel"
      ) as HTMLElement;

      summaryPanel.innerHTML = "";

      // For each route, display summary information.
      for (let i = 0; i < route.legs.length; i++) {
        const 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>";
      }
    })
    .catch((e) => window.alert("Directions request failed due to " + status));
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

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

  directionsRenderer.setMap(map);
  document.getElementById("submit").addEventListener("click", () => {
    calculateAndDisplayRoute(directionsService, directionsRenderer);
  });
}

function calculateAndDisplayRoute(directionsService, directionsRenderer) {
  const waypts = [];
  const checkboxArray = document.getElementById("waypoints");

  for (let 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: google.maps.TravelMode.DRIVING,
    })
    .then((response) => {
      directionsRenderer.setDirections(response);

      const route = response.routes[0];
      const summaryPanel = document.getElementById("directions-panel");

      summaryPanel.innerHTML = "";

      // For each route, display summary information.
      for (let i = 0; i < route.legs.length; i++) {
        const 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>";
      }
    })
    .catch((e) => window.alert("Directions request failed due to " + status));
}

window.initMap = initMap;
index.js

Límites y restricciones de los puntos de referencia

Se aplican los siguientes límites y restricciones de uso:

• Cuando se usa el servicio Directions en la API de Maps JavaScript, la cantidad máxima de puntos de referencia permitidos es de 25, además del origen y el destino. Los límites son los mismos para el servicio web de la API de Directions.
• Para el servicio web de la API de Directions, los clientes pueden usar 25 puntos de referencia, además del origen y el destino.
• Los clientes del plan Premium de Google Maps Platform pueden incluir 25 puntos de referencia, además del origen y el destino.
• No se admiten los puntos de referencia para las rutas en transporte público.

Instrucciones sobre cómo llegar arrastrables

Los usuarios pueden modificar las instrucciones sobre cómo llegar en bicicleta, a pie o en auto que se muestran con un DirectionsRenderer de forma dinámica si son arrastrables. Esto les permite seleccionar y modificar las rutas haciendo clic y arrastrando los resultados de rutas en el mapa. Para indicar si la pantalla de un procesador permite arrastrar las instrucciones sobre cómo llegar, establece su propiedad draggable en true. Las rutas en transporte público no se pueden configurar como arrastrables.

Cuando las instrucciones sobre cómo llegar son arrastrables, los usuarios pueden seleccionar cualquier punto de la ruta (o punto de referencia) del resultado renderizado y mover el componente indicado hasta una ubicación nueva. DirectionsRenderer se actualizará de forma dinámica para mostrar la ruta modificada. Después del cambio, se agregará un punto de referencia transitorio al mapa (indicado por un marcador blanco pequeño). Si seleccionas y desplazas un tramo, se modificará ese segmento de la ruta; en cambio, si haces lo mismo con un marcador de punto de referencia (incluidos el punto de partida y el destino), se modificarán los segmentos de la ruta que pasen por ese punto de referencia.

Debido a que el cliente es quien modifica y renderiza las instrucciones arrastrables, te recomendamos que supervises y controles el evento directions_changed de DirectionsRenderer para recibir notificaciones cuando el usuario modifique las instrucciones sobre cómo llegar que se mostraron.

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 supervisa el evento directions_changed para actualizar la distancia total de todos los segmentos del viaje.

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

  const directionsService = new google.maps.DirectionsService();
  const directionsRenderer = new google.maps.DirectionsRenderer({
    draggable: true,
    map,
    panel: document.getElementById("panel") as HTMLElement,
  });

  directionsRenderer.addListener("directions_changed", () => {
    const directions = directionsRenderer.getDirections();

    if (directions) {
      computeTotalDistance(directions);
    }
  });

  displayRoute(
    "Perth, WA",
    "Sydney, NSW",
    directionsService,
    directionsRenderer
  );
}

function displayRoute(
  origin: string,
  destination: string,
  service: google.maps.DirectionsService,
  display: google.maps.DirectionsRenderer
) {
  service
    .route({
      origin: origin,
      destination: destination,
      waypoints: [
        { location: "Adelaide, SA" },
        { location: "Broken Hill, NSW" },
      ],
      travelMode: google.maps.TravelMode.DRIVING,
      avoidTolls: true,
    })
    .then((result: google.maps.DirectionsResult) => {
      display.setDirections(result);
    })
    .catch((e) => {
      alert("Could not display directions due to: " + e);
    });
}

function computeTotalDistance(result: google.maps.DirectionsResult) {
  let total = 0;
  const myroute = result.routes[0];

  if (!myroute) {
    return;
  }

  for (let i = 0; i < myroute.legs.length; i++) {
    total += myroute.legs[i]!.distance!.value;
  }

  total = total / 1000;
  (document.getElementById("total") as HTMLElement).innerHTML = total + " km";
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -24.345, lng: 134.46 }, // Australia.
  });
  const directionsService = new google.maps.DirectionsService();
  const directionsRenderer = new google.maps.DirectionsRenderer({
    draggable: true,
    map,
    panel: document.getElementById("panel"),
  });

  directionsRenderer.addListener("directions_changed", () => {
    const directions = directionsRenderer.getDirections();

    if (directions) {
      computeTotalDistance(directions);
    }
  });
  displayRoute(
    "Perth, WA",
    "Sydney, NSW",
    directionsService,
    directionsRenderer,
  );
}

function displayRoute(origin, destination, service, display) {
  service
    .route({
      origin: origin,
      destination: destination,
      waypoints: [
        { location: "Adelaide, SA" },
        { location: "Broken Hill, NSW" },
      ],
      travelMode: google.maps.TravelMode.DRIVING,
      avoidTolls: true,
    })
    .then((result) => {
      display.setDirections(result);
    })
    .catch((e) => {
      alert("Could not display directions due to: " + e);
    });
}

function computeTotalDistance(result) {
  let total = 0;
  const myroute = result.routes[0];

  if (!myroute) {
    return;
  }

  for (let i = 0; i < myroute.legs.length; i++) {
    total += myroute.legs[i].distance.value;
  }

  total = total / 1000;
  document.getElementById("total").innerHTML = total + " km";
}

window.initMap = initMap;
index.js