Ruta Google Maps desde formulario

En este ejemplo vamos a ver como podemos crear una Ruta Google Maps desde formulario. Es decir vamos a presentar al usuario un formulario dónde podrá elegir el origen y el destino y mediante esos datos le vamos a pintar la ruta en un mapa de Google Maps mediante su API.

Lo primero que te recomendaría que le echases un ojo a los artículos sobre uso del API de Google Maps y si vas a empezar que realizases el ejemplo de Cargar un Mapa de Google Maps.

Pero empecemos a crear el ejemplo de cargar una ruta Google Maps desde formulario. Lo primero que vamos a hacer es poner el área del mapa y de la ruta en una página web.

Como podéis observar hemos dividido la pantalla en dos partes, a la izquierda irá el mapa y a la derecha la explicación de la ruta.

Ahora vamos a cargar Google Maps. Y además posicionaremos un mapa por defecto. Lo primero será cargar la librería de Google Maps.

Y luego inicializar el mapa.

var map;

function initialize(){  	
  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); 
}

google.maps.event.addDomListener(window, 'load', initialize);

Vemos como utilizando el objeto Map hemos cargado el mapa sobre la capa que habíamos definido como map_canvas. En este caso no nos hemos complicado mucho la vida y hemos puesto un punto concreto del mapa. Pero si quieres hacerlo más cercano al usuario puedes ponerle su ubicación actual, para ello revisa el ejemplo Geolocalizando a un usuario con Google Maps y HTML5.

Ahora vamos a crear un formulario con dos campos, origen y destino, y un botón para calcular la ruta.


Origen:

Destino:

Sobre el botón vamos a crear un escuchador de eventos mediante el método .addEventListener(). Básicamente para que se lance el cálculo de la ruta ante un click del botón.

var boton = document.getElementById("calcularRuta");

boton.addEventListener("click", function(ev){
	
	var origen = document.getElementById("origen").value;
	var destino = document.getElementById("destino").value;
	
	cargarRuta(origen,destino);
	
	ev.preventDefault();	
	
},false);

Vemos que utilizamos el método .preventDefault() para evitar que se siga ejecutando el comportamiento normal del click y únicamente haga lo que determinemos en la función cargarRuta(). A esta función cargarRuta() se le pasan los valores de los campos del formulario a los que hemos accedido mediante el método .getElementById().

Pasemos a ver como cargar la ruta. Lo primero será construir un objeto request que indique el origen, destino y el modo de ruta a utilizar. En nuestro caso vamos a utilizar el modo conducción o google.maps.TravelMode.DRIVING.

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

Ahora necesitamos crear un objeto DirectionsService que será el calcule la ruta y un objeto DirectionsRenderer que será el que la pinte.

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

directionsDisplay.setMap(map);
var panel = document.getElementById("directionsPanel");
panel.innerHTML = ""; // Vacío el panel, por si buscamos varias veces
directionsDisplay.setPanel(panel);
	
directionsService.route(request, function(result, status) {
  if (status == google.maps.DirectionsStatus.OK) {
    directionsDisplay.setDirections(result);
  }
});

Al objeto encargado de la visualización DirectionsRenderer hay que indicarle dónde esta el mapa y dónde esta la ruta. Es importante que en el caso de la ruta borremos el contenido de lo que haya ya calculado (si se están calculando diferentes rutas) ya que si no añadirá siempre el contenido al final.

De esta forma tan sencilla hemos creado una página que permita calcular una ruta Google Maps desde formulario.

Twittear

Compartir18

18 Compartir