Versión 3 Del API de JavaScript de Google Maps

(1)

Iniciar sesión

Servicio de rutas

Descripción general

Solicitudes de rutas Medios de transporte

Opciones de transporte público Sistemas de unidades

Cómo especificar la región para obtener rutas Cómo procesar rutas

Códigos de estado de las rutas Cómo visualizar DirectionsResult El objeto DirectionsResults

Rutas Tramos Pasos

Información específica sobre transporte público Cómo inspeccionar DirectionsResults

Cómo usar hitos en las rutas Rutas arrastrables

Descripción general

El objeto DirectionsService permite obtener rutas para distintos medios de transporte. Este objeto se comunica con el

servicio de rutas del API de Google Maps, que recibe solicitudes de rutas y devuelve los resultados calculados. Puedes trabajar directamente con estos resultados de rutas o utilizar el objeto DirectionsRenderer para procesarlos.

Las rutas pueden especificar los orígenes y los destinos como cadenas de texto (por ejemplo, "Chicago, IL" o "Darwin, NSW, Australia") o como valores LatLng. El servicio de rutas puede devolver rutas segmentadas mediante una serie de hitos. Las

rutas se muestran como polilíneas que trazan la ruta en un mapa, o también como una serie de descripciones textuales en un elemento <div> (por ejemplo, "Gira a la derecha en la salida Williamsburg Bridge").

Solicitudes de rutas

El acceso al servicio de rutas tiene lugar de forma asíncrona, ya que el API de Google Maps debe hacer una llamada a un servidor externo. Por ese motivo, debes incluir un método de devolución de llamada para que se ejecute al completar la solicitud. Este método de devolución de llamada procesará los resultados. Ten en cuenta que el servicio de rutas puede devolver más de un posible itinerario como un conjunto de rutas (routes[]) independientes.

Para utilizar rutas en la versión 3, crea un objeto de tipo DirectionsService y ejecuta DirectionsService.route() para iniciar

una solicitud al servicio de rutas, incluyendo un objeto literal DirectionsRequest que contiene los términos de entrada y un

método de devolución de llamada que se ejecutará al recibir la respuesta. El objeto literal DirectionsRequest contiene los siguientes campos:

X Versión 3 del API de… Buscar

Productos Versión 3 del API de JavaScript de Google Maps

Versión 3 del API de JavaScript de Google Maps

4 Informar de un problema en la documentación

Guía para desarrolladores Introducción Límites de uso y facturación Conceptos Eventos Controles Estilos Superposiciones Capas Tipos de mapas Servicios Rutas Matriz de distancia Elevación Codificación geográfica Imágenes con nivel de zoom máximo Street View Bibliotecas Referencia del API Ejemplos de código Más recursos Blog Foro Preguntas frecuentes

---API de Google Maps for Business

Servicios web del API de Google Maps

API de Google Places API de Google Static Maps

(2)

{

origin:LatLng|String, destination:LatLng|String, travelMode:TravelMode, transitOptions:TransitOptions, unitSystem:UnitSystem, waypoints[]:DirectionsWaypoint, optimizeWaypoints:Boolean, provideRouteAlternatives:Boolean, avoidHighways:Boolean, avoidTolls:Boolean region:String }

A continuación, se explican estos campos.

origin (obligatorio): especifica la ubicación de salida desde la que se calcularán las rutas. Este valor se puede

especificar como String (por ejemplo, "Chicago, IL") o como LatLng.

destination (obligatorio): especifica la ubicación de llegada hasta la que se calcularán las rutas. Este valor se puede

especificar como String (por ejemplo, "Chicago, IL") o como LatLng.

travelMode (obligatorio): especifica el medio de transporte que se utilizará al calcular las rutas. Los valores válidos

se especifican en la sección Medios de transporte que aparece a continuación.

transitOptions (opcional): especifica los valores que se aplican únicamente a las solicitudes donde travelMode se

corresponde con google.maps.TravelMode.TRANSIT. Los valores válidos se describen en la sección Opciones de transporte público que aparece a continuación.

unitSystem (opcional): especifica el sistema de unidades que se utilizará para mostrar los resultados. Los valores

válidos se especifican en la sección Sistemas de unidades que aparece a continuación.

waypoints[] (opcional): especifica un conjunto de hitos (DirectionsWaypoint). Los hitos modifican una ruta al hacerla

pasar por ubicaciones concretas. Un hito se especifica como un objeto literal con los campos indicados a continuación.

location especifica la ubicación del hito como LatLng o como String que se codificará geográficamente. stopover es un valor booleano que indica que el hito es una parada en la ruta, lo cual provoca que la ruta se

divida en dos rutas diferentes.

(Para obtener más información sobre los hitos, consulta la sección Cómo usar hitos en las rutas que aparece a continuación).

optimizeWaypoints (opcional): especifica que la ruta con los hitos waypoints proporcionados se puede optimizar para

proporcionar la ruta más corta posible. Si su valor es true, el servicio de rutas devuelve los hitos waypoints

ordenados de nuevo en un campo waypoint_order.Para obtener más información, consulta la sección Cómo usar hitos en las rutas que aparece a continuación.

provideRouteAlternatives (opcional): si se establece en true, indica que el servicio de rutas puede devolver más de

una ruta alternativa en la respuesta. Ten en cuenta que la obtención de rutas alternativas puede incrementar el tiempo de respuesta del servidor.

avoidHighways (opcional): si se establece en true, indica que las rutas calculadas deben evitar, si es posible, las

principales carreteras.

avoidTolls (opcional): si se establece en true, indica que las rutas calculadas deben evitar, si es posible, las

autopistas de peaje.

region (opcional): es el código de región, especificado como un valor de dos caracteres ccTLD ("dominio de nivel

superior"). Para obtener más información, consulta la sección Cómo especificar la región para obtener rutas que aparece a continuación.

A continuación, se muestra una solicitud DirectionsRequest de ejemplo:

Street View API de Google Earth API obsoletas

(3)

{

origin:"Chicago, IL",

destination:"Los Angeles, CA", waypoints:[

{

location:"Joplin, MO", stopover:false },{

location:"Oklahoma City, OK", stopover:true

}],

provideRouteAlternatives: false, travelMode:TravelMode.DRIVING, unitSystem:UnitSystem.IMPERIAL }

Medios de transporte

Al calcular rutas, es necesario especificar el medio de transporte que se debe utilizar. A continuación, se indican los medios de transporte que se admiten actualmente.

google.maps.TravelMode.DRIVING (predeterminado): proporciona rutas estándar para llegar en coche a través de la

red de carreteras.

google.maps.TravelMode.BICYCLING: solicita rutas para llegar en bicicleta a través de carriles bici y vías

preferenciales para bicicletas.

google.maps.TravelMode.TRANSIT solicita rutas de transporte público.

google.maps.TravelMode.WALKING solicita rutas a pie a través de aceras y rutas peatonales.

Consulta la hoja de cálculo de cobertura de Google Maps para determinar en qué medida admite un país la presentación de rutas. Si solicita rutas para una región donde ese tipo de ruta no está disponible, la respuesta devolverá DirectionsStatus

como ZERO_RESULTS.

Las rutas para llegar a pie a veces no incluyen rutas peatonales evidentes, por lo que devuelven advertencias en

DirectionsRendererque debes visualizar si no utilizas el procesador predeterminado DirectionsResult.

Opciones de transporte público

Actualmente, el servicio de transporte público está en período de prueba. Durante esta fase, implementaremos límites para evitar abusos del API. Finalmente, estableceremos un límite en el número total de consultas por carga de mapa para que se realice un uso responsable del API.

Las opciones disponibles para una solicitud de rutas varía según el modo de transporte. Cuando se soliciten rutas de transporte público, las opciones avoidHighways, avoidTolls, waypoints[] y optimizeWaypoints se ignorarán. Puedes establecer

opciones específicas de rutas de transporte público mediante el objeto literal TransitOptions.

Las rutas de transporte público varían según los valores temporales. Las rutas solo se devolverán para valores temporales futuros.

El objeto literal TransitOptions contiene los siguientes campos: {

departureTime:Date, arrivalTime:Date }

A continuación, se explican estos campos:

departureTime (opcional): especifica la fecha de salida deseada como un objeto Date. El campo departureTime se

ignorará si se especifica arrivalTime. Si no se especifica ni departureTime ni arrivalTime, se establecerá la el valor

temporal actual de forma predeterminada.

arrivalTime (opcional): especifica la fecha de llegada deseada como un objeto Date. Si se especifica la fecha de

(4)

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

{

origin:"Hoboken NJ",

destination:"Carroll Gardens, Brooklyn", travelMode: google.maps.TravelMode.TRANSIT, transitOptions:{

departureTime: newDate(1337675679473) },

unitSystem: google.maps.UnitSystem.IMPERIAL }

Sistemas de unidades

De forma predeterminada, las rutas se calculan y se muestran en el sistema de unidades del país o de la región de origen (nota: los orígenes expresados mediante coordenadas de latitud y longitud en lugar de direcciones se convierten siempre en unidades métricas de forma predeterminada). 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. Para anular este sistema de unidades predeterminado, basta con que definas en la solicitud uno de ellos de forma explícita mediante cualquiera de los siguientes valores UnitSystem:

UnitSystem.METRIC indica el uso del sistema métrico. Las distancias se muestran en kilómetros. UnitSystem.IMPERIAL indica el uso del sistema imperial (británico). Las distancias se muestran en millas.

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

Cómo especificar la región para obtener rutas

El servicio de rutas del API de Google Maps devuelve resultados de rutas en función del dominio (la región o el país) desde el que se cargó la solicitud de inicialización de JavaScript. Dado que la mayoría de los usuarios cargan

http://maps.google.com/, esto supone la definición del dominio implícito correspondiente a Estados Unidos. Si cargas la

solicitud de inicialización desde un dominio compatible diferente, puede que los resultados se vean influidos por dicho dominio. Por ejemplo, las búsquedas de "San Francisco" pueden devolver diferentes resultados en función de que las aplicaciones carguen http://maps.google.com/ (Estados Unidos) o http://maps.google.es/ (España).

También puedes especificar que el servicio de rutas devuelva resultados asociados a una región en concreto mediante el parámetro region. Este parámetro toma un código de región, especificado como una subetiqueta region en lenguaje IANA.

En la mayoría de los casos, estas etiquetas se asignan directamente a valores de dos caracteres ccTLD ("dominio de nivel superior") como, por ejemplo, "uk" en "co.uk". En algunos casos, la etiqueta region también admite códigos ISO-3166-1, que

a veces son diferentes de los valores ccTLD (por ejemplo, "GB" para "Gran Bretaña").

Consulta la hoja de cálculo de cobertura de Google Maps para determinar en qué medida admite un país la presentación de rutas.

Cómo procesar rutas

El inicio de una solicitud de rutas al servicio DirectionsService mediante el método route() requiere la transmisión de una

devolución de llamada que se ejecuta al finalizar la solicitud de servicio. Esta devolución de llamada devuelve

DirectionsResult y un código DirectionsStatus en la respuesta.

Estado de la consulta de rutas

DirectionsStatus puede devolver los siguientes valores:

OK indica que la respuesta contiene un resultado DirectionsResult válido.

NOT_FOUND indica que al menos una de las ubicaciones especificadas en el origen, el destino o los hitos de la

solicitud no se pudo codificar de forma geográfica.

ZERO_RESULTSindica que no se pudo encontrar ninguna ruta entre el origen y el destino.

MAX_WAYPOINTS_EXCEEDED indica que se proporcionaron demasiados hitos (DirectionsWaypoint) en

(5)

API de Google Maps for Business pueden utilizar hasta 23 hitos, además del origen y del destino. En las rutas de transporte público no se admiten hitos.

INVALID_REQUEST indica que la solicitud DirectionsRequest proporcionada no era válida. Las causas más

comunes de este código de error son las solicitudes que no incluyen un origen o un destino, o las solicitudes de transporte público que incluyen hitos.

OVER_QUERY_LIMIT indica que la página web ha enviado demasiadas solicitudes dentro del período de tiempo

permitido.

REQUEST_DENIED indica que no se permite el uso del servicio de rutas en la página web.

UNKNOWN_ERROR indica que no se ha podido procesar una solicitud de rutas debido a un error del servidor. Puede

que la solicitud se realice correctamente si lo intentas de nuevo.

Debes asegurarte de que la consulta de rutas devuelva resultados válidos. Para ello, comprueba este valor antes de procesar el resultado.

Cómo visualizar DirectionsResult

DirectionsResult contiene el resultado de la consulta de rutas, que puedes controlar directamente o transmitirlo a un objeto DirectionsRenderer, que mostrará automáticamente el resultado en un mapa.

Para mostrar un resultado DirectionsResult mediante un objeto DirectionsRenderer, sigue los siguientes pasos:

1. Crea un objeto DirectionsRenderer.

2. Ejecuta setMap() en el procesador para vincularlo al mapa transmitido.

3. Ejecuta setDirections() en el procesador, transmitiéndole DirectionsResult tal y como se ha indicado anteriormente.

Dado que el procesador es un objeto MVCObject, detecta automáticamente cualquier cambio introducido en sus

propiedades y actualiza el mapa cuando se modifican las rutas asociadas.

En el siguiente ejemplo se calculan las rutas entre dos ubicaciones de la ruta 66, en las que los valores "start" y "end"

proporcionados en las listas desplegables determinan el origen y el destino. DirectionsRenderer controla la visualización de

la polilínea entre las ubicaciones indicadas, así como la colocación, si corresponde, de marcadores en el origen, en el destino y en los hitos.

var directionsDisplay;

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

function initialize(){

directionsDisplay = new google.maps.DirectionsRenderer(); var chicago = new google.maps.LatLng(41.850033,-87.6500523); var mapOptions ={

zoom:7,

mapTypeId: google.maps.MapTypeId.ROADMAP, center: chicago

}

map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); directionsDisplay.setMap(map);

}

function calcRoute(){

var start = document.getElementById("start").value; var end = document.getElementById("end").value; var request ={

origin:start, destination:end,

travelMode: google.maps.TravelMode.DRIVING };

directionsService.route(request, function(result, status){ if (status == google.maps.DirectionsStatus.OK){ directionsDisplay.setDirections(result); }

}); }

(6)

<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>

<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 (directions-simple.html)

En el siguiente ejemplo se muestran rutas con distintos medios de transporte entre Haight-Ashbury y Ocean Beach en San Francisco (California, Estados Unidos):

(7)

var haight = new google.maps.LatLng(37.7699298,-122.4469157);

var oceanBeach = new google.maps.LatLng(37.7683909618184,-122.51089453697205); function initialize(){

directionsDisplay = new google.maps.DirectionsRenderer(); var mapOptions ={

zoom:14,

mapTypeId: google.maps.MapTypeId.ROADMAP, center: haight

}

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 == google.maps.DirectionsStatus.OK){ directionsDisplay.setDirections(response); }

}); }

En el cuerpo HTML:

<div>

<strong>Mode of Travel: </strong>

<select id="mode"onchange="calcRoute();"> <option value="DRIVING">Driving</option> <option value="WALKING">Walking</option> <option value="BICYCLING">Bicycling</option> <option value="TRANSIT">Transit</option> </select>

</div>

Ver ejemplo (directions-travel-modes.html)

DirectionsRenderer no solo controla la visualización de la polilínea y cualquier marcador asociado, sino que también

controla la visualización textual de las rutas en forma de una serie de pasos. Para ello, basta con ejecutar setPanel() en DirectionsRenderer, transmitiéndole el elemento <div> en el que se mostrará esta información. De esta forma, también se

garantiza la visualización de la correspondiente información sobre derechos de autor y cualquier advertencia asociada a los resultados.

Las indicaciones textuales se proporcionan en la configuración de idioma preferida del navegador, o en el idioma especificado al cargar el API JavaScript mediante el parámetro language (para obtener más información, consulta la

sección Localización). En el caso de las rutas de transporte público, el valor de tiempo se mostrará en la zona correspondiente de la parada en cuestión.

El ejemplo que aparece a continuación es idéntico al mostrado anteriormente, con la diferencia de que incluye un panel

(8)

zoom:7,

}

directionsDisplay.setPanel(document.getElementById("directionsPanel")); }

var start = document.getElementById("start").value; var end = document.getElementById("end").value; var request ={

origin:start, destination:end,

}); }

En el cuerpo HTML:

<divid="map_canvas"style="float:left;width:70%; height:100%"></div> <divid="directionsPanel"style="float:right;width:30%;height 100%"></div> Ver ejemplo (directions-panel.html)

El objeto DirectionsResult

Al enviar una solicitud de rutas a DirectionsService, recibirás una respuesta que constará de un código de estado y un

resultado, que es un objeto DirectionsResult. DirectionsResult es un objeto literal con un único campo:

routes[] consta de un conjunto de objetos DirectionsRoute. Cada ruta indica una forma de llegar desde el origen al

destino proporcionados en DirectionsRequest. Normalmente, solo se devuelve una ruta por solicitud, a menos que se

haya establecido el campo provideRouteAlternatives de la solicitud en true, en cuyo caso se pueden devolver varias

rutas.

Rutas

El objeto DirectionsTrip heredado se llama ahora DirectionsRoute. Ten en cuenta que una ruta se refiere ahora a todo un

viaje de principio a fin, en lugar de a un solo tramo del viaje principal.

DirectionsRoute contiene un solo resultado del origen y del destino especificados. Esta ruta puede constar de uno o más

tramos (de tipo DirectionsLeg) en función de si se han especificado hitos. Además, la ruta también incluye información de

derechos de autor y advertencias que se deben mostrar al usuario junto con la información de la ruta.

DirectionsRoute es un objeto literal que contiene los siguientes campos:

legs[] contiene un conjunto de objetos DirectionsLeg, cada uno de los cuales incluye información sobre un tramo de

la ruta entre dos ubicaciones incluidas en ella. Se presentará un tramo diferente por cada hito o destino

especificado (una ruta sin hitos incluye exactamente un objeto DirectionsLeg). Cada tramo consta de una serie de

(9)

waypoint_order incluye un conjunto que indica el orden de los hitos de la ruta calculada. El orden de este conjunto

puede verse modificado si se transmite optimizeWaypoints: true a DirectionsRequest.

overview_path contiene un conjunto de objetos LatLng que representan una ruta aproximada (suavizada) de las

rutas resultantes.

bounds contiene un objeto LatLngBounds que indica los límites de la polilínea a lo largo de la ruta especificada. copyrights contiene el texto de los derechos de autor que se mostrará con la ruta.

Si no utilizas el objeto DirectionsRenderer proporcionado, deberás gestionar y mostrar esta información tú

mismo.

warnings[] contiene un conjunto de advertencias que se visualizará cuando se muestren las rutas. Si no utilizas el

objeto DirectionsRenderer proporcionado, deberás gestionar y mostrar estas advertencias tú mismo.

Tramos

El objeto DirectionsRoute heredado se llama ahora DirectionsLeg.

DirectionsLeg define un único tramo de un viaje desde el origen hasta el destino de la ruta calculada. Las rutas que no

contengan hitos constarán de un único "tramo", mientras que las rutas en las que se hayan definido uno o varios hitos constarán de uno o varios tramos correspondientes a los tramos específicos del trayecto.

DirectionsLeg es un objeto literal que contiene los siguientes campos:

steps[] contiene un conjunto de objetos DirectionsStep que proporciona información sobre cada uno de los pasos del

tramo del viaje.

distance indica la distancia total que abarca el tramo, como un objeto Distance que adopta la siguiente forma: value indica la distancia en metros.

text contiene una representación en cadena de la distancia, que se muestra de forma predeterminada en el

sistema de unidades que se utilizan en la ubicación de origen (por ejemplo, se utilizan millas para cualquier ubicación de origen perteneciente a Estados Unidos). Para anular este sistema de unidades, define UnitSystem

específicamente en la consulta original. Ten en cuenta que el campo distance.value siempre contendrá un valor

expresado en metros, independientemente del sistema de unidades que utilices. Si se desconoce la distancia, es posible que estos campos no estén definidos.

duration indica la duración total del tramo, como un objeto Duration que adopta la siguiente forma: value indica la duración en segundos.

text contiene una representación en cadena de la duración.

Si se desconoce la duración, es posible que estos campos no estén definidos.

arrival_time contiene la hora estimada de llegada de este tramo. Esta propiedad solo se transmite para rutas de

transporte público. El resultado se devuelve como un objeto Time con tres propiedades: value: valor de tiempo especificado como objeto de fecha (Date) de JavaScript.

text: valor de tiempo especificado como cadena. El valor de tiempo se muestra en la zona correspondiente

situada en la parte superior de la parada de transporte público.

time_zone contiene la zona donde se muestra el valor de tiempo de esta estación. El valor es el nombre de la

zona donde se muestra el valor de tiempo, tal y como se define en la base de datos de zonas de tiempo de IANA, por ejemplo, "América/Nueva_York".

departure_time contiene la hora estimada de llegada de este tramo, especificada como un objeto Time. El elemento departure_time solo se transmite para rutas de transporte público.

start_location contiene el valor LatLng del origen de este tramo. Dado que el servicio web de rutas utiliza la opción de

transporte más cercana a los puntos de partida y de llegada (normalmente, carreteras) para calcular las rutas entre dos ubicaciones, es posible que el valor start_location no coincida con el origen del tramo si, por ejemplo, no hay

carreteras cercanas al mismo.

end_location contiene el valor LatLng del destino de este tramo. Dado que DirectionsService utiliza la opción de

transporte más cercana a los puntos de partida y de llegada (normalmente, carreteras) para calcular las rutas entre dos ubicaciones, es posible que el valor end_location no coincida con el destino del tramo si, por ejemplo, no hay

carreteras cerca del mismo.

start_address contiene la dirección interpretable por humanos (normalmente una calle) del inicio de este tramo. end_address contiene la dirección interpretable por humanos (normalmente una calle) del fin de este tramo.

(10)

Pasos

DirectionsStep es la unidad más pequeña de una ruta e incluye un solo paso que describe una única instrucción específica

del viaje. Por ejemplo, "Gira a la izquierda en la calle W. 4th St.". Un paso no solo describe una instrucción, sino que también contiene información sobre la distancia y sobre el tiempo con respecto al paso siguiente. Por ejemplo, es posible que el paso etiquetado como "Tome la interestatal 80 oeste" especifique una duración de "60 kilómetros" y de "40 minutos" para indicar que el siguiente paso se encuentra a 60 kilómetros/40 minutos.

Cuando se utiliza el servicio de rutas para buscar rutas de transporte público, el conjunto de pasos incluye información específica sobre transporte público en forma de un objeto transit. Si en las rutas se incluyen varios medios de transporte, se

proporcionarán rutas detalladas para los pasos a pie y en coche en un conjunto steps[]. Por ejemplo, un paso a pie incluirá

rutas desde las ubicaciones de partida y de llegada: "Camina hasta la calle Innes Ave & Fitch St". Este paso incluirá rutas a pie detalladas para la ruta del conjunto steps[], por ejemplo: "Dirígete hacia el noroeste", "Gira a la izquierda en Arelious

Walker" y "Gira a la izquierda en Innes Ave".

DirectionsStep es un objeto literal que contiene los siguientes campos:

instructions contiene instrucciones para este paso dentro de una cadena de texto.

distance contiene la distancia entre este paso y el siguiente, como un objeto Distance (consulta la descripción de DirectionsLeg indicada anteriormente). Si no se conoce la distancia, es posible que este campo no esté definido. duration contiene el tiempo estimado necesario para realizar el recorrido entre este paso y el siguiente, como un

objeto Duration (consulta la descripción de DirectionsLeg indicada anteriormente). Si no se conoce la duración, es

posible que este campo no esté definido.

start_location contiene el valor LatLng codificado geográficamente del punto de partida de este paso. end_location contiene el valor LatLng del punto de llegada de este paso.

steps[] es un objeto literal DirectionsStep que contiene rutas detalladas a pie o en coche para rutas de transporte

público. Los subpasos solo se encuentran disponibles para rutas de transporte público.

travel_mode contiene el modo TravelMode utilizado en este paso. Las rutas de transporte público pueden incluir una

combinación de rutas a pie y de transporte público.

path contiene un conjunto de elementos LatLngs que describe el recorrido de este paso.

transit contiene información específica sobre transporte público como, por ejemplo, las horas de salida y llegada y el

nombre de la línea de transporte público.

Información específica sobre transporte público

Las rutas de transporte público devuelven información adicional que no es relevante para otros medios de transporte. Estas propiedades adicionales se exponen mediante el objeto TransitDetails, que se devuelve como propiedad de DirectionsStep.

Desde el objeto TransitDetails puedes acceder a información adicional sobre los objetos TransitStop, TransitLine, TransitAgency y VehicleType, tal y como se describe a continuación.

Detalles de transporte público

El objeto TransitDetails expone las siguientes propiedades:

arrival_stop contiene un objeto TransitStop que representa la estación o parada de llegada e incluye las siguientes

propiedades:

name: nombre de la estación o la parada (por ejemplo, "Union Square"),

location: ubicación de la estación o parada de transporte público, representada como un objeto 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: valor de tiempo especificado como objeto de fecha (Date) de JavaScript,

text: valor de tiempo especificado como cadena (el valor de tiempo se muestra en la zona correspondiente

situada en la parte superior de la parada de transporte público),

time_zone contiene la zona donde se muestra el valor de tiempo de esta estación (el valor es el nombre de la

zona donde se muestra el valor de tiempo, tal y como se define en la base de datos de zonas de tiempo de IANA, por ejemplo, "América/Nueva_York").

departure_time contiene la hora de salida, especificada como un objeto Time.

headsign especifica la dirección en la que viaja la línea, tal y como aparece en el vehículo o en la parada de salida.

Generalmente esta será la última estación.

headway, cuando se encuentra disponible, especifica el número previsto de segundos entre salidas de la misma

parada en ese momento. Por ejemplo, con un valor headway de 600, podrías prever una espera de diez minutos si

(11)

line contiene un objeto literal TransitLine que incluye información sobre la línea de transporte público utilizada en

este paso. El objeto TransitLine proporciona el nombre y el operador de la línea, así como otras propiedades

descritas en la documentación de referencia de TransitLine.

num_stops contiene el número de paradas de este paso. Incluye la parada de llegada, pero no la de salida. Por

ejemplo, si las rutas implican salir de la parada A, pasando por las paradas B y C hasta llegar a la parada D,

num_stops devolverá 3 paradas.

Línea de transporte público

El objeto TransitLine expone las siguientes propiedades:

name contiene el nombre completo de la línea de transporte público. Por ejemplo: "7 Avenue Express" o "14th St

Crosstown".

short_name contiene el nombre abreviado de la línea de transporte público. Generalmente este será un número de

línea como, por ejemplo, "2" o "M14".

agencies incluye un conjunto de objetos de tipo TransitAgency. Cada uno de los objetos TransitAgency proporciona

información sobre el operador de la línea e incluye las siguientes propiedades:

name contiene el nombre de la empresa de transporte público. url contiene la URL de la empresa de transporte público.

phone contiene el número de teléfono de la empresa de transporte público.

Si procesas rutas de transporte público de forma manual en lugar de utilizar el objeto DirectionsRenderer, debes

mostrar los nombres y las URL de las empresas de transporte público que prestan sus servicios para realizar los recorridos que aparecen en los resultados.

url contiene la URL de esta línea de transporte público tal y como la proporciona la empresa de transporte. icon contiene una URL correspondiente al icono asociado a esta línea. La mayoría de las ciudades utiliza iconos

genéricos que varían según el tipo de vehículo. Algunas líneas de transporte como, por ejemplo, el sistema de metro de Nueva York, tienen iconos específicos para cada línea.

color contiene el color que se utiliza normalmente para señalizar el transporte en cuestión. El color se especificará

como una cadena hexadecimal similar a esta: #FF0033.

text_color contiene el color del texto que se utiliza normalmente para señalizar la línea en cuestión. El color se

especificará como una cadena hexadecimal.

vehicle contiene un objeto Vehicle que incluye la siguientes propiedades: name contiene el nombre del vehículo de la línea. Por ejemplo: "Metro".

type contiene el tipo de vehículo utilizado en la línea en cuestión. Para obtener una lista completa de los valores

admitidos, consulta la documentación sobre el tipo de vehículo.

icon contiene una URL correspondiente al icono asociado normalmente al tipo de vehículo en cuestión. local_ icon contiene una URL correspondiente al icono asociado al tipo de vehículo en cuestión a nivel local.

Tipo de vehículo

El objeto VehicleType expone las siguientes propiedades:

Valor Definición

VehicleType.RAIL Ferrocarril

VehicleType.METRO_RAIL Tren ligero

VehicleType.SUBWAY Metro ligero

VehicleType.TRAM Tranvía

VehicleType.MONORAIL Monorraíl

VehicleType.HEAVY_RAIL Tren pesado

VehicleType.COMMUTER_TRAIN Tren de cercanías

VehicleType.HIGH_SPEED_TRAIN Tren de alta velocidad

VehicleType.BUS Autobús

(12)

VehicleType.TROLLEYBUS Trolebús

VehicleType.SHARE_TAXI Taxi colectivo (vehículo que recoge y deposita a los pasajeros en cualquier lugar

de la ruta que se le ha asignado)

VehicleType.FERRY Ferry

VehicleType.CABLE_CAR Teleférico (vehículo que se desplaza por un cable, generalmente sobre el suelo;

estos vehículos pueden ser del tipo VehicleType.GONDOLA_LIFT)

VehicleType.GONDOLA_LIFT Telecabina (teleférico)

VehicleType.FUNICULAR Funicular (vehículo que se utiliza para subir pendientes mediante un cable; suele

estar formado por dos cabinas que actúan como contrapeso una de la otra)

VehicleType.OTHER Para el resto de vehículos se devolverá este tipo.

Cómo inspeccionar DirectionsResults

Los componentes DirectionsResults (DirectionsRoute, DirectionsLeg, DirectionsStep y TransitDetails) se pueden

inspeccionar y utilizar al analizar cualquier respuesta de rutas.

Importante: si procesas rutas de transporte público de forma manual en lugar de utilizar el objeto DirectionsRenderer, debes mostrar los nombres y las URL de las empresas de transporte público que prestan sus servicios para realizar los recorridos que aparecen en los resultados.

En el siguiente ejemplo, se muestran las rutas para llegar a pie entre determinadas atracciones turísticas de la ciudad de Nueva York. Inspeccionamos el componente DirectionsStep de la ruta para añadir marcadores en cada paso y asociamos

información a una ventana de información (InfoWindow) con instrucciones para dichos pasos.

Como calculamos rutas para llegar a pie, también mostraremos advertencias al usuario en un panel <div>

independiente. var map; var directionsDisplay; var directionsService; var stepDisplay; var markerArray =[]; function initialize(){

// Instantiate a directions service.

directionsService = new google.maps.DirectionsService(); // Create a map and center it on Manhattan.

var manhattan = new google.maps.LatLng(40.7711329,-73.9741874); var mapOptions ={

zoom:13,

mapTypeId: google.maps.MapTypeId.ROADMAP, center: manhattan

}

map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); // Create a renderer for directions and bind it to the map.

var rendererOptions ={ map: map

}

directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions) // Instantiate an info window to hold step text.

stepDisplay = new google.maps.InfoWindow(); }

// First, clear out any existing markerArray // from previous calculations.

(13)

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: google.maps.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 == google.maps.DirectionsStatus.OK){

var warnings = document.getElementById("warnings_panel"); warnings.innerHTML =""+ response.routes[0].warnings +""; directionsDisplay.setDirections(response);

showSteps(response); }

}); }

function showSteps(directionResult){

// For each step, place a marker, and add the text to the marker's // info window. Also attach the marker to an array so we // can keep track of it and remove it when calculating new // routes.

var myRoute = directionResult.routes[0].legs[0]; for (var i =0; i < myRoute.steps.length; i++){ var marker = new google.maps.Marker({ position: myRoute.steps[i].start_point, map: map

});

attachInstructionText(marker, myRoute.steps[i].instructions); markerArray[i]= marker;

} }

function attachInstructionText(marker, text){

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

stepDisplay.open(map, marker); });

}

(14)

<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>

<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 (directions-complex.html)

Cómo usar hitos en las rutas

Tal y como se indica en la sección relativa a DirectionsRequest, también puedes especificar hitos (de tipo

DirectionsWaypoint) al calcular rutas con el servicio de rutas para llegar a pie, en bicicleta o en coche. Los hitos no están

disponibles en las rutas de transporte público. Los hitos permiten calcular rutas que pasen por ubicaciones adicionales, de modo que la ruta devuelta atraviese hitos concretos.

El número máximo de hitos permitido es ocho, además del origen y del destino. Los clientes del API de Google Maps for Business pueden utilizar hasta 23 hitos, además del origen y del destino. En las rutas de transporte público no se admiten hitos.

Un objeto waypoint consta de los siguientes campos: location (obligatorio): especifica la dirección del hito.

stopover (opcional): indica si el hito es una parada real en la ruta (true) o solo una preferencia que marca el deseo de

pasar por la ubicación especificada (false). El valor predeterminado de las paradas es true.

De forma predeterminada, el servicio de rutas calcula una ruta que atraviese los hitos especificados en el orden indicado. Opcionalmente, puedes transmitir objetos optimizeWaypoints: true en el elemento DirectionsRequest para que el servicio de

rutas reordene los hitos de forma más eficaz para optimizar la ruta proporcionada. Esta optimización es el resultado de aplicar el Problema del viajante. Todos los hitos deben definirse como paradas para que el servicio de rutas optimice la ruta. Si el servicio de rutas optimiza el orden de los hitos de acuerdo a tus instrucciones, se devolverá el nuevo orden en el campo

optimized_waypoints_order del objeto DirectionsResult.

En el ejemplo siguiente, se calculan diferentes rutas a través de Estados Unidos que utilizan diversos puntos de partida, puntos de llegada e hitos. Para seleccionar varios hitos, pulsa la tecla Ctrl mientras haces clic en cada uno de los elementos de la lista. Ten en cuenta que inspeccionamos routes.start_address y routes.end_address para disponer del texto

(15)

zoom:6,

}

var start = document.getElementById("start").value; var end = document.getElementById("end").value; var waypts =[];

var checkboxArray = document.getElementById("waypoints"); for (var i =0; i < checkboxArray.length; i++){

if (checkboxArray.options[i].selected == true){ waypts.push({

location:checkboxArray[i].value, stopover:true }); } } var request ={ origin: start, destination: end, waypoints: waypts, optimizeWaypoints: true,

directionsService.route(request, function(response, status){ if (status == google.maps.DirectionsStatus.OK){ directionsDisplay.setDirections(response); var route = response.routes[0];

var summaryPanel = document.getElementById("directions_panel"); summaryPanel.innerHTML ="";

// For each route, display summary information. for (var i =0; i < route.legs.length; i++){ var routeSegment = i+1;

summaryPanel.innerHTML +="<b>Route Segment: "+ routeSegment +"</b><br />"; summaryPanel.innerHTML += route.legs[i].start_address +" to ";

summaryPanel.innerHTML += route.legs[i].end_address +"<br />"; summaryPanel.innerHTML += route.legs[i].distance.text +"<br /><br />"; }

} }); }

Ver ejemplo (directions-waypoints.html)

Rutas arrastrables

Los usuarios pueden modificar las rutas para llegar en coche, a pie o en bicicleta que se muestran utilizando de forma dinámica un objeto DirectionsRenderer en caso de rutas arrastrables. Esto permite al usuario seleccionar y modificar rutas

haciendo clic en ellas y arrastrándolas en el mapa. Puedes indicar si la visualización del procesador permite direcciones arrastrables estableciendo la propiedad draggable en true. Las rutas de transporte público no pueden ser arrastrables.

Cuando las rutas son arrastrables, el usuario puede seleccionar cualquier punto de la ruta (o hito) del resultado devuelto y mover el componente indicado a una nueva ubicación. El objeto DirectionsRenderer se actualizará de forma dinámica para

mostrar la ruta modificada. Tras la publicación, se añadirá un hito de transición al mapa (que se indicará con un pequeño marcador blanco). Si seleccionas y desplazas un fragmento de la ruta se modificará ese tramo de la misma, mientras que si

(16)

seleccionas y mueves un marcador de hito (incluidos los puntos de inicio y fin) se modificará el tramo de la ruta que pase por ese hito.

Debido a que las rutas arrastrables se modifican y se procesan en el lado del cliente, es posible que quieras controlar y gestionar el evento directions_changed en el objeto DirectionsRenderer para recibir una notificación cuando el usuario

modifique las rutas mostradas.

El fragmento de código que aparece a continuación permite mostrar un recorrido de ida y vuelta desde Sídney hasta el interior de Nueva Gales del Sur (Australia). El código realiza el seguimiento del evento directions_changed para actualizar

la distancia total de todos los tramos del trayecto.

var rendererOptions ={ draggable: true };

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

var map;

var australia = new google.maps.LatLng(-25.274398,133.775136); function initialize(){

var mapOptions ={ zoom:7,

mapTypeId: google.maps.MapTypeId.ROADMAP, center: australia

};

directionsDisplay.setPanel(document.getElementById("directionsPanel")); google.maps.event.addListener(directionsDisplay,'directions_changed', function(){ computeTotalDistance(directionsDisplay.directions);

}); calcRoute(); } function calcRoute(){ var request ={ origin:"Sydney, NSW", destination:"Sydney, NSW",

waypoints:[{location:"Bourke, NSW"},{location:"Broken Hill, NSW"}], travelMode: google.maps.TravelMode.DRIVING

};

}); }

function computeTotalDistance(result){ var total =0;

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

total = total /1000.

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

Ver ejemplo (directions-draggable.html)

(17)

muestras de código tienen la Licencia Apache 2.0. Para obtener más información, consulta las Políticas del sitio. Last updated Enero 31, 2013.

Seguir +10m Search Explore Explore Products Showcase Events Communities Connect Connect Blog Google+ Community YouTube Channel Informar de un problema Jobs Programs Programs Groups Experts Startups Women Techmakers Ads Analytics Android Cast Chrome Cloud Glass Google Apps Google+ Maps Wallet YouTube Top Products Top Products Terms of Use