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:
- Ve a la consola de Google Cloud.
- 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.
- En la lista de APIs del panel, busca API de Directions.
- Si ves la API en la lista, no necesitas hacer nada más. Si la API no está en la lista, habilítala:
- 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.
- Busca API de Directions y selecciónala en la lista de resultados.
- 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 unaString
(por ejemplo, "Chicago, IL"), como un valor deLatLng
o como un objeto Place. Si usas un objeto Place, puedes especificar un ID de lugar, una cadena de consulta o una ubicaciónLatLng
. 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 campoorigin
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 quetravelMode
esTRANSIT
. 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 quetravelMode
esDRIVING
. 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 deDirectionsWaypoint
. 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 deLatLng
, como un objeto Place o como unaString
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 loswaypoints
proporcionados se puede optimizar si se reordenan los puntos de referencia de una forma más eficiente. Si el valor estrue
, el servicio Directions mostrará loswaypoints
reordenados en un campowaypoint_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 entrue
, 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 entrue
, indica que las rutas calculadas deben evitar los ferris, si es posible.avoidHighways
(opcional), cuando se establece entrue
, indica que las rutas calculadas deben evitar las autopistas principales, si es posible.avoidTolls
(opcional), cuando se establece entrue
, 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 objetoDate
. Si se especifica la hora de llegada, se ignorará la hora de salida.departureTime
(opcional) especifica la hora de salida deseada como un objetoDate
.departureTime
se ignorará si se especificaarrivalTime
. Si no se especifica ningún valor paradepartureTime
oarrivalTime
, el valor predeterminado es ahora (es decir, la hora actual).modes[]
(opcional) es un array que contiene uno o más literales del objetoTransitMode
. Este campo solo puede especificarse si en la solicitud se incluye una clave de API. CadaTransitMode
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 objetodrivingOptions
sea válido) especifica la hora de salida deseada como un objetoDate
. 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 campodepartureTime
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 incluyedrivingOptions
), 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 campoduration_in_traffic
de la respuesta, que contiene el tiempo previsto en el tráfico según los promedios históricos. La configuración predeterminada esbestguess
. Se permiten los siguientes valores:bestguess
(predeterminado) indica que el valor deduration_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 dedepartureTime
al momento presente, más importancia cobrará el tráfico en tiempo real.pessimistic
indica que el valor deduration_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 deduration_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 unDirectionsResult
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 camposDirectionsWaypoint
enDirectionsRequest
. 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 laDirectionsRequest
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:
- Crea un objeto
DirectionsRenderer
. - Llama a
setMap()
en el procesador para vincularlo al mapa que se pasó. - Llama a
setDirections()
en el procesador y pásale elDirectionsResult
como se indicó más arriba. Debido a que el procesador es unMVCObject
, 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>
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>
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>
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 objetosDirectionsGeocodedWaypoint
, y cada uno incluye detalles sobre la geocodificación del origen, el destino y los puntos de referencia.routes[]
contiene un array de objetosDirectionsRoute
. Cada ruta indica una forma de ir desde el origen hasta el destino proporcionados enDirectionsRequest
. Por lo general, solo se muestra una ruta para cada solicitud, a menos que el campoprovideRouteAlternatives
de la solicitud esté configurado comotrue
, 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 valoraddress
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 elplace_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 objetosDirectionsLeg
, 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 unDirectionsLeg
). Cada etapa consta de una serie deDirectionStep
.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
aDirectionsRequest
.overview_path
contiene un array deLatLng
que representa una ruta aproximada (unificada) del resultado de las instrucciones sobre cómo llegar.overview_polyline
contiene un solo objetopoints
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 objetoLatLngBounds
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 objetoDirectionsRenderer
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 objetosDirectionsStep
que denota información sobre cada paso individual del segmento del viaje.distance
indica la distancia total cubierta por este segmento, como un objetoDistance
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 unaUnitSystem
en la consulta original. Ten en cuenta que, independientemente del sistema de unidades que uses, el campodistance.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 objetoDuration
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
estrue
. - La solicitud se realiza específicamente para obtener la ruta en auto (
mode
se establece endriving
). - El
departureTime
se incluye como parte del campodrivingOptions
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.
- La solicitud no incluye puntos de referencia de parada. Es decir, no incluye puntos de referencia en los que
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 objetoTime
con tres propiedades:value
es la hora especificada como un objetoDate
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 objetoTime
.departure_time
solo está disponible para las rutas en transporte público.start_location
contiene laLatLng
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 questart_location
sea diferente del origen proporcionado para este segmento si, por ejemplo, una ruta no está cerca del origen.end_location
contiene laLatLng
del destino de este segmento. Debido a queDirectionsService
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 queend_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 objetoDistance
. (Consulta la descripción deDirectionsLeg
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 objetoDuration
. (Consulta la descripción deDirectionsLeg
más arriba). Este campo puede no definirse si se desconoce la duración.start_location
contiene el objetoLatLng
geocodificado del punto de partida de este paso.end_location
contiene el objetoLatLng
del destino de este paso.polyline
contiene un solo objetopoints
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 objetoDirectionsStep
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 elTravelMode
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 deLatLngs
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 objetoTransitStop
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 objetoLatLng
.
departure_stop
contiene un objetoTransitStop
que representa la estación o la parada de salida.arrival_time
contiene la hora de llegada, especificada como un objetoTime
con tres propiedades:value
es la hora especificada como un objetoDate
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 objetoTime
.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 valorheadway
de 600, se debe prever una espera de diez minutos en caso de perder un autobús.line
contiene un literal del objetoTransitLine
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 deTransitLine
.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 objetoTransitAgency
. El objetoTransitAgency
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 objetoVehicle
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:
Valor | Definición |
---|---|
VehicleType.RAIL |
Ferrocarril |
VehicleType.METRO_RAIL |
Transporte en tren ligero |
VehicleType.SUBWAY |
Tren ligero subterráneo |
VehicleType.TRAM |
Tren ligero 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 |
El transporte "share taxi" es una clase de autobús que puede dejar y recoger pasajeros en cualquier punto de su recorrido. |
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 normalmente consta de dos coches, y cada uno actúa como contrapeso del otro |
VehicleType.OTHER |
Se mostrará este tipo para todos los demás vehículos. |
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>
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 entrue
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.
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 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.
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;