Working with queries with Google Fusion Tables from API

Question

I've been playing with Google Spreadsheets and Fusion Tables to create maps, but I'm want to do some things that involve a bit more coding and hope you help refine my approach.

Essentially, I've used Spreadsheets to scrape the GP and Chemist data from the UK NHS Local sites and used Fusion Tables to geocode it (https://www.google.com/fusiontables/DataSource?docid=1xmT0D6H6JjRlXVyetubasugqQMswJqKNH7nrKh4).

What I'm trying to do now is use the Google Maps Api to publish the Fusion Table data but then add controls so that users can filter out the bits they don't want. I know how to create the custom buttons, what I can't work out is how to create queries if a button is clicked.

It's something that would be massively useful so if you can help that would be great.

My efforts so far are below:

http://davidelks.com/MashupTests/gmapsTest.html

<script type="text/javascript">
    var map, infoWindow;
    var toggle_doctors = 'false';
    var toggle_chemists = 'false';

    $(document).ready(function(){
        infoWindow = new google.maps.InfoWindow({});
        map = new GMaps({
            div: '#map',
            lat: 53.023098,
            lng: -2.197793,
            zoom: 11
        });

        var doctors = map.addControl({
            position: 'left_bottom',
            text: 'GPs',
            style: {
            margin: '1px',
            padding: '1px 6px',
            border: 'solid 1px #717B87',
            width: '85px',
            background: '#99ff99'
            },
            events: {
                click: function(){

                    if (toggle_doctors == 'true'){
                        toggle_doctors = 'false';
                        doctors.style.backgroundColor = '#ffffff';  

                    }
                    else {
                        toggle_doctors = 'true';
                        doctors.style.backgroundColor ='#99ff99';

                    }

                }
            }
        });

        var chemists = map.addControl({
            position: 'left_bottom',
            text: 'Late chemists',
            style: {
            margin: '1px',
            width: '85px',
            padding: '1px 6px',
            border: 'solid 1px #717B87',
            background: '#9999ff'
            },
            events: {
                // toggle button between white and colour
                click: function(){

                    if (toggle_chemists == 'true'){
                        toggle_chemists = 'false';
                        chemists.style.backgroundColor = '#ffffff';


                    }
                    else {
                        toggle_chemists = 'true';
                        chemists.style.backgroundColor ='#9999ff';

                    }

                }
            }
        });

        map.loadFromFusionTables({
            query: {

            select: '*',
            from: '1xmT0D6H6JjRlXVyetubasugqQMswJqKNH7nrKh4',
            where: 'TYPE == \'GP\''
            },

            events: {
                click: function(point){

                infoWindow.setPosition(point.latLng);
                infoWindow.open(map.map);
                }
            }
        });



    });//end of code block


</script>
<div id="map" style="height: 500px; width: 300px; border: 1px;"></div>

Answer 1

Recommend you look at Derek Eders web site, as he has a template that allows for selecting sub-sets of underlying fusion table data to a map...I've leveraged it for several things, and it works great.

derekeder.com/searchable_map_template/

Answer 2

Try the FusionTablesLayerWizard