Añadir una ventana informativa

facebook-svg gplus-svg twitter-svg

Una ventana informativa es un <div> que contiene información acerca de un punto dado en el mapa, y que aparece al hacer clic sobre el marcador.
Si la ventana informativa es bastante alta, el desplazamiento del mapa hacia abajo es muy evidente. Esto se llama auto-panning, y es interesante saberlo por si queramos deshabilitarlo. Como cualquier <div> puede ser estructurado y podemos aplicarle estilos CSS.

Un ejemplo básico.

Para añadir una ventana informativa tenemos que definir el contenido de esta que puede ser una cadena de texto o un nodo ( node ) estructurado. Después podemos instanciar una nueva ventana de información ( ventanaInfo - una instancia de InfoWindow ).


// el contenido de la ventana de informació
// puede ser una cadena de texto 				
var contenido = "Un ejemplo básico";							
var ventanaInfo = new google.maps.InfoWindow({
content: contenido
});

var contenido =
  '<div class="info">' +
  '<h1>La Sagrada Familia</h1>' +
  '<div class="contenidoInfo">' +
  '<p>El Templo Expiatorio de la Sagrada Fam\355lia (en catal\341n: Temple Expiatori de la Sagrada Fam\355lia), ' +
  'conocido simplemente como la Sagrada Fam\355lia, es una bas\355lica cat\363lica de Barcelona (Espa\361a), ' +
  'dise\361ada por el arquitecto Antoni Gaud\355. Iniciada en 1882, todav\355a est\341 en construcci\363n (marzo de 2014). ' +
  'Es la obra maestra de Gaud\355, y el m\341ximo exponente de la arquitectura modernista catalana.</p>' +
  '<p>Atribuci\363n: <a href="http://es.wikipedia.org/wiki/Templo_Expiatorio_de_la_Sagrada_Familia">' +
  'http://es.wikipedia.org/wiki/Templo_Expiatorio_de_la_Sagrada_Familia</a></p>' +
  '</div>' +
  '</div>';

var infowindow = new google.maps.InfoWindow({
  content: contenido
});
google.maps.event.addListener(marker, 'click', function() {
  infowindow.open(mapa, marker);
});

Este código tiene que aparecer dentro de la función initialize().


var mapa;

function initialize() {
    var ubicacion = new google.maps.LatLng(41.403567, 2.174493)

    var opciones = {
      zoom: 12,
      center: ubicacion,
      mapTypeId: google.maps.MapTypeId.ROADMAP //SATELITE, HYBRID, ROADMAP, TERRAIN
    };
    mapa = new google.maps.Map(document.getElementById('mapa'), opciones);
    // el marcador para Barcelona				
    var marker = new google.maps.Marker({
      position: ubicacion,
      map: mapa,
      title: 'Barcelona - La Sagrada Fam\355lia',
    });
    var contenido =
      '<div class="info">' +
      '<h1>La Sagrada Familia</h1>' +
      '<div class="contenidoInfo">' +
      '<p>El Templo Expiatorio de la Sagrada Fam\355lia (en catal\341n: Temple Expiatori de la Sagrada Fam\355lia), ' +
      'conocido simplemente como la Sagrada Fam\355lia, es una bas\355lica cat\363lica de Barcelona (Espa\361a), ' +
      'dise\361ada por el arquitecto Antoni Gaud\355. Iniciada en 1882, todav\355a est\341 en construcci\363n (marzo de 2014). ' +
      'Es la obra maestra de Gaud\355, y el m\341ximo exponente de la arquitectura modernista catalana.</p>' +
      '<p>Atribuci\363n: <a href="http://es.wikipedia.org/wiki/Templo_Expiatorio_de_la_Sagrada_Familia">' +
      'http://es.wikipedia.org/wiki/Templo_Expiatorio_de_la_Sagrada_Familia</a></p>' +
      '</div>' +
      '</div>';

    var infowindow = new google.maps.InfoWindow({
      content: contenido
    });
    google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(mapa, marker);
    });
  } // acaba la función initialize
google.maps.event.addDomListener(window, 'load', initialize);

Vea un ejemplo de mapa con marcador y ventana informativa ( Al hacer clic sobre el marcador aparece la ventana informativa ).

Múltiples marcadores con ventanas informativas

Una idea desarrollada por Chris Johnson - Developer & Designer

Podemos también marcar varios puntos en el mapa, cada punto con su ventana informativa. Para esto habrá que instanciarlos uno por uno. Empezamos construyendo un array de objetos, cada objeto representando una chincheta en el mapa.


var chinchetas = [
	{title: 'Barcelona', info:'Barcelona - La Sagrada Família', lat:41.403567, lng:2.174493},
	{title: 'Figueres', info:'Figueras - Teatro-Museo Dalí', lat:42.268069, lng:2.959689}, 
	{title: 'Tarragona', info:'Catedral de Santa María de Tarragona', lat:41.118812, lng:1.257807},
];

Para marcar los puntos vamos a utilizar un bucle for ( for loop ) que recorre el array de las chinchetas e instancia los marcadores uno por uno:


var marcador;

for (var i = 0; i < chinchetas.length; i++) {
  marcador = new google.maps.Marker({
    position: new google.maps.LatLng(chinchetas[i].lat, chinchetas[i].lng),
    map: mapa,
    title: chinchetas[i].title
  });

  //	instancia una nueva ventana informativa
  var ventanaInfo = new google.maps.InfoWindow();

  google.maps.event.addListener(marcador, 'click', (function(marcador, i) {
    return function() {
      // establece el contenido de la ventana informativa
      ventanaInfo.setContent(chinchetas[i].info),
        //abre la ventana informativa
        ventanaInfo.open(mapa, marcador);
    }
  })(marcador, i));
}

Vea un ejemplo de mapa con varios marcadores.