Cargar una ruta con Google Maps v3

30/Ago/2012 Google , , , , , , , , 10 Comentarios

El otro día vimos la nueva forma de cargar Google Maps en su versión 3. Y también veíamos que había cambiado su API. Así que nuestro ejemplo que Comunica dos direcciones en Google Maps se nos ha quedado un poco obsoleto (aunque sigue funcionando).

Ahora vamos a ver cómo cargar una ruta con Google Maps v3. Lo primero que haremos será cargar el API de Google Maps v3.

  1. <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

E instanciamos nuestro Mapa mediante la clase google.maps.Map:

  1. var mapOptions = {
  2. zoom: 12,
  3. center: new google.maps.LatLng(40.674389,-4.700432),
  4. mapTypeId: google.maps.MapTypeId.ROADMAP
  5. };
  6.  
  7. map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

Vemos que en el objeto mapOptions pasamos toda la parametrización del mapa.

Ahora vamos a definir la Ruta. Para la Ruta tenemos que saber que Google Maps v3 nos ofrece un par de objetos. El primero y más importante es google.maps.DirectionsService. Este objeto será el encargado de calcularnos una ruta y devolvernos un objeto DirectionsResult con toda la información de la ruta.

Para que el objeto DirectionsService nos calcule la ruta le tenemos que pasar un objeto DirectionsRequest indicándole la información de la ruta: origen, dsetino, forma de desplazamiento,...

  1. var request = {
  2. origin:"Madrid",
  3. destination:"Avila",
  4. travelMode: google.maps.TravelMode.DRIVING
  5. };

Este objeto DirectionsRequest se lo pasamos al DirectionsService para que calcule la ruta. Para ello ejecutamos el método .route()

  1. directionsService.route(request, function(result, status) {} });

El resultado del método .route() devuelve el DirectionsResult dentro del atributo result.

Una vez que tenemos el Resultado podemos hacer dos cosas. La primera será explotarlo para acceder a toda la información que contiene de las rutas y la segunda será representarlo visualmente. Para este segundo caso contamos con el objeto google.maps.DirectionsRenderer. Dicho objeto es capaz de renderizar un mapa o un texto con un DirectionsResult.

  1. var directionsDisplay = new google.maps.DirectionsRenderer();
  2.  
  3. directionsDisplay.setMap(map);
  4. directionsDisplay.setPanel(document.getElementById("directionsPanel"));

Para configurar el DirectionsRender utilizamos .setMap() para indicarle cual es el mapa -objeto Map- y .setPanel() para saber cual es la capa del documento HTML en la que volcar la ruta.

Solo nos quedará pasarle el DirectionsResult en la ejecución del método .route()

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

Ya tenemos cargada nuestra ruta de forma visual y textual con Google Maps v3.

10 comentarios en “Cargar una ruta con Google Maps v3”

Víctor Cuervo

chris

hola disculpa pero necesito de tu ayuda
tengo un codigo que me muestra solo los markets pero cuando quiero meter direcciones por medio de cajas de texto no
me deja cres que me puedas ayudar

Víctor Cuervo

Víctor Cuervo

Buenas chris,

Si tienes cajas de texto lo que tienes que hacer es acceder a su contenido getDocumentById() antes de montar la estructura request. Si por ejemplo has guardado el valor del formulario en dos variables: origen y destino puedes montar la request de la siguiente manera:

var request = {
  origin:origen,
  destination:destino,
  travelMode: google.maps.TravelMode.DRIVING
};

Espero que te oriente. De todas maneras voy a intentar publicar un código con este ejemplo.

Saludos.

Víctor Cuervo

Víctor Cuervo

Al final me ha gustado el tema del que hablabas y lo hemos dejado explicado en http://lineadecodigo.com/google/ruta-google-maps-desde-formulario/
Espero que te guste, saludos.

Víctor Cuervo

Daniel

Hola, puedes subir de nuevo el codigo por favor? 😀

Víctor Cuervo

Galathar

Se puede contar con el código fuente para poder trazar una ruta personalizada?

Víctor Cuervo

Pablo Jiménez

Hola Víctor me he dado la vuelta por internet tratando de resolver una duda,
¿Cómo puedo hacer para que “origin:” sea mi posición actual y “destination:” sea una dirección con longitud y latitud?, Alguna idea. me sería de mucha utilidad. Saludos y gracias por compartir tu conocimiento.

Víctor Cuervo

Pedro

Tengo el mismo dilema que tu!

Se que hace mas de un año de tu comentario, pero si tienes la solución me sería muy útil!
Gracias de antemano 🙂

Víctor Cuervo

Víctor Cuervo

Hola Pedro,

Revisa el artículo http://lineadecodigo.com/html5/geolocalizando-un-usuario-con-html5-en-google-maps/ que te explica cómo saber el origen del usuario, dónde esta ubicado. Seguro que te sirve.

Saludos.

Víctor Cuervo

Víctor Cuervo

Hola @fernando,

El DirectionPanel en sí creo que no lleva scroll. ¿Has probado a meterle en una capa y configurar el overflow:scroll? Por si hay suerte. 😉

Prueba también en nuestro foro por si alguien puede ayudarte.
http://www.dudasprogramacion.com/forum/google-maps

Saludos.

Víctor Cuervo

fernando

Gracias Victor pos tus aportes, yo te planteo una duda:
cuando aplico las rutas, resulta que en mi movil (htc), la barra de desplazamiento del texto
del directionpanel desaparece y tampoco se desplaza de manera tactil, por lo que solo se puede
leer el comienzo de la ruta.
Por mas que he indagado en la api de google no encuentro respuesta.
Saludos

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*