Filter examples

Checkboxes

Show a list of checkboxes that filter results based on a single column.

index.html

<h4>
  Recycling services
</h4>
<ul class='inputs-list unstyled'>
  <li>
    <label class='checkbox inline'>
      <input type='checkbox' id='cbType1' />
      <span class='filter-box filter-blue'></span>
      City drop-off location
    </label>
  </li>
  <li>
    <label class='checkbox inline'>
      <input type='checkbox' id='cbType2' />
      <span class='filter-box filter-green'></span>
      Private business
    </label>
  </li>
  <li>
    <label class='checkbox inline'>
      <input type='checkbox' id='cbType3' />
      <span class='filter-box filter-red'></span>
      Hazardous materials
    </label>
  </li>
</ul>

source/maps_lib.js

NOTE: if your column name has spaces in it, make sure to surround it with single quotes as shown

The best way to filter results by a type is to create a 'type' column and assign each row a number (strings work as well, but numbers are faster). Then we can use the 'IN' operator and return all that are selected. Until Fusion Tables supports the 'OR' operator, this is the only way to do additive filters.

var type_column = "'type'";

var searchType = type_column + " IN (-1,";
if ( $("#cbType1").is(':checked')) searchType += "1,";
if ( $("#cbType2").is(':checked')) searchType += "2,";
if ( $("#cbType3").is(':checked')) searchType += "3,";
whereClause += " AND " + searchType.slice(0, searchType.length - 1) + ")";