Switching between layers in Google Fusion Map using drop down box - google-maps-api-3

Question

Having successfully followed some Fusion Map examples, with a little help from people here. I'm trying to do something I've been able to find an example of...
My map contains 3 layers, but I only want to show 2 at a time. I've therefore added a drop down box at the bottom so that you can switch between 2 of the maps. I've added a variable "SecondLayerMap", and I think (i've at least tried) to get the drop down box to change this variable. I'd never written any Java (or any other programming language) until 3 weeks ago, so it's been a steep learning curve!
[One method I've seen some people use in a similar situation has been to use 1 fusion table, but switch between data in different columns. I don't think I can do this because the geodata in each table is different and I don't want them both displayed at the same time.]
The next step will be to change one of the legends with the switch in map, but I'll take what i learn from this problem, before tackling that one...
Thanks for your help.
<meta charset="UTF-8">
<title>Smithfield Foods UK</title>
<link rel="stylesheet" type="text/css" media="all" href="FusionMapTemplate.css" />
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var defaultZoom = 10;
var defaultCenter = new google.maps.LatLng(52.6500, 1.2800);
var locationColumn = 'geometry';
var geocoder = new google.maps.Geocoder();
var SecondLayerMap = '1RrCcRC-1vU0bfHQJTQWqToR-vllSsz9iKnI5WEk'
var map = new google.maps.Map(document.getElementById('map-canvas'), {
center: defaultCenter,
zoom: defaultZoom,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infoWindow = new google.maps.InfoWindow();
// Initialize the first layer
var FirstLayer = new google.maps.FusionTablesLayer({
query: {
select: 'geometry',
from: '1hpGzmMBg8bDgPOGrAXvc0_QVLSBqQ0O5vpLbfUE'
},
map: map,
styleId: 3,
templateId: 5,
suppressInfoWindows: true
});
google.maps.event.addListener(FirstLayer, 'click', function(e) {windowControl(e, infoWindow, map);
});
// Initialize the second layer
var SecondLayer = new google.maps.FusionTablesLayer({
query: {
select: 'PostCode',
from: SecondLayerMap
},
map: map,
styleId: 2,
templateId: 2,
suppressInfoWindows: true
});
google.maps.event.addDomListener(document.getElementById('store'), 'change', function() {
var SecondLayerMap = this.value;
SecondLayer = new google.maps.FusionTablesLayer({
query: {
select: 'Postcode',
from: SecondLayerMap
}
});
});
google.maps.event.addListener(SecondLayer, 'click', function(e) {windowControl(e, infoWindow, map);
});
var legend = document.createElement('div');
legend.id = 'legend';
var content = [];
content.push('<h3>Density of Polish speaking population</h3>');
content.push('<p><div class="color red1"></div>=>2%<4%');
content.push('<p><div class="color red2"></div>=>4%<6%');
content.push('<p><div class="color red3"></div>=>6%<10%');
content.push('<p><div class="color red4"></div>=>10%<15%');
content.push('<p><div class="color red5"></div>=>15%<20%')
content.push('<p><img src="Smithfield Black.png" alt="Smithfield Logo" width ="120px">');
legend.innerHTML = content.join('');
legend.index = 1;
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend);
var legend2 = document.createElement('div');
legend2.id = 'legend2';
var content2 = [];
content2.push("<h3>Smithfield Food's sales in Asda Stores</h3>");
content2.push('<p><img src="red-dot.png"><£1,000');
content2.push('<p><img src="yellow-dot.png">=>£1,000<£20,000');
content2.push('<p><img src="green-dot.png">=>£20,000<£40,000');
legend2.innerHTML = content2.join('');
legend2.index = 1;
map.controls[google.maps.ControlPosition.RIGHT_TOP].push(legend2);
var zoomToAddress = function() {
var address = document.getElementById('address').value;
geocoder.geocode({
address: address
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
map.setZoom(10);
} else {
window.alert('Address could not be geocoded: ' + status);
}
});
};
google.maps.event.addDomListener(document.getElementById('search'), 'click', zoomToAddress);
google.maps.event.addDomListener(window, 'keypress', function(e) {
if (e.keyCode ==13) {
zoomToAddress();
}
});
google.maps.event.addDomListener(document.getElementById('reset'), 'click', function() {
map.setCenter(defaultCenter);
map.setZoom(defaultZoom);
layer.setOptions({
query: {
select: 'geometry',
from: '1hpGzmMBg8bDgPOGrAXvc0_QVLSBqQ0O5vpLbfUE'
}
});
});
}
// Open the info window at the clicked location
function windowControl(e, infoWindow, map) {
infoWindow.setOptions({
content: e.infoWindowHtml,
position: e.latLng,
pixelOffset: e.pixelOffset
});
infoWindow.open(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
<div>
<label>Enter an address:</label>
<input type="text" id="address" value="Leeds">
<input type="button" id="search" value="Search">
<input type="button" id="reset" value="Reset">
</div>
<div>
<select id="store">
<option value ="1RrCcRC-1vU0bfHQJTQWqToR-vllSsz9iKnI5WEk">Store A</option>
<option value ="1QX6QXhAiHXXAcS96RSAmE1Caj8tWebc6d-1_Tjk">Store B</option>
</select>
</body>

Answer 1

Use setOptions() to apply the query to the layer:
google.maps.event.addDomListener(document.getElementById('store'),
'change',
function() {
var SecondLayerMap = this.value;
SecondLayer.setOptions({
query: {
select: 'Postcode',
from: SecondLayerMap
}
});