フュージョンテーブルの列に基づいて、マーカーに複数のフィルターを作成しようとしています。個々のフィルタリングではなく、フィルターを並行して相互作用させたい。これが私がこれまでに持っているコードです、私はここでERICによって見つけた答えに基づいていますが、それは私にとってはうまくいきませんでした:
<!DOCTYPE html>
<html>
<head>
<style>
#map-canvas { width:500px; height:400px; }
</style>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
<script src="eq_jsonp.js"></script>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript"src="http://maps.google.com/maps/api/js?sensor=false"> </script>
<script type="text/javascript">
var map;
var layerl0;
var tableid = 3470746;
var locationCol = 'Latitude';
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(28.2798935535169, -81.3486099243164),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
layerl0 = new google.maps.FusionTablesLayer({
query: {
select: "'latitude'",
from: 3470746
},
map: map
});
}
google.maps.event.addDomListener(window, 'load', initialize);
function doQuery(){
// collect WHERE conditions here for each search-string value
var query = [];
var searchString = '';
// I'd name my select id's something more descriptive, e.g. "damage_level" vs search- string1, etc.
searchString = document.getElementById('classification').value;
if(searchString){
query.push(" 'Roadway Classification:' = '" + searchString + "'");
}
searchString = document.getElementById('name').value;
if(searchString){
query.push("'Roadway Name:' = '" + searchString + "'");
}
// Date Filter
searchString = dateFilter();
if(searchString){
query.push(searchString);
}
// Now build the WHERE clause by joining with ' AND ' all the conditions.
// Note: if nothing is in the where Fusion Tables will not object
var where = query.join(' AND ');
//alert(where);
var qryOpts = {
query: {
select: "'latitude'",
from: 3470746,
}
};
layer.setOptions(qryOpts);
return;
}
// set all form inputs to null and call doQuery again.
function resetQuery(){
$('#classification').val('');
$('#name').val('');
doQuery();
}
</script>
</head>
<body>
<div id="map-canvas"></div>
<form>
<div style="margin-top: 10px;">
<label>Roadway Classification</label>
<select id="classification" onchange="doQuery;" title="Select Roadway by Classification">
<option value="">--Roadway Type--</option>
<option value="Collector">Collector</option>
<option value="Highway">Highway</option>
<option value="Minor Arterial">Minor Arterial</option>
</select>
</div>
<div style="margin-top: 10px;">
<label>Roadway Name</label>
<select id="name" onchange="doQuery;" title="Select Roadway by Name">
<option value="">--Roadway Name--</option>
<option value="Neptune Rd">Neptune Rd</option>
<option value="Partin Settlement Rd">Partin Settlement Rd</option>
<option value="Shady Ln">Shady Ln</option>
</select>
<br>
<input type="button" onclick="doQuery();" value="Search" />
<input type="button" onclick="resetQuery();" value="Reset" />
</form>
</div>
</body>
</html>'