Las capas creadas con la API de Google Fusion Tables sobre los mapas de Google Maps creados con la API de este último servicio vienen con las ventanas de información integradas de manera tal que cada marcador desplegado sobre el mapa cuenta con su respectivo InfoWindows. Cada una de estas ventanas se llena con la información de la tabla de Google Fusion Tables, mostrando absolutamente todos los datos de todas las columnas.
Una práctica común es optar por los InfoBox en lugar de los InfoWindows con el objetivo de mostrar información de cada marcador debido a que estos ofrecen mayores opciones de personalización que las ventanas de información por defecto de Google Maps API. El problema se presenta cuando al terminal de implementar estos InfoBox nos encontramos con dos ventanas de información para cada marcador: una correspondiente al InfoWindows por defecto de la API y otro al InfoBox implementado.
Como se aprecia en la imagen tener las dos ventanas de información desplegadas (la del frente el InfoWindows y la del fondo el InfoBox) al hacer click en un marcador es absurdo y lo lógico es querer mostrar únicamente el InfoBox manualmente implementado por nosotros.
Por suerte desactivar los InfoWindows de la capa de Google Fusion Tables se lleva a cabo definiendo la propiedad suppressInfoWindows como true al momento de crear la capa, tal como se muestra en el siguiente pedazo de código:
var datos;
var layer;
var mapa;
var datos;
function inicializacion() {
//Creo un mapa.
var opciones_mapa = {zoom: 13,center: new google.maps.LatLng(-34.6074533313473, -58.37355852127075),mapTypeId: google.maps.MapTypeId.ROADMAP};
map = new google.maps.Map(document.getElementById("mapa"), opciones_mapa);
/*
Creo la capa de Google Fusion Tables donde defino la propiedad
suppressInfoWindows como true.
*/
layer = new google.maps.FusionTablesLayer({query: {select: 'coordenadas', from: '1-zmpFV_oI7OBiq3iEyHyze7QBiBDZzdrxby_TYM'},map: map, suppressInfoWindows: true});
//Como he desactivado los InfoWindows tengo que crear los InfoBox.
var opciones_infobox = {boxClass: 'datos', alignBottom: true, pixelOffset: new google.maps.Size(-50, -40), closeBoxURL: 'i/cruz.png', closeBoxMargin: '15px 15px 0px 0px'};
datos = new InfoBox(opciones_infobox);
/*
Creo un evento asociado a la capa que se lleve a cabo cuando se
registra un click sobre la misma de forma tal de poder desplegar
los InfoBox de cada marcador.
*/
google.maps.event.addListener(layer, 'click', function(e) {
/*
Obtengo todos los datos que yo desee de la tabla de
Google Fusion Tables para mostrarlos luego en la
ventana de información (el InfoBox).
*/
var id = e.row['id'].value;
var nombre = e.row['nombre'].value;
var direccion = e.row['direccion'].value;
var telefono = e.row['telefono'].value;
var dias_habiles = e.row['dias_habiles'].value;
var sabados = e.row['sabados'].value;
var domingos = e.row['domingos'].value;
var reportar = '<a onclick="window.open(this.href, this.target, \'width=500,height=500\'); return false;" href="reportar.php?id='+id+'" target="_blank">¿La información contiene errores?</a>';
//Defino el contenido del InfoBox.
datos.setContent('<div class="contenido"><h2>'+nombre+'</h2><p class="direccion">'+direccion+'</p><p class="telefono">'+telefono+'</p><ul><li><span>Lunes a Viernes:</span> '+dias_habiles+'</li><li><span>Sábados:</span> '+sabados+'</li><li><span>Domingos:</span> '+domingos+'</li></ul><p class="reportar">'+reportar+'</p></div>');
/*
Defino la posición del InfoBox sobre el mapa en base
a las coordenadas del marcador en el cual se hace click.
*/
datos.setPosition(e.latLng);
//Muestro el InfoBox.
datos.open(map);
});
}
No he montado una página de demostración para este código porque considero que queda claro con lo escrito y porque se trata de un tema simple. De igual forma en un proyecto personal titulado Misas en Buenos Aires hago uso de esta técnica y pueden remitirse al código de la página para más información (la imagen de este artículo proviene de dicho proyecto).
