Is it possible to select which data to display in Google Maps info windows using check boxes?

Question

I was wondering if it is possible to select what data/information you wish to have displayed in an Google Maps info window based on check box selection?

I know that you can select layers using check boxes which can have their own info window, but this will be limited 5 layers thus limiting the number of selections to 5.

I was thinking that if you create a custom info window then would you be able to chose to only show data respective to that selection and hide the other data normally displayed in the window. You would also need to scale the window depending on the number of selections so if one was selected out of 10 it wouldn't have lots of white space.

Cheers!

Answer 1

If you look at the source for this page you can see I build up the InfoWindow content dynamically from the content of my Fusion Table so you could build your content dynamically from a checkbox just the same.

See function windowControl() in that code.

Note also that you have to suppress the standard infoWindows if you do what I suggest, see here:

    layers[id] = new google.maps.FusionTablesLayer({
        map: map,
        suppressInfoWindows: true,
        query: {
            select: 'col2',
            from: tableids[id],
        },
    });

like this

ADDED LATER

Basically, here is the code to create the map and Fusion Table layers and suppress the default window:

map = new google.maps.Map(document.getElementById('googft-mapCanvas'), {
    center: new google.maps.LatLng(52.4, -1.3),
    zoom: 7,
    mapTypeId: google.maps.MapTypeId.ROADMAP
});

// One single re-useable InfoWindow
    infoWindow = new google.maps.InfoWindow();

for(id=0;id<tableids.length;id++){
    layers[id] = new google.maps.FusionTablesLayer({
        map: map,
        suppressInfoWindows: true,
        query: {
            select: 'col2',
            from: tableids[id],
        },
    });

        google.maps.event.addListener(layers[id], 'click', function(e) {
            windowControl(e, infoWindow, map);
        });
}

Then, later on in your code, you actually populate the InfoWindow as it pops up:

// Open the info window at the clicked location
function windowControl(e, infoWindow, map) {

// Extract various columns from Fusion Table
var Ref =e.row['Reference'].value;
var Date=e.row['Date'].value;
var Col =e.row['Collection'].value;

// Now build HTML we want in our InfoWindow
var HTML;
HTML = "<div class='googft-info-window'>";
HTML+= "<strong>Reference</strong>: " + Ref  + " ";
HTML+= "<strong>Date</strong>: " + Date + "&nbsp;&nbsp;";

// AJAX check if image and thumb are available on Skyscan webserver.
// If both present, offer click through to zoomable image.
// If either missing, suggest user contact Skyscan
if(ImageAndThumbOnServer(Col,Ref)==1){

   HTML+= "<a target=\"_blank\" href=\"http://www.skyscan.co.uk/cgi-bin/Zoomable.pl?&date=" + Date + "&ref=" + Ref + "&col=" + Col + "\">Click to view image</a>";

} else {
   HTML += "Image not yet scanned contact Skyscan";
}
HTML +="</div>";

infoWindow.setOptions({
    content: HTML,
    position: e.latLng,
    pixelOffset: e.pixelOffset
    });
    infoWindow.open(map);
}