Linea de Codigo

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.

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

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

var mapOptions = {
  zoom: 12,
  center: new google.maps.LatLng(40.674389,-4.700432),
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
 
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,...

var request = {
  origin:"Madrid",
  destination:"Avila",
  travelMode: google.maps.TravelMode.DRIVING
};

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

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.

var directionsDisplay = new google.maps.DirectionsRenderer();
 
directionsDisplay.setMap(map);
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()

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

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