user1513583
Reputation: 1
Filter results with multiple dropdowns in Google Fusion map
Goal: To be able to search from multiple columns at once in a Google Fusion map.
I've created a map with three dropdowns and a search box (category, state, year, search box). The problem is that each dropdown is currently independent from the others, meaning only one column can be filtered at a time.
I would like to be able to filter from more than one column at a time, by category, state, year, and a search term. For example, I would like to be able to do a search for a "Death of an Innocent" in "California" in "1997" and the term "gun".
Is this possible with Google Fusion maps?
I have limited experience with javascript and would greatly appreciate any help.
The code is below.
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var map;
var layer_0;
var layer_1;
var layer_2;
var layer_3;
function initialize()
{
map = new google.maps.Map(document.getElementById('map-canvas'),
{
center: new google.maps.LatLng(39.14756564151492, -97.12306249999999),
zoom: 4,
mapTypeControl: false,
panControl: false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE
},
mapTypeId: google.maps.MapTypeId.ROADMAP
});
layer_0 = new google.maps.FusionTablesLayer({
query: {
select: "col3>>0",
from: "1fDfLN7YpE9H7gdGH0ePtJFbwpXy51juTv4-WI24"
},
map: map,
styleId: 2,
templateId: 2
});
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend);
}
function changeMap_0() {
var whereClause;
var searchString = document.getElementById('search-string_0').value.replace(/'/g, "\\'");
if (searchString != '--Select--') {
whereClause = "'Type' = '" + searchString + "'";
}
layer_0.setOptions({
query: {
select: "col3>>0",
from: "1fDfLN7YpE9H7gdGH0ePtJFbwpXy51juTv4-WI24",
where: whereClause
}
});
}
function changeMap_1() {
var whereClause;
var searchString = document.getElementById('search-string_1').value.replace(/'/g, "\\'");
if (searchString != '--Select--') {
whereClause = "'State' = '" + searchString + "'";
}
layer_0.setOptions({
query: {
select: "col3>>0",
from: "1fDfLN7YpE9H7gdGH0ePtJFbwpXy51juTv4-WI24",
where: whereClause
}
});
}
function changeMap_2() {
var whereClause;
var searchString = document.getElementById('search-string_2').value.replace(/'/g, "\\'");
if (searchString != '--Select--') {
whereClause = "'Year' = '" + searchString + "'";
}
layer_0.setOptions({
query: {
select: "col3>>0",
from: "1fDfLN7YpE9H7gdGH0ePtJFbwpXy51juTv4-WI24",
where: whereClause
}
});
}
function changeMap_3() {
var whereClause;
var searchString = document.getElementById('search-string_3').value.replace(/'/g, "\\'");
if (searchString != '--Select--') {
whereClause = "'Description' CONTAINS IGNORING CASE '" + searchString + "'";
}
layer_0.setOptions({
query: {
select: "col3>>0",
from: "1fDfLN7YpE9H7gdGH0ePtJFbwpXy51juTv4-WI24",
where: whereClause
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<br />
<div style="margin-top: 10px;">
<select id="search-string_0" onchange="changeMap_0(this.value);">
<option value="--Select--">-- Botched Police Raid Category --</option>
<option value="--Select--">All Botched Police Raids</option>
<option value="Death of a nonviolent offender.">Death of a nonviolent offender</option>
<option value="Death of an innocent.">Death of an innocent</option>
<option value="Death or injury of a police officer.">Death or injury of a police officer</option>
<option value="Raid on an innocent suspect.">Raid on an innocent suspect</option>
<option value="Unnecessary raids on doctors and sick people.">Unnecessary raids on doctors and sick people</option>
<option value="Other examples of paramilitary police excess.">Other examples of paramilitary police excess</option>
</select>
<select id="search-string_1" onchange="changeMap_1(this.value);">
<option value="--Select--">-- By State --</option>
<option value="--Select--">All States</option>
<option value="AL" >Alabama</option>
<option value="AK" >Alaska</option>
<option value="AZ" >Arizona</option>
<option value="AR" >Arkansas</option>
<option value="CA" >California</option>
<option value="CO" >Colorado</option>
<option value="CT" >Connecticut</option>
<option value="DE" >Delaware</option>
<option value="DC" >District Of Columbia</option>
<option value="FL" >Florida</option>
<option value="GA" >Georgia</option>
<option value="HI" >Hawaii</option>
<option value="ID" >Idaho</option>
<option value="IL" >Illinois</option>
<option value="IN" >Indiana</option>
<option value="IA" >Iowa</option>
<option value="KS" >Kansas</option>
<option value="KY" >Kentucky</option>
<option value="LA" >Louisiana</option>
<option value="ME" >Maine</option>
<option value="MD" >Maryland</option>
<option value="MA" >Massachusetts</option>
<option value="MI" >Michigan</option>
<option value="MN" >Minnesota</option>
<option value="MS" >Mississippi</option>
<option value="MO" >Missouri</option>
<option value="MT" >Montana</option>
<option value="NE" >Nebraska</option>
<option value="NV" >Nevada</option>
<option value="NH" >New Hampshire</option>
<option value="NJ" >New Jersey</option>
<option value="NM" >New Mexico</option>
<option value="NY" >New York</option>
<option value="NC" >North Carolina</option>
<option value="ND" >North Dakota</option>
<option value="OH" >Ohio</option>
<option value="OK" >Oklahoma</option>
<option value="OR" >Oregon</option>
<option value="PA" >Pennsylvania</option>
<option value="RI" >Rhode Island</option>
<option value="SC" >South Carolina</option>
<option value="SD" >South Dakota</option>
<option value="TN" >Tennessee</option>
<option value="TX" >Texas</option>
<option value="UT" >Utah</option>
<option value="VT" >Vermont</option>
<option value="VA" >Virginia</option>
<option value="WA" >Washington</option>
<option value="WV" >West Virginia</option>
<option value="WI" >Wisconsin</option>
<option value="WY" >Wyoming</option>
</select>
<select id="search-string_2" onchange="changeMap_2(this.value);">
<option value="--Select--">-- By Year --</option>
<option value="--Select--">All Years</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
<option value="1999">1999</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
<option value="1989">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
<option value="1986">1986</option>
<option value="1985">1985</option>
</select>
<input type="text" id="search-string_3" placeholder=" Keyword Search">
<input type="button" onclick="changeMap_3()" value="Search">
</div>
<div id="map-canvas" style="width:100%; height:500px; line-height: 125%;"></div>
</div>
Upvotes: 0
Views: 543
Answers (1)
so_jin_ee
Reputation: 812
The problem is that every time you change the value of either one of your input, you are running the function with only that one changed value. You probably need to update your changeMap_1(),changeMap_2() and changeMap_3() make them into one function.
so call it changeMap() and run the following conditions:
if(curr_value of search-string_1 != "--Select--") String s1= curr_value of search-string_1;
if(curr_value of search-string_2 != "--Select--") String s2= curr_value of search-string_2;
if(curr_value of search-string_3 != "--Select--") String s3= curr_value of search-string_3;
Then perform a search using all three results instead of individual ones. This way, you can keep your previous search category. And instead of 3 onChange function, you need only 1.
Upvotes: 2
Related Questions
- How to apply filters together?
- Filter table results based on multiple dropdown selections
- jQuery filter table by several columns from a dropdown selection
- Google Maps multiple dropdown filters that work together
- Google Fusion Map Javascript Drop-Down Menu Not Working
- How to highlight multiple countries on Google Maps using fusion table
- Filter in Google Fusion Tables using checkboxes
- Google Maps API V3 - Select Fusion Table layer from drop-down list
- Fusion Tables filter conditions OR
- How do I build more than 1 drop-down selector menu on the same table/layer in Google Fusion Table?