Pessoal sou iniciante em programação e estou tentando desenvolver um web map que possui layers, para serem ligados ou desligados pelo usuário através das checkbox.
Estou com dificuldade para fazer com que a página seja carregada com as checkbox desmarcadas, e portanto, com os layers desligados. Já tentei remover o "checked" do código, porém, quando faço isso a página carrega com as checkbox desmarcadas, mas os layers permanecem ligados (visíveis), ou seja, o layer fica ligado com a checkbox desmarcada e desliga quando é selecionada. Alguém pode me ajudar a resolver isso? Obrigado.
<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);