¡Hola! Me parece que andas usando un bloqueador de anuncios =( ¿Nos desbloqueas? ¿Por qué?
F13

Funcion 13

Google Maps - Añadiendo información a un marcador con InfoWindows

Ahora que ya hemos visto cómo podemos añadir marcadores a nuestros mapas de Google Maps, es el momento de ampliar un poco el control que tenemos sobre ellos.

El objeto InfoWindows nos permite mostrar información sobre un lugar en particular. Teniendo en cuenta que podemos colocar dentro tanto texto como código HTML, podemos usarlo de cualquier forma que se nos ocurra para mostrar información de un determinado lugar. En este artículo veremos cómo podemos añadir ventanas de información vitaminadas a los marcadores, haciendo uso de InfoWindows.

Introducción sobre InfoWindow

El objeto InfoWindow nos permite abrir una ventana de información en algún lugar del mapa. Suele apuntar a algún objeto del mapa, más concretamente un marcador, pero no tiene porqué ser así.

Para crearlo, y como viene siendo habitual, únicamente tendremos que pasar un objeto literal llamado options, en el cual definimos todas las propiedades de la ventana. InfoWindow nos permite cambiar el contenido de la ventana en cualquier momento y para ello nos valdremos de la propiedad content que puede ser una cadena de texto simple, una cadena de código HTML, o incluso una referencia a un elemento del DOM.

Preparando el terreno de juego

Antes de entrar de lleno con InfoWindow, vamos a crear un sencillo mapa con un par de marcadores. Si aun no tienes claro el concepto de los marcadores o cómo añadirlos, te recomiendo que le eches un vistazo a los artículos sobre Google Maps que hemos publicado.

Vamos a ver el código que vamos a utilizar para crear el mapa:

var andalucia = new google.maps.LatLng(37.653383, -5.405518);  
var opciones = {  
  zoom: 7,
  center: andalucia,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
var div = document.getElementById('mapa');  
var map = new google.maps.Map(div, opciones);  
var sevilla = new google.maps.Marker({  
  position: new google.maps.LatLng(37.400165, -5.993729),
  map: map
});
var huelva = new google.maps.Marker({  
  position: new google.maps.LatLng(37.266949, -6.949539),
  map: map
});

Este código no es demasiado distinto a lo que hemos estado viendo hasta ahora, nos dejará un mapa como el siguiente:

Añadiendo información con InfoWindow

Ahora que ya tenemos el material preparado, vamos a añadir un InfoWindow. En este primer ejemplo vamos a rellenarlo con una simple cadena de texto, solo para ver cómo funciona.

var infowindow = new google.maps.InfoWindow({ content: 'Hola, ¡estoy en Sevilla!' });  

Con esto solo habremos hecho una parte del trabajo ya que nuestro infowindow aun no está añadido al mapa. Para hacerlo tenemos que abrirlo, y nos valdremos del método open. La función recibe dos parámetros: el objeto del mapa en el que va a ser añadido y, de manera opcional, un enlace hacia dónde apuntará. El objeto de enlace debe contener una propiedad position. Por ahora nos valdrá con un marcador.

Si no pasamos el segundo argumento, tenemos que darle al objeto InfoWindow una posición para que se muestre en algún lugar del mapa. Para ello nos valdremos del atributo position o del método setPosition.

infowindow.open(map, sevilla);  

No obstante, en nuestro ejemplo vamos a pasar el marcador como segundo argumento para que la ventana apunte directamente al marcador.

Abriendo InfoWindow al hacer click en el marcador

Hasta ahora, al abrir nuestra página aparecía directamente el InfoWindow pero, por regla general lo que queremos es que se abra si le damos click a algo, en este caso en el marcador. Para conseguir esto, necesitaremos añadir una función que se encargue de escuchar el evento click sobre el marcador para que cuando ocurra, abramos la ventana.

Para lograr esto, vamos a valernos del método addListener dentro de google.maps.event. Este método tiene 3 argumentos:

  1. El objeto al que está asociado. En nuestro caso, un marcador.
  2. El tipo de evento que vamos a escuchar. En este caso 'click'
  3. La función que se llamará cuando se active el evento. En nuestro caso vamos a usar una función anónima.

Así resulta el código:

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

Ahora, al cargar la página no veremos nada hasta que no hagamos click en el marcador.

Pro tip: Un único InfoWindow para dominarlos a todos

Hasta ahora, el hecho de que hubiéramos añadido 2 marcadores al mapa, no tenía demasiada relevancia. No obstante, ha llegado el momento de que nuestro marcador huelva también muestre información.

Si os habéis fijado, hemos creado el objeto InfoWindow y lo hemos almacenado en una variable. Podríamos haberlo creado dentro de la función anónima pero esto crearía varias ventanas cada vez que se hiciera click en ellas, quedando una encima de la otra superpuestas.

Para añadir otro InfoWindow, el pensamiento lógico sería crear otra variable como infowindow_huelva y repetir la operación que hemos seguido con el anterior. Pero para ahorrar recursos, vamos a aprovecharnos del mismo InfoWindow para ambos marcadores.

He aquí el código completo:

var andalucia = new google.maps.LatLng(37.653383, -5.405518);  
var opciones = {  
  zoom: 7,
  center: andalucia,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
var div = document.getElementById('mapa');  
var map = new google.maps.Map(div, opciones);  
var infowindow = new google.maps.InfoWindow({  
  content: ''
});
var marcadores = [{  
  position: {
    lat: 37.400165,
    lng: -5.993729
  },
  contenido: "Hola, ¡estoy en Sevilla!"
}, {
  position: {
    lat: 37.266949,
    lng: -6.949539
  },
  contenido: "<div id=\"content\">" + "<h2>Huelva</h2>" + "<div id=\"bodyContent\">" + "<p><b>Huelva</b>, es una ciudad y municipio español, capital de la provincia que lleva su nombre, situado en la comunidad autónoma de Andalucía. Se encuentra localizada en la denominada «<em>Tierra llana</em>», en la confluencia de los ríos Tinto y Odiel, perteneciendo a la «<em>Cuenca del Guadiana</em>»,1 y según datos del INE poseía a 1 de enero de 2010 una población de 149.310 habitantes, y 240.000 en su área metropolitana según el POTA. Es capital de provincia desde 18332 con rango de ciudad desde 1876.</p>" + "<p>Fuente: <a href=\"http://es.wikipedia.org/wiki/Huelva\">" + "Wikipedia</a>.</p>" + "</div>" + "</div>"
}];
for (var i = 0, j = marcadores.length; i < j; i++) {  
  var contenido = marcadores[i].contenido;
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(marcadores[i].position.lat, marcadores[i].position.lng),
    map: map
  });
  (function(marker, contenido) {
    google.maps.event.addListener(marker, 'click', function() {
      infowindow.setContent(contenido);
      infowindow.open(map, marker);
    });
  })(marker, contenido);
}

Vamos a revisar poco a poco el código porque hay bastantes cosas… extrañas.

Lo primero que vemos es que hemos sustituido las dos variables sevilla y huelva para meterlos dentro de una matriz. Esto nos permite un código más mantenible y nos evitaremos en el futuro el tener que escribir más código por cada marcador. Solo destacar además, la propiedad contenido. En el primer marcador es una cadena de texto sencilla mientras que en el segundo usamos directamente código HTML.

Añadiendo varios marcadores al mapa

Justo después, comienza el bucle donde ocurrirá la magia. En este bucle en el que recorremos nuestra matriz de objetos, nos quedamos con la variable contenido del marcador, y creamos un nuevo marcador que añadimos directamente al mapa.

Después, creamos una función anónima que se autoinvoca a la que pasamos el marcador (marker) y el contenido (contenido). Haciendo esto, creamos una closure o clausura.

Una closure es una función que se ejecuta con su propio alcance (scope), pero que contiene una o más variables de otro alcance superior. Cuando la función se llama, ésta puede acceder a las variables del otro alcance, aunque la función que contenía el otro alcance ya hubiera dejado de ejecutarse.

Sin duda, las closures son uno de los aspectos más poderosos de JavaScript (a mi parecer) y merecen más explicación que esta “sencilla” frase. Espero hacer honor a las closures pronto.

De esta forma, reutilizamos la única InfoWindow que hemos creado, en todos los marcadores.

Puedes ver una demo del mapa que hemos creado en este capítulo.

Métodos y propiedades de InfoWindow

Hay propiedades y métodos que podemos añadir a las opciones o usar de forma independiente para controlar al máximo un objeto InfoWindow.

  • content
    Esta propiedad establece el contenido de un InfoWindow. Puede ser una cadena de texto simple, una cadena con HTML o incluso, un nodo del DOM existente en la página.
  • disableAutoPan
    Si se establece a true, el mapa no se mueve de manera automática para mostrar el InfoWindow. Se puede observar en la demo.
  • maxWidth
    Es el ancho máximo del InfoWindow sin importar el contenido. Solo se puede cambiar antes de abrir el InfoWindow.
  • pixelOffset
    Esta propiedad define lo lejos del centro de la posición especificada que debe posicionarseposition is used to place the InfoWindow, pixelOffset defines how far away from this point the window should be positioned.
  • zIndex
    Si mostramos varias ventanas de InfoWindow, esta propiedad nos permite definir el orden.
  • setContent()
    Nos permite cambiar el contenido del InfoWindow.
  • close()
    Cierra el InfoWindow eliminándolo del DOM.

Estas son las propiedades y métodos que considero más interesantes pero siempre podéis ver la lista completa en la documentación del API de Google Maps.

Si el artículo te pareció interesante, útil o incluso equivocado, por favor considera el dejar un comentario. ¡Lo apreciaré mucho!

Programador Front-end en First + Third y Potato. Trabajando con JavaScript y HTML5 desde el corazón de Sevilla.

Comentarios ¡Únete a la conversación!