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!!

Ya hemos visto como dibujar un marcador y asignarle un InfoWindow, así que esta parte será sencilla, ya que podremos mover el marcador de lugar y a placer, obteniendo las coordenadas de donde fue colocado, los usos que podemos darle varían infinitamente, actualmente podemos ver su uso por ejemplo en Foursquare cuando editamos un vvenue, podemos mover el marcador hasta el lugar más preciso donde se encuentra realmente el venue, más delante podremos hacer polígonos y delimitar las zonas usando las latitudes y longitudes para ser más precisos y bueno… miles de aplicaciones más que se pueden hacer e imaginar con ello, interesante, ¿no?

En la zona de Referencias de la API de GMaps v3 podremos encontrar a detalle las propiedades y funciones de cada elemento que usemos, para este ejemplo usaremos una propiedad de los marcadores que se llama draggable, esta propiedad hace que los marcadores que dibujemos puedan ser “arrastrables“, es decir, que los podamos tomar y arrastrarlos o moverlos a cualquier parte del mapa. Lo único que tenemos que hacer para hacer esa función es escribir en las propiedades del marcador draggable: true como lo veremos a continuación:

		var marker = new google.maps.Marker({
		    position: myLatlng,
		    draggable: true,
		    map: map,
		    title:"Ejemplo marcador arrastrable"
		});

Ahora nos centraremos en la función que se llama openInfoWindow.

	function openInfoWindow(marker) {
		var markerLatLng = marker.getPosition();
		infoWindow.setContent([
			'<b>La posicion del marcador es:</b><br/>',
			markerLatLng.lat(),
			', ',
			markerLatLng.lng(),
			'<br/><br/>Arrástrame y haz click para actualizar la posición.'
		].join(''));
		infoWindow.open(map, marker);
	}

En la función openInfoWindow podemos observar que recibe un parámetro al que manejaremos con el nombre de marker dentro de la función (al momento de invocar la función puede llamarse de cualquier otra manera, pero es necesario que sea un objeto tipo Marker); dentro de la función declaramos una variable llamada markerLatLng que va a almacenar la propiedad LatLng del marcador mediante la función getPosition(), lo que obtiene es un objeto con la latitud y longitud del marcador que recibió la función, para hacer referencia a cada uno de ellos, es con las subfunciones .lat() y .lng(); en el setContent del InfoWindow asignamos todo el contenido como un arreglo de cadenas, por eso la separación en comas y no con el signo más (+), con la instrucción join se indica que se concatene o se “unan” las cadenas; por último con la función open() de infoWindow mostramos de diálogo con el contenido que le asignamos anteriormente.

Ahora si veamos el código completo, la mayoría del código ya lo hemos visto así que aquí está:

	var map = null;
	var infoWindow = null;

	function openInfoWindow(marker) {
		var markerLatLng = marker.getPosition();
		infoWindow.setContent([
			'<b>La posicion del marcador es:</b><br/>',
			markerLatLng.lat(),
			', ',
			markerLatLng.lng(),
			'<br/><br/>Arrástrame y haz click para actualizar la posición.'
		].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();

		var marker = new google.maps.Marker({
		    position: myLatlng,
		    draggable: true,
		    map: map,
		    title:"Ejemplo marcador arrastrable"
		});

		google.maps.event.addListener(marker, 'click', function(){
			openInfoWindow(marker);
		});
	}

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

Para este ejemplo y posteriores comenzaremos a usar funciones para un mejor manejo del código, como pueden ver hemos declarado la variable map e infoWindow como globales, las cuáles podrán usarse a través de las funciones sin temor a que se pierdan las referencias al liberar la función. La razón por la cual es mejor poner este código en una función, es que si requerimos colocar más de un marcador, podamos enlazar un InfoWindow diferente para cada uno, sin necesidad de escribir el mismo código individualmente, además de que la función puede re-usarse tantas veces como sea necesario. Para ver cómo es que funciona este ejercicio ve al siguiente enlace:

Es todo por esta ocasión si tienen dudas ya saben cómo y dónde preguntar, mucha suerte…

Enjoy this Life!!

¿Qué es un Info Window?

Quizá han visto que en muchos de los mapas de mostrados con la tecnología de Google, al dar clicks sobre los marcadores, mapa, formas, etc., nos aparece un cuadro con información, bien, pues eso es un Info Window.

Las opciones que usaremos para la creación del objeto de InfoWindow contendrá los siguientes campos:

• content contiene una cadena de texto o nodo DOM que mostrará al abrir la ventana de información.
• position contiene el LatLng al cuál estará asignado, ten en cuenta que si es asignada a un marcador, automáticamente adquiere el valor de su posición, en caso de no asignarle algún LatLng toma el centro que se muestra por primera vez del mapa, para los polígonos trabaja de manera diferente y lo hablaremos en otro post.
• maxWidth especifica el ancho máximo en pixeles, que podrá adquirir la ventana, por default adquiere el ancho del contenido, sin saturar el espacio del mapa, haciendo saltos de línea en automático, cuando el contenido ha alcanzado el máximo permitido, se expandirá verticalmente igual, sin saturar el espacio del mapa. En caso de que se establezca un determinado ancho, el texto en automático dará saltos de línea al llegar al límite establecido, si el contenido es mucho se extenderá verticalmente sin saturar el espacio.

El contenido del InfoWindow puede contener una cadena de texto, un fragmento de código HTML, o un mismo elemento DOM. Para establecer este contenido, debe hacerse una llamada explícita al constructor del InfoWindow con setContent(). Ten cuidado al usar div’s ya que si le pones estilos y sobrepasa el espacio puede “derramarse” el contenido fuera del InfoWindow.

Ahora si vamos directo al código, este ya solamente es el JavaScript, recuerda agregar jQuery también:

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

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

var contentString = '<div id="div_ejemplo">'+
    '<p>Este es un ejemplo de <b>InfoWindow</b>, ' +
    'como puedes ver puedes agregar cualquier cosa, ' +
    'cualquier <em>HTML</em>.</p>' +
    '<p>Este InfoWindow tiene un ancho de 200px ' +
    'y autom&aacute;ticamente da los saltos de l&iacute;nea.</p>'+
    '<p>Para ver el tutorial <a href="http://jafrancov.com/2010/09/info-window-gmaps-api-v3/">'+
    'clickea aqu&iacute;</a>.</p>'+
    '</div>';

var infowindow = new google.maps.InfoWindow({
    content: contentString,
    maxWidth: 200
});

var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title:"Ejemplo InfoWindow"
});

google.maps.event.addListener(marker, 'click', function() {
  infowindow.open(map,marker);
});

Solamente un último detalle antes de terminar, podrán observar que al final vemos un addListener, para que se pueda mostrar el InfoWindow al hacer click, es necesario agregar un Listener, que valga la redundancia, está a la escucha de un click, analicémoslo:

google.maps.event.addListener(marker, 'click', function() {
  infowindow.open(map,marker);
});

Vamos por partes google.maps.event.addListener, es una función integrada de la API que agregará el listener, requiere de 3 cosas, a quién se le va a asignar el listener, en este caso a marker que es la variable que almacena el objeto del marcador que se dibuja, el tipo de listener que para este caso es un ‘click’ y por último el proceso que realizará, que para el ejemplo es una función. Dentro de la función especificamos lo que hará el listener, haremos uso de infowindow que es la variable que contiene el objeto con los detalles del InfoWindow por supuesto, a la cual se le llama la función open() que es la que se encargará de mostrar el InfoWindow, y esta funcióna a su vez, requiere de 2 parámetros, el primero en qué objeto de mapa se va a agregar (map) y segundo, a qué objeto se le va a asignar (marker), en caso de que no se especifique la segunda variable, se mostrará en el centro inicial del mapa.

Ahora si es todo por este tutorial, espero les sirva, si tienen dudas ya saben dónde y cómo preguntar

Enjoy this Life!!