在google web javascript API中通过单击复选框切换多个GeoJSON层

我想使用复选框将多个GeoJSON层加载到我的地图。我可以通过下面的代码片段在地图中加载多个层，但我需要的是只在单击对应的复选框时加载每个json层。当复选框处于启用状态时，它应该显示相应的层，当复选框处于禁用状态时，它应该隐藏。我在链接中找到了类似的mapbox，但我使用的是本机GoogleWebJavaScriptAPI

<input type="checkbox" id="jsonlayer1" onClick="togglejsonLayer(1);"/>
<input type="checkbox" id="jsonlayer2" onClick="togglejsonLayer(2);"/>
<input type="checkbox" id="jsonlayer3" onClick="togglejsonLayer(3);"/>

<div id="map-canvas"></div>
<script type="text/javascript">
var map;
function initMap() 
{
    map = new google.maps.Map(document.getElementById('map-canvas'), 
    {
       zoom: 13, center: {lat: 8.4902, lng: 77.0361}, mapTypeId: google.maps.MapTypeId.SATELLITE
    });

    var Layer = new google.maps.Data();
    Layer.loadGeoJson('file1.json');
    Layer.loadGeoJson('file2.json');
    Layer.loadGeoJson('file3.json');
    Layer.setStyle(function(feature) 
    {
      return ({
        fillColor: feature.getProperty('#ffffff'),
        fillOpacity: 0.35,
        strokeColor: '#FF0000',
        strokeWeight:1
             });
    });
    Layer.setMap(map);
    var infowindow = new google.maps.InfoWindow();
    Layer.addListener('mouseover', function(event) 
    {
        var feat = event.feature;
        var myHTMLss = "<b>Name: </b>" + feat.getProperty('NAME');
        infowindow.setContent(myHTMLss);
        infowindow.setPosition(event.latLng);
        infowindow.open(map);
    });
}
</script>

var映射；
函数initMap（）
{
map=new google.maps.map（document.getElementById（'map-canvas'），
{
zoom:13，中间：{lat:8.4902，lng:77.0361}，mapTypeId:google.maps.mapTypeId.SATELLITE
});
var Layer=new google.maps.Data（）；
Layer.loadGeoJson（'file1.json'）；
Layer.loadGeoJson（'file2.json'）；
Layer.loadGeoJson（'file3.json'）；
图层设置样式（功能（特征）
{
返回({
fillColor:feature.getProperty（'#ffffff'），
不透明度：0.35，
strokeColor:“#FF0000”，
冲程重量：1
});
});
图层设置图（map）；
var infowindow=new google.maps.infowindow（）；
Layer.addListener（'mouseover'，函数（事件）
{
var feat=event.feature；
var myHTMLss=“Name:”+feat.getProperty（'Name'）；
infowindow.setContent（myHTMLss）；
infowindow.setPosition（event.latLng）；
打开（地图）；
});
}

单独控制每个图层数据的最简单方法是为每个图层创建单独的数据对象，然后根据复选框状态将其添加到地图或从地图中删除

function createDataLayer(url) {
  var Layer = new google.maps.Data();
  Layer.loadGeoJson(url);
  Layer.setStyle(function(feature) {
    return ({
      fillColor: feature.getProperty('#ffffff'),
      fillOpacity: 0.35,
      strokeColor: '#FF0000',
      strokeWeight:1
    });
  });
  Layer.addListener('mouseover', function(event) {
    var feat = event.feature;
      var myHTMLss = "<b>Name: </b>" + feat.getProperty('NAME');
      infowindow.setContent(myHTMLss);
      infowindow.setPosition(event.latLng);
      infowindow.open(map);
  });
  return Layer;
}


function togglejsonLayer(index) {
  layers[index-1].setMap(layers[index-1].getMap()==null?map:null);
}

layers = [];
layers.push(createDataLayer('http://www.geocodezip.com/GeoJSON/Arizona.json.txt'));
layers.push(createDataLayer('http://www.geocodezip.com/GeoJSON/Utah.json.txt'));
layers.push(createDataLayer('http://www.geocodezip.com/GeoJSON/Colorado.json.txt'));

/*始终明确设置贴图高度以定义div的大小
*包含映射的元素*/
#地图画布{
身高：80%；
}
/*可选：使示例页面填充窗口*/
html，
身体{
身高：100%；
保证金：0；
填充：0；
}