jeudi 30 avril 2015

Javascript issues - filter in Google Fusion Tables using checkboxes

I'm trying to add a simple set of checkboxes to my google fusion tables map in order to use as turning on and off layers much like this example: http://ift.tt/1Jcozib (but without the expanding sidebar). This project does exactly what I want it do, but making my code very similar to his still does not work.

Basically, my checkboxes aren't doing anything. Here's a link to my project: http://ift.tt/1Jcqrr8

Is there something I'm not doing correctly with my javascript? I'm pretty new to it. Thank you!

And here's my code:

var map;
var layer_0;
var tableId;
var layer;
function initialize() {
  map = new google.maps.Map(document.getElementById('map-canvas'), {
    center: new google.maps.LatLng(30.27439220767769, -97.71868322157854),
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  layer_0 = new google.maps.FusionTablesLayer({
    query: {
      select: "col11",
      from: "19xTr3sBmz3hB9n-L14no0BWZgbFJcAGdJNoOoTit"
    },
    map: map,
    styleId: 2,
    templateId: 3
  });
  tableId = "19xTr3sBmz3hB9n-L14no0BWZgbFJcAGdJNoOoTit"
  ;
  layer = new google.maps.FusionTablesLayer();
    filterMap(layer, tableId, map);

    google.maps.event.addDomListener(document.getElementById('signals'),
        'click', function() {
          filterMap(layer, tableId, map);
    });

    google.maps.event.addDomListener(document.getElementById('wavetronix'),
        'click', function() {
          filterMap(layer, tableId, map);
    });

    google.maps.event.addDomListener(document.getElementById('bluetooth'),
        'click', function() {
          filterMap(layer, tableId, map);
    });
}

function filterMap(layer, tableId, map) {
    var where = generateWhere();

    if (where) {
      if (!layer.getMap()) {
        layer.setMap(map);
      }
      layer.setOptions({
        query: {
          select: 'col14',
          from: tableId,
          where: where
        }
      });
    } else {
      layer.setMap(null);
    }
}
function generateWhere() {
  var filter = [];
  var stores = document.getElementsByName('store');
  for (var i = 0, store; store = stores[i]; i++) {
    if (store.checked) {
      var storeName = store.value.replace(/'/g, '\\\'');
      filter.push("'" + storeName + "'");
    }
  }
  var where = '';
  if (filter.length) {
    where = "'col14' IN (" + filter.join(',') + ')';
  }
return where;
} 
//end new stuff 
function changeMap_0() {
  var whereClause;
  var searchString = document.getElementById('search-string_0').value.replace(/'/g, "\\'");
  if (searchString != '--Select--') {
    whereClause = "'Location' = '" + searchString + "'";
  }
  layer_0.setOptions({
    query: {
      select: "col11",
      from: "19xTr3sBmz3hB9n-L14no0BWZgbFJcAGdJNoOoTit",
      where: whereClause
    }
  });
}
function changeMap_1() {
  var whereClause2;
  var searchString = document.getElementById('search-string_1').value.replace(/'/g, "\\'");
  if (searchString != '--Select--') {
    whereClause2 = "'Street_1 Street_2' CONTAINS IGNORING CASE '" + searchString + "'";
  }
  layer_0.setOptions({
    query: {
      select: "col11",
      from: "19xTr3sBmz3hB9n-L14no0BWZgbFJcAGdJNoOoTit",
      where: whereClause2
    }
  });
}
function changeMap_2() {
  var whereClause2;
  var searchString = document.getElementById('search-string_2').value.replace(/'/g, "\\'");
  if (searchString != '--Select--') {
    whereClause2 = "'Jurisdictn' CONTAINS IGNORING CASE '" + searchString + "'";
  }
  layer_0.setOptions({
    query: {
      select: "col11",
      from: "19xTr3sBmz3hB9n-L14no0BWZgbFJcAGdJNoOoTit",
      where: whereClause2
    }
  });
}
function changeMap_3() {
  var whereClause3;
  var searchString = document.getElementById('search-string_3').value.replace(/'/g, "\\'");
  if (searchString != '--Select--') {
    whereClause2 = "'County' = '" + searchString + "'";
  }
  layer_0.setOptions({
    query: {
      select: "col11",
      from: "19xTr3sBmz3hB9n-L14no0BWZgbFJcAGdJNoOoTit",
      where: whereClause2
    }
  });
}
function Reset() {
  var whereClause3;
  var searchString = document.getElementById('search-string_1').value.replace(/'/g, "\\'");
  if (searchString != '--Select--') {
    whereClause2 = "'Street_1' CONTAINS IGNORING CASE '" + searchString + "'";
  }
  layer_0.setOptions({
    query: {
      select: "col11",
      from: "19xTr3sBmz3hB9n-L14no0BWZgbFJcAGdJNoOoTit",
      where: whereClause3
    }
  });
}
function Clear() {
document.getElementById("search-string_1").value= "";
}
google.maps.event.addDomListener(window, 'load', initialize);


  <center><label class="layer-wizard-search-label">
    County</label>
    <select id="search-string_3" onchange="changeMap_3(this.value);">
      <option value="--Select--">--Select--</option>
      <option value="Bastrop">Bastrop</option>
      <option value="Burnet">Burnet</option>
      <option value="Caldwell">Caldwell</option>
      <option value="Hays">Hays</option>
      <option value="Travis">Travis</option>
      <option value="Williamson">Williamson</option>
    </select><label class="layer-wizard-search-label">
    City</label>
    <select id="search-string_0" onchange="changeMap_0(this.value);">
      <option value="--Select--">--Select--</option>
      <option value="Austin">Austin</option>
      <option value="Bastrop">Bastrop</option>
      <option value="Bee Cave">Bee Cave</option>
      <option value="Bertram">Bertram</option>
      <option value="Buda">Buda</option>
      <option value="Burnet">Burnet</option>
      <option value="Caldwell CO">Caldwell CO</option>
      <option value="Cedar Creek">Cedar Creek</option>
      <option value="Cedar Park">Cedar Park</option>
      <option value="Creedmoor">Creedmoor</option>
      <option value="Dripping Springs">Dripping Springs</option>
      <option value="Elgin">Elgin</option>
      <option value="Florence">Florence</option>
      <option value="Georgetown">Georgetown</option>
      <option value="Granite Shoals">Granite Shoals</option>
      <option value="Hutto">Hutto</option>
      <option value="Kingsland">Kingsland</option>
      <option value="Kyle">Kyle</option>
      <option value="Lago Vista">Lago Vista</option>
      <option value="Lakeway">Lakeway</option>
      <option value="Leander">Leander</option>
      <option value="Liberty Hill">Liberty Hill</option>
      <option value="Lockhart">Lockhart</option>
      <option value="Luling">Luling</option>
      <option value="Manor">Manor</option>
      <option value="Marble Falls">Marble Falls</option>
      <option value="Martindale">Martindale</option>
      <option value="Maxwell">Maxwell</option>
      <option value="Pflugerville">Pflugerville</option>
      <option value="Rollingwood">Rollingwood</option>
      <option value="Round Rock">Round Rock</option>
      <option value="San Marcos">San Marcos</option>
      <option value="Serene Hills">Serene Hills</option>
      <option value="Smithville">Smithville</option>
      <option value="Spicewood">Spicewood</option>
      <option value="Sunset Valley">Sunset Valley</option>
      <option value="Taylor">Taylor</option>
      <option value="Travis CO">Travis CO</option>
      <option value="Williamson CO">Williamson CO</option>
      <option value="West Lake Hills">West Lake Hills</option>
      <option value="Wimberley">Wimberley</option>
      <option value="Woodcreek">Woodcreek</option>
      <option value="Wyldwood">Wyldwood</option>
    </select> 
    <label class="layer-wizard-search-label">
      Jurisdiction</label>
    <select id="search-string_2" onchange="changeMap_2(this.value);">
      <option value="--Select--">--Select--</option>
      <option value="City of Austin">Austin</option>
      <option value="City of Cedar Park">Cedar Park</option>
      <option value="City of Georgetown">Georgetown</option>
      <option value="City of Leander">Leander</option>
      <option value="City of Round Rock">Round Rock</option>
      <option value="City of Taylor">Taylor</option>
      <option value="TxDOT">TxDOT</option>
      <option value="Williamson County">Williamson County</option>
    </select> 
  <label class="layer-wizard-search-label">
      Street</label>
    <input onkeydown="if (event.keyCode == 13) document.getElementById('changeMap_1').click()" type="text" id="search-string_1">
    <input type="button" onclick="changeMap_1()" id="changeMap_1" value="Search">
    <input type="button" onclick="Reset(); Clear();" value="Reset"><br>
    <input type="checkbox" name="store" checked="checked"
        id="signals" value="Signals">
        <label>Signals</label>
    <input type="checkbox" name="store"
        id="bluetooth" value="Wavetronix">
        <label>WaveTronix Readers</label>
    <input type="checkbox" name="store"
        id="bluetooth" value="Bluetooth">
        <label>Bluetooth Readers</label></center>
</div>




Aucun commentaire:

Enregistrer un commentaire