Mostrar sólo un InfoWindow y cerrarlo automáticamente GMaps API v3

Si no tienes mucha experiencia o tienes dudas con respecto a algo que usemos en este post, puedes consultar los demás ejemplos que se han realizado anteriormente aquí.

En algunas ocasiones existe la necesidad de tener varios marcadores dentro de un mapa, cada uno de ellos con un Listener que está a la espera de que en cuanto hagamos ‘click’ en ellos, despliegue una InfoWindow que le hayamos asignado, pero, existe una desventaja (o ventaja depende del punto de vista) en la API v3 de GMaps, en comparación a la API v2 de GMaps, ésta es que al tener cada marcador con una ventana de información asignada, al momento de hacer click en un marcador se abre, pero si hacemos click en cualquier otro lugar del mapa (que no sea la ‘X’) no se cierra.

Lo que vamos a realizar es un cierre “automático”, esto quiere decir que al tener una InfoWindow abierta y hacer click en cualquier otro lado del mapa, se cierre en automático la ventana abierta en ese momento, de esta manera, siempre quedaría solamente una o ninguna InfoWindow en el mapa, librándonos de tener que estar cerrando manualmente cada una de las ventanas que aparezcan.

En la v2 de la API de GMaps se hacía así:

// Listener para generar y gestionar el InfoWindow
// marker es un objeto tipo Marker
	GEvent.addListener(marker, "click", function() {
		marker.openInfoWindowHtml("mensaje que quisieras que apareciera");
	});

Con eso era suficiente para que apareciera y desapareciera cuando perdiera el ‘foco‘, ahora para la v3 de la API de GMaps se crearon funciones para abrir (.open()) y cerrar (.close()) la InfoWindow, esto significo tener que especificar un evento para la apertura o cierre de la ventana. Esto no es problema, aunque la situación principal radica cuando tienes muchos marcadores, hacer esto para cada uno de ellos.

Solo es un poco de usar y re-usar funciones para facilitarnos la vida. Vamos a crear 2 variables globales una para el mapa y otra para una única instancia del InfoWindow, no es necesario crear más, con ella podremos crear tantas ventanas como nosotros queramos, por el momento no se les asignará el tipo de objeto, así que quedarán como null.

	var map = null;
	var infoWindow = null;

Vamos a crear dos funciones que son las que van a hacer el ejercicio de abrir y cerrar la ventana, para el ejercicio se requerirá que se declaren como sigue. La función para cerrar no recibirá ningún parámetro, simplemente ejecutará el proceso de cerrar del objeto InfoWindow. La función para abrir, recibirá 2 parámetros, el primero tendrá que ser un objeto tipo Marker y el segundo un String (cadena de caracteres); el marcador previamente debe ser creado con los parámetros mínimos para su uso, es decir su posición y en qué mapa se dibujará; el string será para asignarle el contenido específico del marcador en cuestión, igual si así lo deseas, puedes agregar contenido general.

	function closeInfoWindow() {
		infoWindow.close();
	}

	function openInfoWindow(marker, content) {
		var markerLatLng = marker.getPosition();
		infoWindow.setContent([
			'<div style="text-align:center;">',
			'Las coordenadas del <b>',
			content,
			'</b> son:<br/>',
			markerLatLng.lat(),
			', ',
			markerLatLng.lng(),
			'<br/><br/>Arr&aacute;strame y haz click para actualizar la posici&oacute;n.',
			'<br/>O puedes hacer click en cualquier otro lado para cerrarme.',
			'</div>'
		].join(''));
		infoWindow.open(map, marker);
	}

Antes de llegar al código completo, vamos a tener en cuenta una pequeña instrucción, un listener que se le va a agregar al mapa, que es el que va a hacer que al momento de hacer click en cualquier parte del mapa que no sea la el infoWindow, lo cierre, independientemente de cuál sea el que esté abierto.

		google.maps.event.addListener(map, 'click', function(){
			closeInfoWindow();
		});

Finalmente la función que se encargará de echar todo a andar, crear los marcadores y asignarles su Listener, indicar el objeto correspondiente a las variables del Map y del InfoWindow, todo este código ya lo hemos visto, así que todo el código quedaría así

var map = null;
	var infoWindow = null;

	function closeInfoWindow() {
		infoWindow.close();
	}

	function openInfoWindow(marker, content) {
		var markerLatLng = marker.getPosition();
		infoWindow.setContent([
			'<div style="text-align:center;">',
			'Las coordenadas del <b>',
			content,
			'</b> son:<br/>',
			markerLatLng.lat(),
			', ',
			markerLatLng.lng(),
			'<br/><br/>Arr&aacute;strame y haz click para actualizar la posici&oacute;n.',
			'<br/>O puedes hacer click en cualquier otro lado para cerrarme.',
			'</div>'
		].join(''));
		infoWindow.open(map, marker);
	}

	function initialize() {
		var myLatlng = new google.maps.LatLng(20.68017,-101.35437);
		var myOptions = {
		  zoom: 13,
		  center: myLatlng,
		  mapTypeId: google.maps.MapTypeId.ROADMAP
		}

		map = new google.maps.Map($("#map_canvas").get(0), myOptions);

		infoWindow = new google.maps.InfoWindow();

		google.maps.event.addListener(map, 'click', function(){
			closeInfoWindow();
		});

		var marker1 = new google.maps.Marker({
		    position: myLatlng,
		    draggable: true,
		    map: map
		});

		google.maps.event.addListener(marker1, 'click', function(){
			openInfoWindow(marker1, "Marcador 1");
		});

		var marker2 = new google.maps.Marker({
			map: map,
			position: new google.maps.LatLng(20.66057, -101.37325),
			draggable: true
		});

		google.maps.event.addListener(marker2, 'click', function() {
			openInfoWindow(marker2, "Marcador 2");
		});

		var marker3 = new google.maps.Marker({
			map: map,
			position: new google.maps.LatLng(20.67133, -101.32999),
			draggable: true
		});

		google.maps.event.addListener(marker3, 'click', function() {
			openInfoWindow(marker3, "Marcador 3");
		});
	}

	$(document).ready(function() {
	    initialize();
	});

Listo, ahora puedes traspolar este método a algo más dinámico como la consulta de APIs con Geolocalización por ejemplo… prueba, disfruta y practica… si tienes dudas, ya sabes dónde preguntarme :-D.

Enjoy this Life!!