google maps with checkbox layers

Question

i can not find code a google maps with checkbox layers but when I select checkbox bug crawls i need to do something like that but with my layers

toggleLayers(0) [setMap([object Object]] returns status: undefined
toggleLayers(0) [setMap(null] returns status: INVALID_REQUEST
toggleLayers(1) [setMap([object Object]] returns status: undefined
toggleLayers(1) [setMap(null] returns status: undefined

What I did not correct?What did I go wrong? P.S. sorry for my english

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

var layers=[];

layers[0] = new  google.maps.KmlLayer('ban.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 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>";
}

<body onload="initialize()">
Parish boundary line <input type="checkbox" id="layer100" onclick="toggleLayer(100)"  checked><br /> 
Letterbox locations and results <input type="checkbox" id="layer0" onclick="toggleLayer(0)" checked><br />
Landscape challenges <input type="checkbox" id="layer1" onclick="toggleLayer(1)" checked><br />
<div id="map_canvas" style="height:500px; width:600px;"></div>
<div id="status"></div>

score 1 · Answer 1 · answered Jul 09 '14 at 09:55

Try to see if the code below will work, if not consider changing the url of your "ban.kml" file I feel that may be the cause, in order for Google to fetch your kml file it needs to have an Http://

Please try this version of code note you will need to change the coordinates and API key;

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YourAPI        "></script>
 <script type="text/javascript" src="~/Scripts/test.js"></script>
 <script type="text/javascript">
var layers=[];
layers[0] = new google.maps.KmlLayer('ban.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(-23.670035, 27.536779);
var myOptions = {
        zoom: 13,
        center: latlng,
        mapTypeIds: google.maps.MapTypeId.SATELLITE
}
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()">
letterbox locations <input type="checkbox" id="layer_01" onclick="toggleLayers(0);"/>
landscape locations <input type="checkbox" id="layer_02" onclick="toggleLayers(1);"/> 
<div id="map_canvas" style="height:500px; width:600px;"></div>
<div id="status"></div>
</body>

google maps with checkbox layers

1 Answers1