257

Código Google Maps para pintar rutas.

January 20, 2013

Publicidad / Advertisement

Servicios de la versión 3 del API de JavaScript de Google Maps – Google Maps API — Google Developers

gmaps-pintar-rutas
 

Servicios de la versión 3 del API de JavaScript de Google Maps – Google Maps API — Google Developers.

 

 

Servicios de la versión 3 del API de JavaScript de Google Maps

Nota: la versión 3 de Google Maps JavaScript API que se menciona en estas páginas es ahora la versión oficial del API de JavaScript. La versión 2 de esta API se ha descartado oficialmente, de acuerdo con nuestra política de funciones obsoletas. Te animamos a que migres el código a esta nueva versión actualizada y mejorada.

  1. Codificación geográfica
    1. Solicitudes de codificación geográfica
    2. Respuestas de codificación geográfica
    3. Codificación geográfica inversa
    4. Cómo especificar la ventana gráfica
    5. Especificación del código de región
  2. Indicaciones
    1. Solicitudes de indicaciones
      1. Modos de viaje
      2. Sistemas de unidades
    2. Cómo procesar indicaciones
      1. Códigos de estado de las indicaciones
      2. Cómo visualizar DirectionsResult
    3. El objeto DirectionsResults
      1. Rutas
      2. Tramos
      3. Pasos
    4. Inspección de DirectionsResults
    5. Cómo usar hitos en las rutas
    6. Rutas arrastrables
  3. Distance Matrix
    1. Límites y requisitos de uso
    2. Solicitudes de Distance Matrix
    3. Respuestas de Distance Matrix
      1. Resultados
      2. Códigos de estado
      3. Análisis de los resultados
  4. Elevation
    1. Solicitudes de Elevation
      1. Solicitudes de LocationElevation
      2. Solicitudes de PathElevation
    2. Respuestas de Elevation
      1. Estado de Elevation
      2. Resultados de Elevation
    3. Ejemplos de Elevation
  5. Street View
    1. Cómo usar el mapa de Street View
    2. Panorámicas de Street View
      1. Contenedores de Street View
      2. Ubicaciones de Street View
      3. Puntos de vista de Street View
    3. Superposiciones en Street View
    4. Eventos de Street View
    5. Cómo personalizar los controles de Street View
    6. Acceso directo a datos de Street View
    7. Cómo suministrar panorámicas de Street View personalizadas
      1. Cómo crear panorámicas personalizadas
      2. Cómo crear mosaicos de panorámicas personalizadas
      3. Gestión de solicitudes de panorámicas personalizadas
  6. Imágenes con nivel de zoom máximo
    1. Solicitudes de MaxZoom
    2. Respuestas de Elevation

Codificación geográfica

La codificación geográfica es el proceso de transformar direcciones (como “1600 Amphitheatre Parkway, Mountain View, CA”) en coordenadas geográficas (como 37.423021 de latitud y -122.083739 de longitud), que se pueden utilizar para colocar marcadores o situar el mapa.

El API de Google Maps proporciona una clase geocoder que permite codificar de forma geográfica las direcciones de forma dinámica a partir de los datos introducidos por el usuario. Estas solicitudes son limitadas para evitar un abuso del servicio. Si por el contrario quieres codificar de forma geográfica direcciones conocidas y estáticas, consulta la documentación del API de codificación geográfica.

Solicitudes de codificación geográfica

El acceso al servicio de asignación de identificadores geográficos tiene lugar de forma asíncrona, dado que el API de Google Maps necesita realizar 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 geocoder puede devolver más de un resultado.

Debes acceder al servicio de asignación de identificadores geográficos del API de Google Maps desde tu código a través del objeto google.maps.Geocoder. El método Geocoder.geocode() inicia la solicitud al servicio de asignación de identificadores geográficos y transmite un objeto literal GeocodeRequest 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 GeocodeRequest contiene los siguientes campos:

{
 address:string,
 latLng:LatLng,
 bounds:LatLngBounds,
 region:string
}

A continuación, se explican estos campos.

* Nota: para la búsqueda puedes incluir un campo address o un campo latLng. (Si transmites un campo latLng, el geocoder realizará el proceso conocido como codificación geográfica inversa. Consulta la sección Codificación geográfica inversa para obtener más información).

Los parámetros bounds y region solo influirán en los resultados del geocoder, no los restringirán por completo.

Respuestas de codificación geográfica

Para el servicio de asignación de identificadores geográficos se necesita un método de devolución de llamada que se ejecute al recuperar los resultados del geocoder. Esta devolución de llamada debe transmitir dos parámetros que alojen (results) y un código (status), en ese orden. Puesto que el geocoder puede devolver más de una entrada, el objeto literal GeocoderResults es una matriz.

Resultados de codificación geográfica

El objeto literal GeocoderResults representa un único resultado de codificación geográfica y presenta la siguiente forma:

results[]:{
 types[]:string,
 formatted_address:string,
 address_components[]:{
   short_name:string,
   long_name:string,
   types[]:string
 },
 geometry:{
   location:LatLng,
   location_type:GeocoderLocationType
   viewport:LatLngBounds,
   bounds:LatLngBounds
 }
}

A continuación, se explican estos campos:

El geocoder devuelve las direcciones con la configuración de idioma preferida del navegador, o en el idioma especificado al cargar el código JavaScript del API mediante el parámetro language. (Para obtener más información, consulta la sección Localización).

Tipos de componentes de la dirección

La matriz types[] del resultado obtenido indica el tipo de dirección. Estos tipos también pueden aparecer dentro de las matrices address_components[] para indicar el tipo del componente de la dirección en concreto. Las direcciones del geocoder pueden tener diversos tipos; los tipos se pueden considerar “etiquetas”. Por ejemplo, muchas ciudades pueden estar clasificadas con los tipos political y locality.

El geocoder HTTP admite y devuelve los siguientes tipos:

Además de los tipos anteriores, los componentes de la dirección pueden presentar los siguientes:

Códigos de estado

El código status puede devolver uno de los siguientes valores :

En el siguiente ejemplo se codifica de forma geográfica una dirección y se coloca un marcador en los valores de latitud y de longitud obtenidos. Ten en cuenta que el controlador se transmite como una función literal anónima.

  var geocoder;
  var map;
  function initialize(){
    geocoder =new google.maps.Geocoder();
    var latlng =new google.maps.LatLng(-34.397,150.644);
    var myOptions ={
      zoom:8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map =new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  }

  function codeAddress(){
    var address = document.getElementById("address").value;
    geocoder.geocode({'address': address},function(results, status){
      if(status == google.maps.GeocoderStatus.OK){
        map.setCenter(results[0].geometry.location);
        var marker =new google.maps.Marker({
            map: map,
            position: results[0].geometry.location
        });
      }else{
        alert("Geocode was not successful for the following reason: "+ status);
      }
    });
  }

<body onload="initialize()">
 <div id="map_canvas" style="width: 320px; height: 480px;"></div>
  <div>
    <input id="address" type="textbox" value="Sydney, NSW">
    <input type="button" value="Encode" onclick="codeAddress()">
  </div>
</body>

Ver ejemplo (geocoding-simple.html).

Codificación geográfica inversa (búsqueda de direcciones)

El término codificación geográfica suele hacer referencia al proceso de traducir una dirección interpretable por humanos en una ubicación de un mapa. El proceso contrario, la traducción de una ubicación a una dirección interpretable por humanos, se conoce como codificación geográfica inversa.

Geocoder permite realizar directamente el proceso de codificación geográfica inversa. En lugar de transmitir una dirección (address) textual, hay que especificar un par latitud/longitud separado por comas en el parámetro latLng.

El siguiente ejemplo codifica de forma geográfica un valor de latitud y de longitud y centra el mapa en esa ubicación, a la vez que muestra una ventana de información en la que se indica la dirección con su formato. Se devuelve el segundo resultado, que es menos específico que el primero (en este caso es el nombre de un barrio):

  var geocoder;
  var map;
  var infowindow =new google.maps.InfoWindow();
  var marker;
  function initialize(){
    geocoder =new google.maps.Geocoder();
    var latlng =new google.maps.LatLng(40.730885,-73.997383);
    var myOptions ={
      zoom:8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map =new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  }

  function codeLatLng(){
    var input = document.getElementById("latlng").value;
    var latlngStr = input.split(",",2);
    var lat = parseFloat(latlngStr[0]);
    var lng = parseFloat(latlngStr[1]);
    var latlng =new google.maps.LatLng(lat, lng);
    geocoder.geocode({'latLng': latlng},function(results, status){
      if(status == google.maps.GeocoderStatus.OK){
        if(results[1]){
          map.setZoom(11);
          marker =new google.maps.Marker({
              position: latlng,
              map: map
          });
          infowindow.setContent(results[1].formatted_address);
          infowindow.open(map, marker);
        }
      }else{
        alert("Geocoder failed due to: "+ status);
      }
    });
  }

Ten en cuenta que en el ejemplo anterior se muestra el segundo resultado (al especificar results[1]). El geocoder inverso a menudo devuelve más de un resultado. Las “direcciones” de codificación geográfica no son solo direcciones postales, sino cualquier forma de definir de forma geográfica una ubicación. Por ejemplo, al codificar de forma geográfica un punto de la ciudad de Chicago, el punto codificado se puede etiquetar como una dirección postal, como la ciudad (Chicago), como su estado (Illinois) o como un país (Estados Unidos). Todas ellas son direcciones para el geocoder. El geocoder inverso devuelve todos esos resultados.

El geocoder inverso encuentra coincidencias con entidades políticas (países, provincias, ciudades y barrios), con direcciones y con códigos postales.

A continuación se indica la lista completa de las direcciones que ha devuelto la consulta anterior.

results[0].formatted_address:"275-291 Bedford Ave, Brooklyn, NY 11211, USA",
results[1].formatted_address:"Williamsburg, NY, USA",
results[2].formatted_address:"New York 11211, USA",
results[3].formatted_address:"Kings, New York, USA",
results[4].formatted_address:"Brooklyn, New York, USA",
results[5].formatted_address:"New York, New York, USA",
results[6].formatted_address:"New York, USA",
results[7].formatted_address:"United States"

Las direcciones se devuelven ordenadas de mayor a menor coincidencia. Normalmente, la dirección más exacta es el resultado más destacado, como en este caso. Ten en cuenta que se devuelven diferentes tipos de direcciones, desde la dirección postal más específica hasta entidades políticas menos específicas como barrios, ciudades, países, estados, etc. Si deseas obtener resultados de direcciones más generales, deberías examinar el campo results[].types.

Nota: la codificación geográfica inversa no es una ciencia exacta. El geocoder intentará obtener la ubicación localizable mediante dirección más cercana dentro de un determinado margen.

Ver ejemplo (geocoding-reverse.html)

Cómo especificar la ventana gráfica

También puedes indicar al servicio de codificación geográfica que establezca preferencia por una ventana gráfica determinada (expresada como cuadro delimitador). Para ello debes establecer el parámetro bounds dentro del objeto literal GeocodeRequest para definir los límites de esa ventana gráfica. Ten en cuenta que la especificación solo tiene preferencia por los resultados dentro de los límites, por lo que si existen resultados más relevantes fuera de estos límites, es posible que se incluyan.

Por ejemplo, un código geográfico de “Winnetka” normalmente devuelve esta localidad de la periferia de Chicago:

{
  "types":["locality","political"],
  "formatted_address":"Winnetka, IL, USA",
  "address_components":[{
    "long_name":"Winnetka",
    "short_name":"Winnetka",
    "types":["locality","political"]
  },{
    "long_name":"Illinois",
    "short_name":"IL",
    "types":["administrative_area_level_1","political"]
  },{
    "long_name":"United States",
    "short_name":"US",
    "types":["country","political"]
  }],
  "geometry":{
    "location":[-87.7417070,42.1083080],
    "location_type":"APPROXIMATE"
  }
}

Sin embargo, si se especifica un parámetro bounds en el que se defina un cuadro delimitador para el Valle de San Fernando de Los Ángeles, los resultados de la codificación geográfica devolverán el barrio llamado “Winnetka” de esa ubicación:

{
  "types":["sublocality","political"],
  "formatted_address":"Winnetka, California, USA",
  "address_components":[{
    "long_name":"Winnetka",
    "short_name":"Winnetka",
    "types":["sublocality","political"]
  },{
    "long_name":"Los Angeles",
    "short_name":"Los Angeles",
    "types":["administrative_area_level_3","political"]
  },{
    "long_name":"Los Angeles",
    "short_name":"Los Angeles",
    "types":["administrative_area_level_2","political"]
  },{
    "long_name":"California",
    "short_name":"CA",
    "types":["administrative_area_level_1","political"]
  },{
    "long_name":"United States",
    "short_name":"US",
    "types":["country","political"]
  }],
  "geometry":{
    "location":[34.213171,-118.571022],
    "location_type":"APPROXIMATE"
  }
}

Especificación del código de región

También puedes especificar que el servicio Geocoding 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”) ya conocidos, 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”).

Puedes enviar solicitudes de codificación geográfica para todos los dominios en los que la aplicación principal de Google Maps ofrezca la función de codificación geográfica. Ten en cuenta que la especificación solo tiene preferencia por un dominio específico, por lo que si existen otros resultados relevantes fuera de este dominio, es posible que se incluyan.

Por ejemplo, un código geográfico de “Toledo” devuelve el siguiente resultado, ya que el dominio predeterminado del servicio de codificación geográfica es Estados Unidos:

{
  "types":["locality","political"],
  "formatted_address":"Toledo, OH, USA",
  "address_components":[{
    "long_name":"Toledo",
    "short_name":"Toledo",
    "types":["locality","political"]
  },{
    "long_name":"Ohio",
    "short_name":"OH",
    "types":["administrative_area_level_1","political"]
  },{
    "long_name":"United States",
    "short_name":"US",
    "types":["country","political"]
  }]
}

Un código geográfico de “Toledo” cuyo campo region está definido como 'es' (España) devolverá resultados de la ciudad española:

{
  "types":["locality","political"],
  "formatted_address":"Toledo, España",
  "address_components":[{
    "long_name":"Toledo",
    "short_name":"Toledo",
    "types":["locality","political"]
  },{
    "long_name":"Toledo",
    "short_name":"TO",
    "types":["administrative_area_level_2","political"]
  },{
    "long_name":"Castilla-La Mancha",
    "short_name":"CM",
    "types":["administrative_area_level_1","political"]
  },{
    "long_name":"España",
    "short_name":"ES",
    "types":["country","political"]
  }]
}

Indicaciones

El objeto DirectionsService permite obtener indicaciones para distintos medios de transporte. Este objeto se comunica con el servicio Directions de Google Maps API, que recibe solicitudes de indicaciones y devuelve los resultados calculados. Puedes trabajar directamente con estos resultados de indicaciones o utilizar el objeto DirectionsRenderer para procesarlos.

Las indicaciones 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 Directions puede devolver indicaciones segmentadas mediante una serie de hitos. Las indicaciones 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 a Williamsburg Bridge”).

Solicitudes de indicaciones

El acceso al servicio Directions tiene lugar de forma asíncrona, dado que Google Maps API necesita realizar 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 Directions puede devolver más de un posible itinerario como un conjunto de rutas (routes[]) independientes.

Para utilizar indicaciones en la versión 3, crea un objeto de tipo DirectionsService y ejecuta DirectionsService.route() para iniciar una solicitud al servicio Directions, transmitiéndole 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:

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

A continuación, se explican estos campos:

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

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

Modos de viaje

Al calcular indicaciones, es necesario que especifiques el medio de transporte que desees utilizar. Actualmente, se admiten los siguientes modos de viaje:

Nota: las indicaciones para llegar a pie a veces no incluyen rutas peatonales evidentes, por lo que devuelven advertencias DirectionsResult que debes visualizar si no utilizas el procesador DirectionsRenderer predeterminado.

Sistemas de unidades

De forma predeterminada, las indicaciones 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:

Nota: esta configuración del sistema de unidades solo afecta al texto que se muestra al usuario. El resultado de las indicaciones 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 en indicaciones

El servicio Directions de Google Maps API devuelve resultados de indicaciones en función del dominio (la región o el país) desde el que se cargó el bootstrap de inicio 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 el bootstrap de inicio 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 Directions 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 indicaciones.

Cómo procesar indicaciones

El inicio de una solicitud de indicaciones 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 indicaciones

DirectionsStatus puede devolver los siguientes valores:

Debes asegurarte de que la consulta de indicaciones 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 indicaciones, 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 indicaciones asociadas.

En el siguiente ejemplo se calculan las indicaciones 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 directionDisplay;
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 myOptions ={
    zoom:7,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: chicago
  }
  map =new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  directionsDisplay.setMap(map);
}

function calcRoute(){
  var start = document.getElementById("start").value;
  varend= 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);
    }
  });
}

<div>
<b>Start:</b>
<select id="start" onchange="calcRoute();">
  <option value="chicago, il">Chicago</option>
  <option value="st louis, mo">StLouis</option>
  <option value="joplin, mo">Joplin, MO</option>
  <option value="oklahoma city, ok">OklahomaCity</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">LosAngeles</option>
</select>
<b>End:</b>
<select id="end" onchange="calcRoute();">
  <option value="chicago, il">Chicago</option>
  <option value="st louis, mo">StLouis</option>
  <option value="joplin, mo">Joplin, MO</option>
  <option value="oklahoma city, ok">OklahomaCity</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">LosAngeles</option>
</select>
</div>

Ver ejemplo (directions-simple.html).

En el siguiente ejemplo se muestran indicaciones con distintos medios de transporte entre Haight-Ashbury y Ocean Beach en San Francisco, CA:

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

function initialize(){
  directionsDisplay =new google.maps.DirectionsRenderer();
  var myOptions ={
    zoom:14,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: haight
  }
  map =new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  directionsDisplay.setMap(map);
}

function calcRoute(){
  var selectedMode = document.getElementById("mode").value;
  var request ={
      origin: haight,
      destination: oceanBeach,
      // Note that Javascript allows us to access the constant
      // using square brackets and a string value as its
      // "property."
      travelMode: google.maps.TravelMode[selectedMode]
  };
  directionsService.route(request,function(response, status){
    if(status == google.maps.DirectionsStatus.OK){
      directionsDisplay.setDirections(response);
    }
  });
}
<div>
<b>Mode of Travel:</b>
<select id="mode" onchange="calcRoute();">
  <option value="DRIVING">Driving</option>
  <option value="WALKING">Walking</option>
  <option value="BICYCLING">Bicycling</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 indicaciones en forma de una serie de pasos. Para ello, basta con ejecutar setPanel() en DirectionsRenderer, transmitiéndole el panel <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).

El ejemplo que aparece a continuación es idéntico al mostrado anteriormente, con la diferencia de que incluye un panel <div> en el que se mostrarán las indicaciones:

var directionDisplay;
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 myOptions ={
    zoom:7,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: chicago
  }
  map =new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  directionsDisplay.setMap(map);
  directionsDisplay.setPanel(document.getElementById("directionsPanel"));
}

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

// select UI elements omitted
<div><div id="map_canvas" style="float:left;width:70%; height:100%"></div>
<div id="directionsPanel" style="float:right;width:30%;height 100%"></div>

Ver ejemplo (directions-panel.html)

El objeto DirectionsResults

Al enviar una solicitud de indicaciones a DirectionsService, recibirás una respuesta que consta de un código de estado y un resultado, que es un objeto DirectionsResult. DirectionsResult es un objeto literal con un único campo:

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 que se hayan 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:

Tramos

El objeto DirectionsRoute heredado se llama ahora DirectionsLeg. Ten en cuenta que un tramo hace referencia a una etapa de una ruta principal.

DirectionsLeg define un único tramo de un viaje desde el origen hasta el destino de la ruta calculada. Si una ruta no contiene ningún hito, esta constará de un único tramo. Sin embargo, si incluye uno o más hitos, constará de uno o más tramos, que se corresponden con tramos concretos del viaje.

DirectionsLeg es un objeto literal que contiene los siguientes campos:

 

 

Publicidad / Advertisement

 

Topics: Desarrollo web, Internet | No Comments »

Comments