Home/ Questions/Q 7430721
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T09:11:10+00:00

I have two Fusion Tables that are added as layers to a map visualization.

  • 0

I have two Fusion Tables that are added as layers to a map visualization.

  • Layer1 is a list of places (on click, an infobox appears)
  • Layer2 is a map (imported kml polygons) of several regions. Each one is coloured (fill colour) according to a weather forecast (i.e. blue for high chance of rain; red for sunny…)

What I want is:

  • on load: show only Layer1; Layer2 remains hidden.
  • If the user wants to load/see Layer2, he has to check a checkbox.

I don’t know how to do that. Even if it’s possible.

Below is my code.

Thanks in advance!

<script type="text/javascript"src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;

var layer;
var tableid = 1111;

var layer2;
var tableid2 = 2222;

function initialize() {
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: new google.maps.LatLng(10, 10),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
});

layer = new google.maps.FusionTablesLayer(tableid);
layer.setQuery("SELECT 'geometry' FROM " + tableid);
layer.setMap(map);

layer2 = new google.maps.FusionTablesLayer(tableid2);
layer2.setQuery("SELECT 'coordenadas' FROM " + tableid2);
layer2.setMap(map); 
 }

function changeLayer(tableidselections) {

if (tableidselections == 1111){
     if (document.getElementById("avisos").checked == true) {
       if(layer.getMap() == null) { layer.setMap(map); }
     }

     if (document.getElementById("avisos").checked == false) {
         layer.setMap(null); 
     }

}

if (tableidselections == 2222){
     if (document.getElementById("eventos").checked == true) {
       if(layer2.getMap() == null) { layer2.setMap(map); }
     }

     if (document.getElementById("eventos").checked == false) {
         layer2.setMap(null);
     }
}

 }

 </script>

</head>
<body onload="initialize();">

<div id="selector_box">
  <table> 
        <tr><td> 
          <form id="selector_form" style="font-size:14px"> 
              <input type="checkbox" value="1111" name="selector" id="avisos" onclick="changeLayer(this.value);">Show weather info
              <!-- <input type="checkbox" value="2222" name="selector" id="eventos" onclick="changeLayer(this.value);">Eventos -->
          </form> 
        </td></tr>
  </table>
</div>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Yes you can do this; your code seems like it should work. Just skip layer2.setMap(map) in the initialize method, and then layer2 won’t load by default.

    If you’re having troubles, then maybe post your full code (with actual table ids) to jsfiddle or some other location and say what the issue is.

    • 0