title: Toggle kml layers in Maps API
body: <p>I am trying to now add the ability to toggle kmls with checkbox options for users to add kmls to a map that already has a couple of kmls loaded by default. </p>
  
  <p>I used this posts suggestions which has much in common with other posts of this variety to expand on my own script -
  <a href="https://stackoverflow.com/questions/17409598/toggle-multiple-kml-kml-layers-in-google-maps-api-v3">Toggle multiple KML/KML layers in google maps API v3</a>
  But adding it in a pretty straightforward way doesn't work.
  Does anyone have any suggestions? Thanks for looking.</p>
  
  <pre><code>&lt;script src="https://maps.googleapis.com/maps/api/js?v=3"&gt;&lt;/script&gt;
  
   &lt;script&gt;     
      // layers to toggle 
  
          var layers=[];
  
      layers[0] = new  google.maps.KmlLayer('https://example.com/kmz/groundWater_well_2010.kml',
      {preserveViewport: true});
  
      layers[1] = new google.maps.KmlLayer('https://example.com/kmz/snowPole_2010.kml',
      {preserveViewport: true});
      var map;
  
      // end layers to toggle 
      // intialize 
  
      function initialize() {
      var myLatlng = new google.maps.LatLng(0,0);
          var mapOptions = {
            zoom: 1,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.SATELLITE
          };
  
  
        var map = new google.maps.Map(document.getElementById('map'), mapOptions);
  
        loadKml=function(opts,map){
           var layer=new google.maps.KmlLayer();
           opts.preserveViewport=true;
           if(map){opts.map=map;}
  
           google.maps.event.addListener(layer,'defaultviewport_changed',function(){
               var map=this.getMap(),
                   bounds=map.get('kmlBounds')||this.getDefaultViewport();
  
               bounds.union(this.getDefaultViewport());
               map.set('kmlBounds',bounds);
               map.fitBounds(bounds); 
           });
           layer.setOptions(opts);
           return layer; 
        }
  
        var sitesLayer = loadKml({
          url: 'https://example.com/kmzbasins.kml',
          map:map
        });
  
        var basinLayer = loadKml({
          url: 'https://example.com/kmz/boundries.kml',
            map:map
        });
  
        // toggle layers at the beginning
  
      function toggleLayers(i,theMap)
      {
  
       if(layers[i].getMap()==null) {
           layers[i].setMap(theMap);
        }
        else {
           layers[i].setMap(null);
      }
        document.getElementById('status').innerHTML += "toggleLayers("+i+") [setMap("+layers[i].getMap()+"] returns status: "+layers[i].getStatus()+"&lt;br&gt;";
      }
      // end toggle layers 
  
      }
  
      google.maps.event.addDomListener(window, 'load', initialize);
  
          &lt;/script&gt;
  </code></pre>
  
  <p>Then in the body I have-</p>
  
  <pre><code>&lt;body onload="initialize()"&gt;
  
      &lt;div id="map"&gt;&lt;/div&gt;
      Layer1 &lt;input type="checkbox" id="layer_01" onclick="toggleLayers(0);"/&gt;
      Layer2 &lt;input type="checkbox" id="layer_02" onclick="toggleLayers(1);"/&gt;
  </code></pre>