Servicio de indicaciones

Descripción general

Puedes calcular indicaciones (mediante una variedad de métodos de transporte) con el objeto DirectionsService. Este objeto se comunica con el servicio de indicaciones de la API de Google Maps, que recibe solicitudes de indicaciones y muestra una ruta eficaz. El tiempo de viaje es el factor principal que se optimiza, pero se pueden considerar otros factores, como la distancia, la cantidad de giros y muchos más. Puedes administrar estos resultados de instrucciones 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 string de consulta (por ejemplo, &Chita, IL, Illinois, Darwin, NSW, Australia, un valor LatLng o un objeto Place).

El servicio de indicaciones puede devolver indicaciones de varias partes utilizando 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> (por ejemplo, "Gire a la derecha en la rampa del puente de Williamsburg").

Cómo comenzar

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

Para ver tu lista de API habilitadas:

  1. Ve a Google Cloud Console.
  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 API 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 mostrar la pestaña Biblioteca. Como alternativa, en el menú lateral izquierdo, selecciona Biblioteca.
    2. Busca Directions API y selecciónala en la lista de resultados.
    3. Selecciona HABILITAR. Cuando finalice el proceso, la API de Directions aparecerá en la lista de API del panel.

Precios y políticas

Precios

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

Límites de frecuencia

Ten en cuenta lo siguiente sobre los límites de frecuencia para las solicitudes adicionales:

El límite de frecuencia se aplica por sesión de usuario, independientemente de la cantidad de usuarios que compartan el mismo proyecto. Cuando cargas la API por primera vez, se te asigna una cuota inicial de solicitudes. Una vez que usas esta cuota, la API aplica límites de frecuencia sobre las solicitudes adicionales por segundo. Si se realizan demasiadas solicitudes en un período determinado, la API muestra un código de respuesta OVER_QUERY_LIMIT.

El límite de frecuencia por sesión evita el uso de servicios del cliente para solicitudes por lotes. Para solicitudes por lotes, usa el servicio web de la API de Directions.

Políticas

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

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 ese motivo, debes pasar un método callback para ejecutarlo una vez completada la solicitud. Este método de devolución de llamada debe procesar los resultados. Ten en cuenta que el servicio de indicaciones puede mostrar más de un itinerario posible como un arreglo de routes[] independientes.

Para usar las instrucciones sobre cómo llegar en la API de Maps JavaScript, crea un objeto de tipo DirectionsService, llama a DirectionsService.route() para iniciar una solicitud al servicio de indicaciones y pásale un literal de objeto DirectionsRequest que contenga los términos de entrada y un método de devolución de llamada para ejecutar 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,
  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 un 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 ID de sitio de los servicios de geocodificación, búsqueda de sitios y autocompletado de sitios en la API de Maps JavaScript. Para ver un ejemplo en el que se usan los ID de lugar de Place Autocomplete, consulta Cómo hacerlo automáticamente y cómo llegar a un lugar.
  • destination (obligatorio) especifica la ubicación final 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 a continuación en Modos de viaje.
  • transitOptions (opcional) especifica valores que se aplican solo a solicitudes en las que travelMode es TRANSIT. Los valores válidos se describen en 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 Opciones de manejo a continuación.
  • unitSystem (opcional) especifica el sistema de unidades que se usará al mostrar los resultados. Los valores válidos se especifican en Sistemas de unidades a continuación.

  • waypoints[] (opcional) especifica un arreglo de DirectionsWaypoint. Los waypoints modifican una ruta al enrutarla con las ubicaciones especificadas. Un waypoint se especifica como un literal de objeto con campos que se muestran a continuación:

    • location especifica la ubicación del waypoint, como LatLng, como objeto Place o como String, que se geocodificará.
    • stopover es un booleano que indica que el punto de referencia es una parada en la ruta, lo que 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 que usa el waypoints proporcionado se puede optimizar reorganizando los waypoints en un orden más eficiente. Si es true, el servicio de indicaciones mostrará el waypoints reordenado en un campo waypoint_order.(Para obtener más información, consulta Cómo usar waypoints en rutas a continuación).
  • provideRouteAlternatives (opcional) cuando se establece en true especifica que el servicio de instrucciones sobre cómo llegar puede proporcionar más de una alternativa de ruta en la respuesta. Ten en cuenta que proporcionar alternativas de ruta puede aumentar el tiempo de respuesta del servidor. Esto solo está disponible para solicitudes sin waypoints 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 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) especifica 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 Restricción de regiones 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

Cuando calculas las instrucciones sobre cómo llegar, debes especificar el medio de transporte que se usará. Actualmente, se admiten los siguientes medios de transporte:

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

Consulta los Detalles de cobertura de Google Maps Platform para determinar en qué medida un país admite instrucciones sobre cómo llegar. Si solicitas instrucciones sobre cómo llegar a una región en la que ese tipo de dirección no está disponible, la respuesta mostrará el DirectionsStatus=&ZERO_RESULTS;

Nota: Es posible que las instrucciones sobre cómo llegar a pie no incluyan rutas peatonales claras, por lo que las instrucciones sobre cómo llegar a pie mostrarán advertencias en DirectionsResult, que debes mostrar si no usas el valor predeterminado de DirectionsRenderer.

Opciones de transporte

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

Las indicaciones de transporte están sujetas a la hora. Las indicaciones solo se mostrarán para horarios futuros.

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 salida.
  • departureTime (opcional) especifica la hora de salida deseada como un objeto Date. departureTime se ignorará si se especifica arrivalTime. El valor predeterminado es ahora (es decir, la hora actual) si no se especifica ningún valor para departureTime o arrivalTime.
  • modes[] (opcional) es un arreglo que contiene uno o más literales de objeto TransitMode. Este campo solo se puede incluir si la solicitud 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 subterráneo.
    • 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 restringir las opciones que se muestran en lugar de aceptar la mejor ruta predeterminada seleccionada por la API. Este campo solo se puede especificar si la solicitud incluye una clave de API. Se permiten los siguientes valores:
    • FEWER_TRANSFERS indica que para la ruta calculada debe preferirse un número limitado 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 en 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 de objeto drivingOptions sea válido) especifica la hora de salida deseada como un objeto Date. El valor se debe establecer en la hora actual o en una hora futura. No puede ser en el pasado. (La API convierte todas las fechas a UTC para garantizar un manejo coherente en todas las zonas horarias). Para los clientes del plan premium de Google Maps Platform, si incluyes departureTime en la solicitud, la API muestra la mejor ruta en función de las condiciones de tráfico esperadas en ese momento, además del 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), la ruta que se muestra suele ser una buena ruta sin tener en cuenta las condiciones del tráfico.
  • trafficModel (opcional) especifica las suposiciones que se usarán cuando se calcule el tiempo en el tráfico. Esta configuración afecta el valor que se muestra en el campo duration_in_traffic en 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 duration_in_traffic que se muestra debe ser la mejor estimación del tiempo de viaje según lo que se conoce sobre el estado del tráfico histórico y el tráfico en vivo. Cuanto más se acerque departureTime a la hora actual, más importante será el tráfico en vivo.
    • pessimistic indica que el valor de duration_in_traffic que se muestra debe ser más largo que el tiempo de viaje real en la mayoría de los días, aunque en algunos casos con condiciones de tráfico particularmente malas pueden exceder este valor.
    • optimistic indica que el valor de duration_in_traffic que se muestra debe ser más corto que el tiempo de viaje real en la mayoría de los días, aunque en algunos casos con condiciones de tráfico particularmente buenas, este valor puede ser más rápido.

A continuación, se muestra un ejemplo de DirectionsRequest con indicaciones para llegar 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 forma predeterminada, las indicaciones se calculan y se muestran con el sistema de unidades del país o región de origen. (Nota: Los orígenes expresados con coordenadas de latitud y longitud, en lugar de direcciones, siempre se establecen de forma predeterminada como unidades métricas). Por ejemplo, una ruta de “Chicago, IL” a “Toronto, ONT” mostrará los resultados en millas, mientras que la ruta inversa mostrará los resultados en kilómetros. Puedes anular este sistema de unidades configurando uno 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 kilómetros.

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

Restricción de regiones para indicaciones

El servicio de indicaciones de la Google Maps API muestra resultados de dirección influenciados por el dominio (región o país) desde el cual 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 compatible diferente, obtendrás resultados influenciados por ese dominio. Por ejemplo, las búsquedas de "San Francisco" pueden mostrar resultados diferentes de las aplicaciones que cargan https://maps.googleapis.com/ (Estados Unidos) y una que carga http://maps.google.es/ (España).

También puedes configurar el servicio de indicaciones para que muestre resultados restringidos a una región en particular mediante el parámetro region. Este parámetro toma un código de región, especificado 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 los valores de ccTLD (dominio de nivel superior), por ejemplo, dos caracteres, como &uk;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, “Gran Bretaña”).

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

  • Especifica solo un país o una región. Se ignoran varios valores y podrían dar como resultado una solicitud con errores.
  • Use solo subetiquetas de región de dos caracteres (formato CLDR de Unicode). Todas las demás entradas generarán errores.

La personalización de regiones solo se admite en los países y las regiones que admiten instrucciones. Consulta los Detalles de la cobertura de Google Maps Platform para ver la cobertura internacional de la API de Directions.

Representación de indicaciones

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

Solicitud de estado of indicaciones

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 pudo encontrar una ruta entre el origen y el destino.
  • MAX_WAYPOINTS_EXCEEDED indica que se proporcionaron demasiados campos DirectionsWaypoint en DirectionsRequest. Consulta la siguiente sección sobre los límites de puntos de referencia.
  • MAX_ROUTE_LENGTH_EXCEEDED indica que la ruta solicitada es demasiado larga y no se puede procesar. Este error se produce cuando se muestran indicaciones más complejas. Intenta reducir la cantidad de waypoints, giros o instrucciones.
  • INVALID_REQUEST indica que el DirectionsRequest proporcionado no es válido. Las causas más comunes de este código de error son las solicitudes a las que les falta un origen o un destino, o una solicitud de transporte público que incluye waypoints.
  • 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 de instrucciones sobre cómo llegar.
  • UNKNOWN_ERROR indica que no se pudo procesar una solicitud de instrucciones sobre cómo llegar debido a un error en el servidor. La solicitud puede tener éxito si vuelves a intentarlo.

Debes asegurarte de que la búsqueda de instrucciones muestre resultados válidos. Para ello, verifica este valor antes de procesar el resultado.

Cómo mostrar DirectionsResult

El DirectionsResult contiene el resultado de la consulta de instrucciones sobre cómo llegar, que puedes administrar tú mismo o pasar a un objeto DirectionsRenderer, que puede controlar automáticamente que se muestre 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 pasado.
  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 sus instrucciones asociadas hayan cambiado.

En el siguiente ejemplo, se calculan indicaciones entre dos ubicaciones en la ruta 66, donde el origen y el destino se establecen mediante los valores "start" y "end" dados en 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 indicaciones en las que se usan diferentes modos de viaje entre Haight-Ashbury y Ocean Beach en San Francisco, CA:

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 objeto DirectionsRenderer no solo controla la visualización de la polilínea y de cualquier marcador asociado, sino también la visualización textual de las instrucciones como una serie de pasos. Para ello, llama a setPanel() en tu DirectionsRenderer y pásale la <div> en la que se mostrará esta información. Esto también garantiza que muestres la información de derechos de autor adecuada y cualquier advertencia que pueda estar asociada con el resultado.

Las indicaciones textuales se proporcionarán con la configuración de idioma preferida del navegador o con el idioma especificado cuando se cargue el JavaScript de la API con el parámetro language. (Para obtener más información, consulta Localización). En el caso de las instrucciones sobre cómo llegar en transporte público, la hora se mostrará en la zona horaria de esa parada.

El siguiente ejemplo es idéntico al que se muestra arriba, pero incluye un panel <div> en el que se muestran 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 una solicitud de instrucciones sobre cómo llegar a DirectionsService, 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 arreglo de objetos DirectionsGeocodedWaypoint, cada uno con detalles sobre la codificación geográfica del origen, el destino y los puntos de referencia.
  • routes[] contiene un arreglo de objetos DirectionsRoute. Cada ruta indica una forma de ir desde el origen hasta el destino proporcionado 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 el que se pueden mostrar varias rutas.

Nota: La propiedad via_waypoint está obsoleta en las rutas alternativas. La versión 3.27 es la última versión de la API que agrega más datos mediante waypoints en rutas alternativas. Para las versiones 3.28 y posteriores de la API, puedes seguir implementando indicaciones arrastrables con el servicio de indicaciones inhabilitando 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.

Waypoints con geocodificación para indicaciones

Un DirectionsGeocodedWaypoint contiene detalles sobre la codificación geográfica 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 codificación geográfica. Este campo puede contener los siguientes valores:
    • "OK" indica que no se produjeron errores, que la dirección se analizó correctamente y que se mostró al menos un geocódigo.
    • "ZERO_RESULTS" indica que el geocódigo se realizó correctamente, pero no mostró resultados. Esto puede ocurrir si se pasa un valor address inexistente al geocodificador.
  • partial_match indica que el geocodificador no mostró una coincidencia exacta para la solicitud original, aunque sí pudo hacer coincidir parte de la dirección solicitada. Te recomendamos examinar la solicitud original en busca de errores ortográficos o una dirección incompleta.

    Las coincidencias parciales con mayor frecuencia ocurren para las direcciones que no existen dentro de la localidad que pasas en la solicitud. Las coincidencias parciales también se pueden mostrar cuando una solicitud coincide con dos o más ubicaciones en la misma localidad. Por ejemplo, "Hillpar St., Bristol, Reino Unido" mostrará una coincidencia parcial para Henry Street y Henrietta Street. Ten en cuenta que si una solicitud incluye un componente de dirección mal escrito, el servicio de geocodificación puede sugerir una dirección alternativa. Las sugerencias activadas 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 API de Google. Por ejemplo, puedes usar 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 usuarios y mucho más. Consulta la descripción general del ID de lugar.
  • types[] es un arreglo que indica el tipo de resultado resultante. Este arreglo contiene un conjunto de cero o más etiquetas que identifican el tipo de función que se muestra en el resultado. Por ejemplo, un geocódigo de "Chicago" muestra "localidad" que indica que "Chicago" es una ciudad y también muestra "político" que indica que es una entidad política.

Rutas de indicaciones

Nota: Se cambió el nombre del objeto DirectionsTrip heredado DirectionsRoute. Ten en cuenta que una ruta ahora se refiere a todo el viaje, de principio a fin, en lugar de simplemente al tramo principal de un viaje.

Un DirectionsRoute contiene un solo resultado del origen y el destino especificados. Esta ruta puede constar de una o más etapas (del tipo DirectionsLeg) según se hayan especificado waypoints o no. Además, la ruta también contiene información sobre derechos de autor y advertencias que se deben mostrar al usuario, además de la información de enrutamiento.

DirectionsRoute es un literal de objeto con los siguientes campos:

  • legs[] contiene un arreglo de objetos DirectionsLeg, cada uno de los cuales contiene información sobre una etapa de la ruta, a partir de dos ubicaciones dentro de la ruta determinada. Habrá un tramo separado para cada waypoint o destino especificado. (Una ruta sin waypoints contendrá exactamente un DirectionsLeg). Cada etapa consta de una serie de DirectionStep.
  • waypoint_order contiene un arreglo que indica el orden de los puntos de referencia en la ruta calculada. Este arreglo puede contener un orden modificado si a DirectionsRequest se le pasó optimizeWaypoints: true.
  • overview_path contiene un arreglo de LatLng que representa una ruta aproximada (unificada) de las indicaciones resultantes.
  • overview_polyline contiene un solo objeto points que contiene una representación de la polilínea codificada de la ruta. Esta polilínea es una ruta aproximada (unificada) de las indicaciones resultantes.
  • bounds contiene un LatLngBounds que indica los límites de la polilínea a lo largo de esta ruta determinada.
  • copyrights contiene el texto de derechos de autor que se mostrará para esta ruta.
  • warnings[] contiene un arreglo de advertencias que se mostrarán cuando se muestren estas instrucciones. 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 solo se muestra para solicitudes de transporte y en el caso de rutas en las que la información sobre tarifas está disponible para todas las etapas. 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 en la moneda especificada anteriormente.

Etapas de las indicaciones

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

Un DirectionsLeg define un solo tramo de un viaje desde el origen hasta el destino en la ruta calculada. Para las rutas que no contienen waypoints, la ruta constará de una única “pierna”, pero para las que definan uno o más waypoints, la ruta constará de uno o más tramos, que corresponden a los tramos específicos del viaje.

DirectionsLeg es un literal de objeto con los siguientes campos:

  • steps[] contiene un arreglo de objetos DirectionsStep que denota información sobre cada paso individual de la etapa del viaje.
  • distance indica la distancia total cubierta por esta etapa, 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 como se usa en el origen. (Por ejemplo, se usarán millas para cualquier origen dentro de Estados Unidos). Puedes anular este sistema de unidades configurando de forma específica un 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 ser indefinidos si se desconoce la distancia.

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

    • value indica la duración en segundos.
    • text contiene una representación de string 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 muestra si se cumplen todas las condiciones que figuran a continuación:

    • La solicitud no incluye waypoints de parada. Es decir, no incluye waypoints donde stopover sea true.
    • La solicitud es específica para obtener instrucciones sobre cómo llegar en auto (mode está configurado como driving).
    • El 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 legible de la duración.
  • arrival_time contiene la hora estimada de llegada para esta etapa. Esta propiedad solo se devuelve para indicaciones de transporte. 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 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 estimada para esta etapa, especificada como un objeto Time. departure_time solo está disponible para las indicaciones en transporte público.
  • start_location contiene el LatLng del origen de esta etapa. Debido a que el servicio web de indicaciones calcula las indicaciones entre ubicaciones mediante la opción de transporte más cercana (por lo general, una ruta) en los puntos de partida y llegada, es posible que start_location sea diferente al origen proporcionado para esta etapa si, por ejemplo, no hay una ruta cerca del origen.
  • end_location contiene el LatLng del destino de esta etapa. Debido a que DirectionsService calcula las indicaciones entre ubicaciones mediante la opción de transporte más cercana (por lo general, una ruta) en los puntos de partida y llegada, es posible que end_location sea diferente del destino proporcionado de esta etapa si, por ejemplo, no hay una ruta cerca del destino.
  • start_address contiene la dirección en lenguaje natural (por lo general, una dirección) del comienzo de esta etapa.

    Este contenido debe leerse tal como está. No analices de manera programática la dirección con formato.
  • end_address contiene la dirección en lenguaje natural (por lo general, una dirección) del final de esta etapa.

    Este contenido debe leerse tal como está. No analices de manera programática la dirección con formato.

Pasos de indicaciones

Un DirectionsStep es la unidad más atómica de una ruta en dirección, que contiene un solo paso que describe una instrucción específica y única en el viaje. Por ejemplo, "Gire a la izquierda en W". 4th St" El paso no solo describe la instrucción, sino que también contiene información sobre la distancia y la duración en relación con el siguiente paso. Por ejemplo, un paso indicado como "Fusionar hacia la I-80 Oeste" puede contener una duración de "37 millas" y de 40 minutos, lo que indica que el paso siguiente se encuentra a 37 millas o 40 minutos de este paso.

Cuando uses el servicio de instrucciones sobre cómo llegar para buscar instrucciones sobre cómo llegar en transporte público, el arreglo de pasos incluirá información específica sobre el transporte público en forma de objeto transit. Si las indicaciones incluyen varios medios de transporte, se proporcionarán instrucciones detalladas para los pasos de desplazamiento a pie o en automóvil en un array steps[]. Por ejemplo, un paso a pie incluirá instrucciones sobre cómo llegar desde las ubicaciones de inicio y finalización: "Caminar hasta Innes Ave & Fitch St". Ese paso incluirá instrucciones detalladas sobre cómo llegar a pie para esa ruta en el array steps[], por ejemplo: "Dirígete al noroeste" y 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 dentro de una string de texto.
  • distance contiene la distancia cubierta por este paso hasta el siguiente, como un objeto Distance. (Consulta la descripción de DirectionsLeg más arriba). Este campo puede ser indefinido 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 ser indefinido si se desconoce la duración.
  • start_location contiene el objeto LatLng geocodificado del punto de partida de este paso.
  • end_location contiene el LatLng del punto final 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 de objeto DirectionsStep que contiene instrucciones detalladas sobre cómo llegar a pie o en auto en las instrucciones sobre cómo llegar en transporte público. Solo hay subpasos disponibles para indicaciones de transporte.
  • travel_mode contiene el TravelMode que se usa en este paso. Las instrucciones sobre cómo llegar 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 arreglo de LatLngs que describe el curso 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

Las instrucciones sobre cómo llegar 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 para los objetos TransitStop, TransitLine, TransitAgency y VehicleType como se describe a continuación.

Detalles sobre el transporte

El objeto TransitDetails expone las siguientes propiedades:

  • arrival_stop contiene un objeto TransitStop que representa la estación o parada de llegada con las siguientes propiedades:
    • name es el nombre de la estación o parada de transporte público. p. ej., "Union Square".
    • location es la ubicación de la estación o parada de transporte público, representada como un LatLng.
  • departure_stop contiene un objeto TransitStop que representa la estación o 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 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, según se marca en el vehículo o la parada de salida. A menudo, será la estación terminal.
  • headway cuando está disponible, especifica la cantidad de segundos esperadas entre las salidas de la misma parada en este momento. Por ejemplo, con un valor headway de 600, esperarías diez minutos si pierdes tu autobús.
  • line contiene un literal de objeto TransitLine que contiene 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 partida. Por ejemplo, si las instrucciones incluyen salir de la parada A, pasar por las paradas B y C, y llegar a la parada D, num_stops mostrará 3.

Línea de transporte

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. Por lo general, es un número de línea, como "2" o "M14".
  • agencies es un arreglo 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 instrucciones sobre cómo llegar en transporte público de forma manual en lugar de usar el objeto DirectionsRenderer, debes mostrar los nombres y las URL de las empresas de transporte público que ofrecen los resultados.

  • url contiene una URL para esta línea de transporte, según 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 iconos genéricos que varían según el tipo de vehículo. Algunas líneas de transporte público, como el sistema de metro de Nueva York, tienen íconos específicos para esa línea.
  • color contiene el color que se usa comúnmente en la señalización para este transporte público. El color se especificará como una cadena hexadecimal; por ejemplo: #FF0033.
  • text_color contiene el color del texto que se usa comúnmente 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., "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 ícono comúnmente asociado con este tipo de vehículo.
    • local_icon contiene la URL del ícono asociado a este tipo de vehículo, según la señalización de transporte local.

Tipo de vehículo

El objeto VehicleType expone las siguientes propiedades:

Valor Definición
VehicleType.RAIL Transporte ferroviario.
VehicleType.METRO_RAIL Transporte en tren ligero.
VehicleType.SUBWAY Tren ligero subterráneo.
VehicleType.TRAM Tranvía sobre el suelo.
VehicleType.MONORAIL Monorriel.
VehicleType.HEAVY_RAIL Ferrocarril metropolitano.
VehicleType.COMMUTER_TRAIN Ferrocarril suburbano.
VehicleType.HIGH_SPEED_TRAIN Tren de alta velocidad.
VehicleType.BUS Autobús.
VehicleType.INTERCITY_BUS Autobús interurbano.
VehicleType.TROLLEYBUS Trolebús.
VehicleType.SHARE_TAXI Los taxis compartidos son un tipo de autobús con la opción de dejar y recoger pasajeros en cualquier punto de su ruta.
VehicleType.FERRY Ferry.
VehicleType.CABLE_CAR Un vehículo que funciona con un cable y generalmente sobre el suelo. Los teleféricos pueden ser del tipo VehicleType.GONDOLA_LIFT.
VehicleType.GONDOLA_LIFT Un funicular aéreo.
VehicleType.FUNICULAR Un vehículo que sube por una pendiente pronunciada a través de un cable. Un funicular suele consistir en dos vagones y cada uno actúa como contrapeso del otro.
VehicleType.OTHER Se devolverá este tipo para todos los demás vehículos.

Inspección de DirectionsResults

Los componentes DirectionsResults (DirectionsRoute, DirectionsLeg, DirectionsStep y TransitDetails) se pueden inspeccionar y usar cuando se analiza cualquier respuesta de instrucciones.

Importante: Si procesas instrucciones de transporte público de forma manual en lugar de usar el objeto DirectionsRenderer, debes mostrar los nombres y las URL de las empresas de transporte público que ofrecen los resultados.

En el siguiente ejemplo, se representan indicaciones para el desplazamiento a pie hacia determinadas atracciones turísticas en la ciudad de Nueva York. Inspeccionamos el DirectionsStep de la ruta a fin de agregar marcadores para cada paso y adjuntar información a un InfoWindow con texto instructivo para ese paso.

Nota: Como estamos calculando las instrucciones sobre cómo llegar a pie, también mostramos 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 waypoints en rutas

Como se indica en DirectionsRequest, también puedes especificar puntos de referencia (del tipo DirectionsWaypoint) cuando calculas rutas mediante el servicio de instrucciones sobre cómo llegar a pie, en bicicleta o en auto. No se admiten waypoints para indicaciones de transporte. Los waypoints te permiten calcular rutas a través de ubicaciones adicionales, en cuyo caso la ruta que se muestra pasa por los waypoints determinados.

Un elemento waypoint consta de los siguientes campos:

  • location (obligatorio) especifica la dirección del waypoint.
  • stopover (opcional) indica si este waypoint es una parada real en la ruta (true) o, en su lugar, solo una preferencia para enrutar a través de la ubicación indicada (false). Las paradas son true de forma predeterminada.

De forma predeterminada, el servicio de indicaciones calcula una ruta a través de los waypoints proporcionados en su orden dado. También puedes pasar optimizeWaypoints: true en DirectionsRequest para permitir que el servicio de indicaciones optimice la ruta proporcionada reorganizando los waypoints en un orden más eficiente. (Esta optimización es una aplicación del problema de los vendedores viajan). El tiempo de viaje es el factor principal que se optimiza, pero 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 escalas para que el servicio de indicaciones optimice su ruta.

Si le indicas al servicio de indicaciones que optimice el orden de sus waypoints, su orden se mostrará en el campo waypoint_order dentro del objeto DirectionsResult.

En el siguiente ejemplo, se calculan rutas de varios países en los Estados Unidos con una variedad de puntos de partida, de destino y de puntos de referencia. (Para seleccionar varios puntos de referencia, presiona Ctrl-clic cuando selecciones elementos dentro de la lista). Ten en cuenta que inspeccionamos routes.start_address y routes.end_address para proporcionarnos el texto del punto de partida y llegada de cada ruta.

TypeScript

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;

JavaScript

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;

Límites y restricciones de los waypoints

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

  • La cantidad máxima de waypoints permitidos cuando se usa el servicio de indicaciones en la API de Maps JavaScript es 25, más el 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 tienen 25 puntos de referencia, más el origen y el destino.
  • No se admiten waypoints para indicaciones de transporte.

Indicaciones arrastrables

Los usuarios pueden modificar las instrucciones sobre cómo llegar en bicicleta, a pie o en auto que se muestran con un objeto DirectionsRenderer de forma dinámica si son arrastrables, lo que le permite seleccionar y modificar rutas haciendo clic en las rutas resultantes del mapa y arrastrándolas. Para indicar si la pantalla de un procesador permite indicaciones arrastrables, establece su propiedad draggable en true. Las indicaciones de transporte no pueden convertirse en indicaciones arrastrables.

Cuando las indicaciones son arrastrables, un usuario puede seleccionar cualquier punto de la ruta (o punto de referencia) del resultado procesado y mover el componente indicado a una nueva ubicación. DirectionsRenderer se actualizará de forma dinámica para mostrar la ruta modificada. Después del lanzamiento, se agregará un punto de referencia de transición al mapa (indicado por un pequeño marcador blanco). Si seleccionas y mueves un segmento de ruta, se modificará ese tramo de la ruta, mientras que si seleccionas y mueves un marcador de punto de referencia (incluidos los puntos de inicio y final), se alterarán los tramos de la ruta que pasa por ese punto de referencia.

Debido a que las direcciones arrastrables se modifican y se renderizan del lado del cliente, es posible que desees supervisar y controlar el evento directions_changed en el DirectionsRenderer para recibir una notificación cuando el usuario haya modificado las indicaciones que se muestran.

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

TypeScript

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;

JavaScript

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;
Ver ejemplo

Probar la muestra