Toggle multiple KML/KML layers in google maps API v3

google-maps, google-maps-api-3, google-maps-markers, kml

Solution

the posted code does not include the API, this is missing:

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

There are a few typos:

javascript is case sensitive getmap is not a valid method name, should be getMap.

kmlLayer01 is not defined, probably should be layers[i]

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

      <script type="text/javascript">
      var layers=[];

      layers[0] = new  google.maps.KmlLayer('http://wrf1.geology.um.maine.edu/bipush/kml/plot_5254.kml',
      {preserveViewport: true});

      layers[1] = new google.maps.KmlLayer('http://wrf1.geology.um.maine.edu/bipush/kml/plot_5938.kmz',
      {preserveViewport: true});
      var map;

      function initialize() {
          var latlng = new google.maps.LatLng(52.5028910, 13.41032740);
          var myOptions = {
                  zoom: 3,
                  center: latlng,
                  mapTypeIds: google.maps.MapTypeId.ROADMAP
          }
          map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
      }

      function toggleLayers(i)
      {

        if(layers[i].getMap()==null) {
           layers[i].setMap(map);
        }
        else {
           layers[i].setMap(null);
        }
        document.getElementById('status').innerHTML += "toggleLayers("+i+") [setMap("+layers[i].getMap()+"] returns status: "+layers[i].getStatus()+"<br>";
      }


      </script>
      </head>
      <body onload="initialize()">
      Layer1 <input type="checkbox" id="layer_01" onclick="toggleLayers(0);"/>
      Layer2 <input type="checkbox" id="layer_02" onclick="toggleLayers(1);"/>
      <div id="map_canvas" style="height:500px; width:600px;"></div>
      <div id="status"></div>
      </body>
      </html>

working example

code snippet:

var layers = [];

layers[0] = new google.maps.KmlLayer("http://www.geocodezip.com/geoxml3_test/utah-hunt_com_DeerSouthern_kml.xml",
  /*'http://wrf1.geology.um.maine.edu/bipush/kml/plot_5254.kml', original KML no longer available */
  {
    preserveViewport: true
  });

layers[1] = new google.maps.KmlLayer("http://www.geocodezip.com/geoxml3_test/utah-hunt_com_DeerSoutheastern_kml.xml",
  /* 'http://wrf1.geology.um.maine.edu/bipush/kml/plot_5938.kmz', original KML no longer available */
  {
    preserveViewport: true
  });
var map;

function initialize() {
  var latlng = new google.maps.LatLng(38, -112 /*52.5028910, 13.41032740 */ );
  var myOptions = {
    zoom: 5,
    center: latlng,
    mapTypeIds: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

function toggleLayers(i) {

  if (layers[i].getMap() == null) {
    layers[i].setMap(map);
  } else {
    layers[i].setMap(null);
  }
  document.getElementById('status').innerHTML += "toggleLayers(" + i + ") [setMap(" + layers[i].getMap() + "] returns status: " + layers[i].getStatus() + "<br>";
}

google.maps.event.addDomListener(window, 'load', initialize);

<script src="http://maps.google.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
Layer1
<input type="checkbox" id="layer_01" onclick="toggleLayers(0);" />Layer2
<input type="checkbox" id="layer_02" onclick="toggleLayers(1);" />
<div id="map_canvas" style="height:500px; width:600px;"></div>
<div id="status"></div>

Problem

I have been tying to toggle KML layers in google maps. I have had it setup such that only one layer shows up with out any toggle button. I followed many examples online but none seem to work. The code I have setup so far is below: ``` <html> <head> <script type="text/javascript"> var layers=[]; layers[0] = new google.maps.KmlLayer('http://wrf1.geology.um.maine.edu/bipush/kml/plot_5254.kml', {preserveViewport: true}); layers[1] = new google.maps.KmlLayer('http://wrf1.geology.um.maine.edu/bipush/kml/plot_5938.kmz', {preserveViewport: true}); var map; function initialize() { var latlng = new google.maps.LatLng(52.5028910, 13.41032740); var myOptions = { zoom: 3, center: latlng, mapTypeIds: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); } function toggleLayers(i) { if(layers[i].getmap()==null){ kmlLayer01.setMap(null); } else{ layers[i].setMap(null); } } </script> </head> <body onload="initialize()"> Layer1 <input type="checkbox" id="layer_01" onclick="toggleLayers(0);"/> Layer2 <input type="checkbox" id="layer_02" onclick="toggleLayers(1);"/> <div id="map_canvas"></div> </body> </html> ``` Please help!

Original source