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!

Gilder

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);
}

Brinkmanship

Thanks for that! I'll look at the source code as you suggested! And thanks for the supress information, I really appreciate it! Just so I understand completely, from what you are saying I would still be able to display all information as standard without any selections and then due to it being built dynamically, when selections are made, it will change in the window? – Gilder

Maybe we are confusing each other... what I am saying is that you could build the InfoWindow dynamically according to the status of some checkboxes at the time you click on it, so it could display more (or less) information if fewer (or more) checkboxes were ticked. I am not sure how you would change the InfoWindow AFTER it had popped it if the user clicked on some checkboxes at a later stage - though I am sure some jQuery genius would be able to do that by selecting and hiding divs maybe. – Brinkmanship

Ah ok I understand! Thank you! That's more or less what I am after anyway, to put it in context, I am trying to create filters for the data that appears in the info window that once clicked the users will see. So updating an already populated window isn't needed at the moment. Having looked at your source code, when creating a custom info window, do you have to then code when and where it should appear? Or is it still automatic? – Gilder

It appears automatically - all the code is within the single page I gave the link to. It is pretty simple really - I'll put the salient parts in my answer for extra clarity. – Brinkmanship

That's amazing, thanks very much for all your help, I really do appreciate it! – Gilder