Reset Button - creating a function and a button to make it works

I'm trying to create a reset button in a Fusion Tables Map, to once it is clicked all the markers show up. But something is not working on it. Please take a look:

HERE'S THE ENTIRE CODE:

Actually I tryed to "mimic" the function initialize() from the layer10 part in the function clearBox(). I also tryed to use the method reset(), but it didn't work too.

<!DOCTYPE html>
<html>
<head>
<style>
#map-canvas { width:500px; height:600px; }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var map;
var layerl0;
function initialize() {
  map = new google.maps.Map(document.getElementById('map-canvas'), {
    center: new google.maps.LatLng(-30.070876662388095, -51.1907958984375),
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  layerl0 = new google.maps.FusionTablesLayer({
    query: {
      select: "'ENDERECO'",
      from: '3385625'
    },
    map: map
  });
}
function changeMapl0() {
  var searchString = document.getElementById('search-string-l0').value.replace(/'/g, "\\'");
  layerl0.setOptions({
    query: {
      select: "'ENDERECO'",
      from: 3385625,
      where: "'TIPO' = '" + searchString + "'"
    }
  });
}
google.maps.event.addDomListener(window, 'load', initialize);

//Function to be activated by the reset button
function clearBox() {
document.getElementById('search-string-l0').value = "";
  layerl0 = google.maps.FusionTablesLayer({
    query: {
      select: "'ENDERECO'",
      from: '3385625'
    },
  });
}

 </script>
 </head>
 <body>
<div id="map-canvas"></div>
<div style="margin-top: 10px;">
  <label>Tipo</label>
  <select id="search-string-l0" onchange="changeMapl0 (this.value);">
    <option value="">--Select--</option>
    <option value="Comidas variadas">Comidas variadas</option>
    <option value="Restaurante">Restaurante</option>
    <option value="Bar">Bar</option>
    <option value="Hotel">Hotel</option>
    <option value="Shopping Center">Shopping Center</option>
    <option value="Teatro">Teatro</option>
    <option value="Igreja">Igreja</option>
    <option value="Museu">Museu</option>
    <option value="Espaço de Cultura">Espaço de Cultura</option>
  </select><br/>
<input type="button" onclick="clearBox()" value="Reset Map" />
</div>
</body>
</html>

Solution

Sounds like you need to reset your query like this map from this recent post on SO

Looking at your complete code, the simplest way to make it work is to change your reset function to just change the query, not recreate the FusionTablesLayer:

change:

function clearBox() {
document.getElementById('search-string-l0').value = "";
  layerl0 = google.maps.FusionTablesLayer({
    query: {
      select: "'ENDERECO'",
      from: '3385625'
    },
  });
}

to:

function clearBox() {
document.getElementById('search-string-l0').value = "";
  layerl0.setOptions({
    query: {
      select: "'ENDERECO'",
      from: '3385625'
    }
  });
}

Note: I also removed an extraneous comma that would probably cause issues in IE.

Working Example