Start page with checkbox unchecked

Navigation
0

I'm new to programming and I'm trying to develop a web map that has layers, to be turned on or off by the user through checkboxes.

I'm having a hard time getting the page loaded with the checkboxes unchecked, and therefore with the layers off. I have tried to remove the "checked" code, but when I do this the page loads with the checkboxes unselected, but the layers remain on (visible), that is, the layer stays connected with the checkbox unselected and turns off when it is selected. Can anyone help me solve this? Thank you. 

<html>
<head>
    <title>Lajeado</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script><scripttype="text/javascript" src="JavaScript.js"></script>
</head>
<body>
    <h2> Lajeado </h2>
<div id="left">
    <div id="map-canvas"></div>
</div>
<div id="right">
    <div><input type="checkbox" value="1" onclick="changeMap(this.value)" checked="checked" />Bacia </div>
    <div><br /></div>
    <div><input type="checkbox" value="2" onclick="changeMap(this.value)" checked="checked" />Drenagem (Fonte: IBGE) </div>
    <div><br /></div>
    <div><input type="checkbox" value="3" onclick="changeMap(this.value)" checked="checked" />Escoamento </div>
    <div><br /></div>
    <div><input type="checkbox" value="4" onclick="changeMap(this.value)" checked="checked" />Nascente </div>
    <div><br /></div>
</div>      
</body>
</html>

JS 

var map;
var layer_1;
var layer_2;
var layer_3;
var layer_4;
function initialize() {
  map = new google.maps.Map(document.getElementById('map-canvas'), {
    scaleControl: true,
    center: new google.maps.LatLng(-21.450924824, -50.053680947),
    zoom: 11
  });
  var style = [
    {
      featureType: 'all',
      elementType: 'all',
      stylers: [
        { saturation: 40 }
      ]
    },
    {
      featureType: 'poi',
      elementType: 'all',
      stylers: [
        { visibility: 'off' }
      ]
    }
  ];
  var styledMapType = new google.maps.StyledMapType(style, {
    map: map,
    name: 'Styled Map'
  });
  map.mapTypes.set('map-style', styledMapType);
  map.setMapTypeId('map-style');

  layer_1 = new google.maps.FusionTablesLayer({
    query: {
      select: "col7",
      from: "1CM8eBU_gtCiCZwkF5G3A7bzc4fqlKrfEye0rMVE-"
    },
    map: map,
    styleId: 2,
    templateId: 2
  });
  layer_2 = new google.maps.FusionTablesLayer({
    query: {
      select: "col7",
      from: "1R07xjdfQUdcoRnq0E-TWp5aRxDkc_0szfrwgQCYL"
    },
    map: map,
    styleId: 2,
    templateId: 2
  });
  layer_3 = new google.maps.FusionTablesLayer({
    query: {
    select: "col2\x3e\x3e0",
    from: "1h1oCB9eh7vc1dwhH5pC_uLqwio5xprCg2SCOYATF",
    },
    map: map,
    styleId: 2,
    templateId: 2
  });
  layer_4 = new google.maps.FusionTablesLayer({
    query: {
    select: "col1",
    from: "1DCIBimKUgBiZqtMNP59682IdrH5vL3cOWWZSDwBf",
    },
    map: map,
    styleId: 2,
    templateId: 2
  });
}
function changeMap(layerNum) {
if (layerNum == 1) {
update(layer_1);
}
if (layerNum == 2) {
update(layer_2);
}
if (layerNum == 3) {
update(layer_3);
}
if (layerNum == 4) {
update(layer_4);
}
}
function update(layer) {
var layerMap = layer.getMap();
if (layerMap) {
layer.setMap(null);
} else {
layer.setMap(map);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
    
asked by anonymous 26.04.2017 / 22:25

1 answer

0

I did as follows: After defining the areas, I made them disappear from the map, using 

layer_1.setMap(null);
layer_2.setMap(null);
layer_3.setMap(null);
layer_4.setMap(null);

So overall% w / w% 

var map;
var layer_1;
var layer_2;
var layer_3;
var layer_4;
function initialize() {
  map = new google.maps.Map(document.getElementById('map-canvas'), {
    scaleControl: true,
    center: new google.maps.LatLng(-21.450924824, -50.053680947),
    zoom: 11
  });
  var style = [
    {
      featureType: 'all',
      elementType: 'all',
      stylers: [
        { saturation: 40 }
      ]
    },
    {
      featureType: 'poi',
      elementType: 'all',
      stylers: [
        { visibility: 'off' }
      ]
    }
  ];
  var styledMapType = new google.maps.StyledMapType(style, {
    map: map,
    name: 'Styled Map'
  });
  map.mapTypes.set('map-style', styledMapType);
  map.setMapTypeId('map-style');

  layer_1 = new google.maps.FusionTablesLayer({
    query: {
      select: "col7",
      from: "1CM8eBU_gtCiCZwkF5G3A7bzc4fqlKrfEye0rMVE-"
    },
    map: map,
    styleId: 2,
    templateId: 2,
    suppressInfoWindows: true
  });
  layer_2 = new google.maps.FusionTablesLayer({
    query: {
      select: "col7",
      from: "1R07xjdfQUdcoRnq0E-TWp5aRxDkc_0szfrwgQCYL"
    },
    map: map,
    styleId: 2,
    templateId: 2,
    suppressInfoWindows: true
  });
  layer_3 = new google.maps.FusionTablesLayer({
    query: {
    select: "col2\x3e\x3e0",
    from: "1h1oCB9eh7vc1dwhH5pC_uLqwio5xprCg2SCOYATF",
    },
    map: map,
    styleId: 2,
    templateId: 2,
    suppressInfoWindows: true
  });
  layer_4 = new google.maps.FusionTablesLayer({
    query: {
    select: "col1",
    from: "1DCIBimKUgBiZqtMNP59682IdrH5vL3cOWWZSDwBf",
    },
    map: map,
    styleId: 2,
    templateId: 2,
    suppressInfoWindows: true
  });
  layer_1.setMap(null);
  layer_2.setMap(null);
  layer_3.setMap(null);
  layer_4.setMap(null);
}

function changeMap(layerNum) {
    if (layerNum == 1) {
        update(layer_1);
    }
    if (layerNum == 2) {
        update(layer_2);
    }
    if (layerNum == 3) {
        update(layer_3);
    }
    if (layerNum == 4) {
        update(layer_4);
    }
}
function update(layer) {
    var layerMap = layer.getMap();
    if (layerMap) {
        layer.setMap(null);
    } else {
        layer.setMap(map);
    }
}
google.maps.event.addDomListener(window, 'load', initialize);

see action Here

Oh, do not forget to take the% w / o of the fields

    
26.04.2017 / 23:44
DO NOT show alert messeger when reloading page Web View with zoom