Cargando



Manejo de eventos en Google Maps

En este tutorial daremos un recorrido por los eventos que se manejan en el API de JavaScript de Google Maps y los usos más comunes que les podemos dar a estos en los mapas que creemos.


dic 15 2014 23:01
Profesional
El API de Javascript de Google Maps es sumamente poderoso ya que no solo permite la creación de los mapas como tal, sino que podemos ir un paso más allá extendiendo sus funcionalidades y utilizar vectores para agregar puntos de interés, ventanas desplegables, líneas y simulación de rutas.

Otro de los puntos fuertes de los mapas que implementamos y si alguna vez hemos trabajado con Javascript son los eventos, los cuales son el núcleo del lenguaje y están encargados de manejar la interacción del usuario con el sitio web, en este caso específico la interacción con nuestro mapa.

Trabajando con eventos


Antes de pasar a la práctica primero debemos conocer algo de la teoría detrás de los eventos manejados por el API, este usa el espacio de nombre google.maps.event para trabajar con los mismos. El mismo posee métodos estáticos para escuchar a los eventos definidos en el API y se utiliza el controlador de addListener() para registrar los mismos.

Sabiendo esto veamos algunos de los eventos más importantes disponibles en el API y que estaremos utilizando en nuestros ejemplos:

center_changed
Este evento es disparado cuando la propiedad del centro del mapa cambia.


click
Este evento es disparado cuando el usuario hace click sobre el mapa, es importante mencionar que excluye clicks en marcadores o ventanas de información.


drag
Este evento es disparado repetidamente cuando el usuario arrastra el mapa.


mousemove
Este evento es disparado cuando el usuario mueve su mouse por cualquier parte del contenedor del mapa.


rightclick
Este evento es disparado cuando el evento de menú contextual del DOM es disparado.


zoom_changed
Este evento es disparado cuando la propiedad del zoom del mapa cambia.


Es importante mencionar que a pesar que estos eventos pueden lucir como los eventos estándar del DOM no lo son, estos forman parte del API de Google Maps. Esto para evitar el problema donde los navegadores manejan distintos tipos de eventos para el DOM.

Mapas Sincronizados


Ya habiendo visto los eventos más utilizados por el API pasemos a la práctica para demostrar el uso de los mismos en la creación de nuestros mapas, el primer ejemplo de este tutorial será enfocado en eventos relacionados con el cambio de las propiedades del mapa lo que nos permitirá obtener una funcionalidad de mapas sincronizados, es decir, tener mapas con bases distintas que muestren la misma información sin importar cambios en su centro o en el zoom de los mismos.
Veamos los pasos que debemos seguir para conseguir este objetivo:

1- Primero creamos un nuevo archivo que llamaremos mapas_sincronizados.html y realizamos la inclusión del API, junto con los estilos que tendrá el contenedor de nuestros mapas, es importante definir las variables globales de los mapas ya que las tendremos que utilizar en todo el alcance del programa:

<script type="text/javascript"
		  src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCWLcB8DZXZy4orffB8EBESY9fhoVEvyxw&sensor=false">
	    </script>
	   
	    <style type="text/css">
			  .mapClass { width: 500px; height: 500px; display: inline-block; }
	    </style>

var map1, map2;

2- Como mencionamos anteriormente vamos a sincronizar dos mapas con bases diferentes, para ello necesitamos crear dos funciones que inicialicen los mismos. Estas funciones serán bastantes parecidas a las que hemos dominado en tutoriales pasados sin embargo tendrán el manejo de los eventos para lograr la funcionalidad de sincronización, veamos el código de la primera función:

function inicializarMapa1() {
				    var mapOptions = {
						  center: new google.maps.LatLng(40.41678, -3.70379),
						  zoom: 10,
						  mapTypeId: google.maps.MapTypeId.ROADMAP
				    };

				    var mapElement = document.getElementById('mapaDiv');

				    map1 = new google.maps.Map(mapElement, mapOptions);

				    google.maps.event.addListener(map1, 'center_changed', function() {
					    map2.setCenter(map1.getCenter());
				    });

				    google.maps.event.addListener(map1, 'zoom_changed', function() {
					    map2.setZoom(map1.getZoom());
				    });
			  }

Como vemos tenemos las opciones de nuestro mapa como de costumbre para definir el centro, el zoom y la base que en este caso es ROADMAP, luego fijamos las opciones a nuestro mapa y por último nuestros eventos que se encargan de obtener los valores de las propiedades del mapa número 1 y setearlas en el mapa número 2, para ello utilizaremos los eventos de center_changed y zoom_changed esto es lo que nos permite realizar la sincronización.

3- Luego necesitamos crear nuestra función para inicializar el segundo mapa, el código es similar al anterior sin embargo los eventos se dispararán desde el mapa número 2 hasta el número 1 y la base será HYBRID para mostrar la diferencia entre ambos:

function inicializarMapa2() {
				  var mapOptions2 = {
					  center: new google.maps.LatLng(40.41678, -3.70379),
					  zoom: 10,
					  mapTypeId: google.maps.MapTypeId.HYBRID
				  };

				  var mapElement2 = document.getElementById('mapaDiv2');

				  map2 = new google.maps.Map(mapElement2, mapOptions2);

				  google.maps.event.addListener(map2, 'center_changed', function() {
					  setTimeout(function() {
					    map1.setCenter(map2.getCenter());
					  }, 10);
	    		  });

				  google.maps.event.addListener(map2, 'zoom_changed', function() {
					  setTimeout(function() {
						  map1.setZoom(map2.getZoom());
					  }, 10);
				  });

   		   }

4- Por último creamos una función para instanciar los mapas lo que nos permitirá realizar la instancia de ambos, construimos nuestro HTML y le colocamos la misma clase a los div que contendrán nuestros mapas:

function inicializarMapas() {
    			  inicializarMapa1();
				  inicializarMapa2();
			  }

			  google.maps.event.addDomListener(window, 'load', inicializarMapas);
	    </script>
    </head>
    <body>
	    <b>Mapas Sincronizados </b><br/>
	    <div id="mapaDiv" class="mapClass"></div>
	    <div id="mapaDiv2" class="mapClass"></div>
    </body>
</html>

Veamos como lucen nuestros mapas sincronizados cuando ejecutamos nuestro ejercicio en el navegador:


Es importante mencionar que los cambios que hagamos en un mapa serán reflejados en el otro y viceversa, veamos como luce luego que cambiamos la propiedad del centro y hacemos zoom, como siguen estando exactamente igual a excepción de la base:


Obtener coordenadas con un click


Uno de los eventos más populares y versátiles que podemos encontrar es la utilización del mouse como dispositivo de entrada de información y de interacción con distintos elementos de nuestra interfaz, en los mapas no es distinto, podemos usar el mismo para disparar distintos eventos de acuerdo a la utilización de mismo, en este ejemplo utilizaremos el evento click para obtener las coordenadas de ese punto en específico, veamos los pasos a seguir:

1- Creamos un nuevo archivo llamado obtener_coordenadas.html e incluimos nuestro API junto con los estilos:

<script type="text/javascript"  src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCWLcB8DZXZy4orffB8EBESY9fhoVEvyxw&sensor=false">
</script>

<style type="text/css">
			  #mapDiv { width: 800px; height: 500px; }
</style>

2- Luego creamos la función de inicializarMapa() como de costumbre pero esta tendrá algo diferente y es la definición del evento click en el addListener junto con la implementación de un dialogo que nos suministrará información de la latitud y la longitud de donde hagamos click, veamos:

google.maps.event.addListener(map, 'click', function(e) {
					    if (infowindow != null)
						    infowindow.close();

					    infowindow = new google.maps.InfoWindow({
						    content: '<b>Coordenadas Mouse : </b><br><b>Latitud : </b>' + e.latLng.lat() + '<br><b>Longitud: </b>' + e.latLng.lng(),
						    position: e.latLng
					    });
					    infowindow.open(map);
				    });

3- Por último construimos nuestro HTML y definimos nuestro contenedor para el mapa:

</script>
    </head>
    <body>
	    <b>Obteniendo coordenadas con click del mouse</b>
	    <div id="mapaDiv"></div>
    </body>
</html>

Con nuestro código terminado veamos como luce en nuestro navegador nuestro mapa cuando hacemos click en el mismo y se despliega la información de la latitud y longitud de ese punto:


Creando control que muestre las coordenadas


Ya vimos que podemos obtener la latitud y longitud de un punto con tan solo realizar un click de nuestro mouse, pero esto quizá no es lo más preciso para obtener esta información, por ello podemos implementar una solución que nos permita visualizar la latitud y longitud de cualquier punto por el cual pasemos el puntero de nuestro mouse, veamos:

1- Incluimos nuestro API y creamos nuestros estilos para nuestro mapa y para el control el cual se encargará de mostrar la información de la latitud y longitud:

<script type="text/javascript"
		  src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCWLcB8DZXZy4orffB8EBESY9fhoVEvyxw&sensor=false">
	    </script>

	    <style type="text/css">
			  #mapDiv { width: 800px; height: 500px; }
			  .mapControl {
				  width: 165px;
				  height: 16px;
		  		background-color: #FFFFFF;
				  border-style: solid;
				  border-width: 1px;
				  padding: 2px 5px;
			  }
	    </style>

2- Creamos nuestra función inicializarMapa() como en ejercicios pasados y definimos los parámetros para nuestro control donde inicializamos el mismo con las coordenadas 0.00 / 0.00:

var controlDiv = document.createElement('div');
				    controlDiv.className = 'mapControl';
		    		controlDiv.id = 'mapCoordinates';
				    controlDiv.innerHTML = 'Lat/Lng: 0.00 / 0.00';

3- Luego necesitamos crear el control y agregarlo a nuestro mapa, esto lo hacemos con google.controls, donde podemos especificar la posición en la que estará, en este caso utilizaremos RIGHT_BOTTOM que corresponde en la parte inferior derecha y el contenedor donde se desplegará:

map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(controlDiv);

4- Por último definimos nuestro evento que será de tipo mousemove y le inyectará el texto al control de la información que obtengamos:

google.maps.event.addListener(map, 'mousemove', function(e) {
					    var coordinateText = 'Lat/Lng: ' + e.latLng.lat().toFixed(6) + ' / ' + e.latLng.lng().toFixed(6);
					    controlDiv.innerHTML = coordinateText;
				    });

Veamos como luce nuestro mapa con el control para obtener la información de la latitud y la longitud:


Creando menú contextual en un mapa


Para finalizar veamos un ejemplo un poco más complejo, donde no solo utilizaremos los eventos sino también vectores y un menú contextual para darle al usuario una forma de comunicarse con nuestro mapa de una manera más organizada y directa, veamos los pasos a seguir para lograr nuestro objetivo:

1- Creamos un archivo llamado menu_contextual.html e incluimos el API de Javascript de Google Maps, además creamos los estilos para nuestro mapa y menú contextual:

<script type="text/javascript"
		  src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCWLcB8DZXZy4orffB8EBESY9fhoVEvyxw&sensor=false">
	    </script>

	    <style type="text/css">
			  #mapaDiv { width: 800px; height: 500px; }

			  .contextmenu{
				  visibility: hidden;
				  background: #ffffff;
				  border: 1px solid #8888FF;
				  z-index: 10;
				  position: relative;
				  width: 100px;
				  height: 50px;
				  padding: 5px;
			  }
	    </style>

2- Antes de crear nuestra función inicializarMapa() debemos realizar unas cuantos pasos adicionales, uno de ellos es crear la función para definir la clase para el menú contextual, veamos:

function menuContextual(map) {
				    this.setMap(map);
				    this.map = map;
				    this.mapDiv = map.getDiv();
				    this.menuDiv = null;
			  };

3- Hecho esto debemos crear las opciones para nuestro menú contextual y agregar el evento que disparará cada una de estas cuando se seleccione, el cual como imaginaremos será click:

menuContextual.prototype = new google.maps.OverlayView();
			  menuContextual.prototype.draw = function() {};
			  menuContextual.prototype.onAdd = function() {
				    var that = this;
				    this.menuDiv = document.createElement('div');
				    this.menuDiv.className = 'contextmenu';
				    this.menuDiv.innerHTML = '<a href="javascript:crearMarcador()">Crear Marcador</a><br><a href="javascript:hacerZoom()">Hacer Zoom</a><br><a href="javascript:deshacerZoom()">Deshacer Zoom</a><br>';
				    this.getPanes().floatPane.appendChild(this.menuDiv);

				    google.maps.event.addListener(this.map, 'click', function(mouseEvent) {
					    that.hide();
				    });
			  };

4- Para terminar con nuestro menú contextual solo nos falta agregar las acciones de mostrar y ocultar, veamos como luce nuestra porción de código para esto:

menuContextual.prototype.show = function(coord) {
				    var proj = this.getProjection();
				    var mouseCoords = proj.fromLatLngToDivPixel(coord);
				    var left = Math.floor(mouseCoords.x);
				    var top =  Math.floor(mouseCoords.y);
				    this.menuDiv.style.display = 'block';
				    this.menuDiv.style.left = left + 'px';
				    this.menuDiv.style.top = top + 'px';
				    this.menuDiv.style.visibility = 'visible';
			  };

			  menuContextual.prototype.hide = function(x,y) {
				  this.menuDiv.style.visibility = 'hidden';
			  }

5- Habiendo finalizado con nuestro menú contextual solo nos falta programar las funciones para las opciones de nuestro menú, que son la de hacer zoom, deshacer zoom y colocar marcador:

function hacerZoom() {
				  map.setZoom(map.getZoom() + 1);
			  }

			  function deshacerZoom() {
				  map.setZoom(map.getZoom() - 1);
			  }

			  function crearMarcador() {
				  var marker = new google.maps.Marker({
			   	   position: lastCoordinate,
					  map: map,
					  title: 'Marcador Aleatorio'
				  });
			  }

6- Por último inicializamos nuestro mapa, donde lo importante acá es crear el menú contextual para nuestro mapa y definir el evento principal rightclick que será disparado por el click derecho del mouse al presionarse:

contextMenu = new menuContextual(map);

google.maps.event.addListener(map, 'rightclick', function(e) {
	 lastCoordinate = e.latLng;
	 contextMenu.show(e.latLng);
	 });

7- Creamos nuestro HTML de la manera convencional y ejecutamos nuestro ejemplo, veamos como luce nuestro menú contextual cuando hacemos click derecho en nuestro mapa:


Ahora probemos las opciones de nuestro menú contextual, colocando algunos marcadores y jugando con el zoom de nuestro mapa, veamos:


Con este último ejemplo damos por finalizado este tutorial, habiendo aprendido a manejar los eventos del API de Javascript de Google Maps para conseguir funcionalidades que aumenten la experiencia del usuario en los mapas que creemos, combinando técnicas avanzadas para lograr funcionalidades extendidas y complejas que harán que nuestro mapa destaque en cualquier web que se implemente.

¿Te ayudó este Tutorial?


Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!

X