Databases
StackOverflow2013
Postsdbo
POToggling Google Map layers on and off
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POToggling Google Map layers on and off
    text
    copied!<p>I am building a custom Google Map (<a href="http://www.southdevonaonb.org.uk/cordialemapping/" rel="nofollow">http://www.southdevonaonb.org.uk/cordialemapping/</a>) and I am having a problem toggling layers on and off.</p> <p>I am using a simple checkbox in the html - for example: </p> <pre><code>Parish boundary line &lt;input type="checkbox" id="layer100" onclick="toggleLayer(100)" checked&gt;&lt;br /&gt; Letterbox locations and results &lt;input type="checkbox" id="layer0" onclick="toggleLayer(0)" checked&gt;&lt;br /&gt; Landscape challenges &lt;input type="checkbox" id="layer1" onclick="toggleLayer(1)" checked&gt;&lt;br /&gt; </code></pre> <p>and the following JavaScript:</p> <pre><code>var geocoder; var map; var marker; var layers = []; function initialize() { geocoder = new google.maps.Geocoder (); var latlng = new google.maps.LatLng (50.31697, -3.670807); var myOptions = { zoom: 10, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("map-container"), myOptions); marker = new google.maps.Marker({map:map}); layers[100] = new google.maps.KmlLayer('http://www.southdevonaonb.org.uk/cordialemapping/kmzdata/100.kml', {preserveViewport: true}); layers[200] = new google.maps.KmlLayer('http://www.southdevonaonb.org.uk/cordialemapping/kmzdata/200.kml', {preserveViewport: true}); layers[300] = new google.maps.KmlLayer('http://www.southdevonaonb.org.uk/cordialemapping/kmzdata/boundaryline.kml', {preserveViewport: true}); layers[0] = new google.maps.KmlLayer('http://www.southdevonaonb.org.uk/cordialemapping/kmzdata/beta0.kml', {preserveViewport: true}); layers[1] = new google.maps.KmlLayer('http://www.southdevonaonb.org.uk/cordialemapping/kmzdata/beta1.kml', {preserveViewport: true}); layers[2] = new google.maps.KmlLayer('http://www.southdevonaonb.org.uk/cordialemapping/kmzdata/beta2.kml', {preserveViewport: true}); layers[10] = new google.maps.KmlLayer('http://www.southdevonaonb.org.uk/cordialemapping/kmzdata/beta10.kml', {preserveViewport: true}); layers[11] = new google.maps.KmlLayer('http://www.southdevonaonb.org.uk/cordialemapping/kmzdata/beta11.kml', {preserveViewport: true}); layers[46] = new google.maps.KmlLayer('http://www.southdevonaonb.org.uk/cordialemapping/kmzdata/holbeton.kml', {preserveViewport: true}); for (var i = 1; i &lt; layers.length; i++) { layers[i].setMap(map); } } function codeAddress () { var address = document.getElementById ("address").value; geocoder.geocode ( { 'address': address}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { map.setCenter(results [1].geometry.location); marker.setPosition(results [1].geometry.location); map.setZoom(14); } else { alert("Geocode was not successful for the following reason: " + status); } }); } function toggleLayer(i) { if(layers[i].getMap() === null) { layers[i].setMap(map); } else { layers[i].setMap(null); } } google.maps.event.addDomListener(window, 'load', initialize); </code></pre> <p>You will see from the script that I haven't yet added all the layers in the list on the page linked above and that I have styled the menu in tabs using the jQuery Accordian Plugin.</p> <p>The layers that I have added so far toggle on and off okay, but the problem I am getting is that when the page is loaded sometimes a layer will show and other times it is hidden and will require the checkbox to be ticked several times before it will appear.</p> <p>I am trying to find a solution to fix this so that the map page will first load with the checkboxes unchecked and the layers hidden. Then as a checkbox is ticked the layer will toggle on and then off again when the checkbox is unticked?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload