Home/ Questions/Q 8307457
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T18:31:39+00:00

I’m trying to create a reset button in a Fusion Tables Map, to once

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0