Start page with unchecked checkbox

Asked

Viewed 434 times

0

Personal I am beginner in programming and I am trying to develop a web map that has layers, to be connected or disconnected by the user through the checkbox.

I’m having a hard time getting the page loaded with checkboxes unchecked, and therefore with the layers turned off. I have tried to remove "checked" from the code, but when I do this the page loads with checkboxes unchecked, but the layers remain connected (visible), that is, the layer is turned on with the checkbox unchecked and turns off when it is selected. Can someone 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>
    <script type="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);
javascript html google-maps-api-3

  • Where are these layers?

  • The layers were created through Google Fusion Tables and entered by javascript.

  • Only with this code posted can not reproduce the scenario.

  • JS Code Added to Question

1 answer

0


I did it this way: 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);

was thus in general the 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,
    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);

you can see in action here

Ah, don’t forget to take the checked of the fields

  • Thank you Daniel

Browser other questions tagged javascript html google-maps-api-3

You are not signed in. Login or sign up in order to post.