0

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);
4
  • Onde estão essas layers?
    – user60252
    Commented 26/04/2017 às 20:29
  • Os layers foram criados através do Google Fusion Tables e inseridos por javascript.
    – GisUser
    Commented 26/04/2017 às 20:43
  • Só com esse código postado não dá pra reproduzir o cenário.
    – user60252
    Commented 26/04/2017 às 20:46
  • Código JS adicionado na pergunta
    – GisUser
    Commented 26/04/2017 às 21:13

1 Resposta 1

0

Eu fiz da seguinte forma: Depois de definir as areas, eu fiz elas sumirem do mapa, usando

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

ficou assim no geral o 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);

da pra ver em ação aqui

Ah, não esquece de tirar os checked dos campos

1
  • Obrigado Daniel
    – GisUser
    Commented 26/04/2017 às 22:56

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .