Javascript for Google API v3：can not get clickboxes toggle Fusion Layers on/off

我试图为自己弄明白这一点，包括看看这里的[QA on layers] [1]，但是我不能看看为什么我的脚本不起作用。Javascript for Google API v3：can not get clickboxes toggle Fusion Layers on/off

我有2个融合表，它们被显示为图层。我希望两个单击框在选中时打开/关闭图层。

请有人看看我的代码，看看他们能否发现有什么问题？我会很感激！ :)

谢谢。

<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="UTF-8"> 
    <h3>new vs old layers</h3> 
    <style type="text/css"> 
     html { height: 100% } 
     body { height: 100%; margin: 0; padding: 0 } 
     #map_canvas { height: 100% } 
    </style> 
    <script type="text/javascript" 
     src="http://maps.google.com/maps/api/js?key=AIzaSyDjB2uAt9B6cFcUiJAgANg63qNQtiF6v24&sensor=false"></script> 
    <script type="text/javascript"> 
    function toggleLayer(this_layer){ 
     if(this_layer.getMap()) { 
     this_layer.setMap(null) 
     } else { 
     this_layer.setMap(map); 
     } 
    } 
    function initialize() { 
     var map = new google.maps.Map(document.getElementById("map_canvas"), { 
     center: new google.maps.LatLng(51.765, -1.384), 
     zoom: 9, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
     }); 
     var layer1 = new google.maps.FusionTablesLayer({ 
     query: { 
      select: 'col2', 
      from:'1NxFkNmdXHOvvWNnaWscabdxUDQqDul1BpiINtHI' 
     }, 
     map: map 
     }); 
     var layer2 = new google.maps.FusionTablesLayer({ 
     query: { 
      select: 'col2', 
      from:'1aM37b7PzUg3nqF14L4GzDbSrUGAfWOuIGcbkV2c' 
     }, 
     map: map 
     }); 
    } 
    </script></head> 
    <body onload="initialize();"> 
    <div> 
     <input type="checkbox" id="show_hide_layer1" checked onchange="toggleLayer(layer1)"/> 
     <label> old boundaries </label> 
     <input type="checkbox" id="show_hide_layer2" checked onchange="toggleLayer(layer2)"/> 
     <label> new boundaries </label> 
    </div> 
    <div id="map_canvas" style="width:80%; height:80%"></div> 
    </body> 
</html>

来源

2012-11-08 user1809422