mercredi 3 juin 2015

Possible to have check boxes already checked when user clicks on google map website?

I have created a google map with multiple layers with checkboxes so that the user can toggle back and forth on the layers. Currently, when the user opens the map, the layers are already on and the checkboxes are unchecked. How can I change my code so that when the user opens the map, the checkboxes are checked and the layers are on (and then the user can uncheck the checkboxes to take off layers). My website: http://ift.tt/1Jlmy6T

My Javascript code:

var map, layer2, layers;
layers = [];
function initialize() {
    var ontario = new google.maps.LatLng(49.2867873, -84.7493416);

var mapOptions = {
        zoom: 5,
        center: ontario,
styles: [{"featureType":"landscape.natural","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#e0efef"}]},{"featureType":"poi","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"hue":"#1900ff"},{"color":"#c0e8e8"}]},{"featureType":"road","elementType":"geometry","stylers":[{"lightness":100},{"visibility":"simplified"}]},{"featureType":"road","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"transit.line","elementType":"geometry","stylers":[{"visibility":"on"},{"lightness":700}]},{"featureType":"water","elementType":"all","stylers":[{"color":"#7dcdcd"}]}]
    }

    var infoWindow = new google.maps.InfoWindow();
    var openInfoWindow = function (KMLevent) {
        infoWindow.close();
        infoWindow.setOptions(
        {
            content: KMLevent.featureData.infoWindowHtml,
            position: KMLevent.latLng,
            pixelOffset: KMLevent.pixelOffset
        });
        infoWindow.open(map);
    };

     map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    var kmlOptions = {
        suppressInfoWindows: true,  // do not to display an info window when clicked
        preserveViewport: false,
        map: map
    };



  //Layer 0 is NDP       
         layers [0] = new google.maps.KmlLayer('http://ift.tt/1cxMC00',
 {preserveViewport: false, suppressInfoWindows: true});
      //Layer 1 is Liberal    
        layers [1] = new google.maps.KmlLayer('http://ift.tt/1Jlmy71',
 {preserveViewport: false, suppressInfoWindows: true});
        //Layer 2 is PC1 
        layers [2] = new google.maps.KmlLayer('http://ift.tt/1cxMzBn',
 {preserveViewport: false, suppressInfoWindows: true});
// Layer 3 PC2
        layers [3] = new google.maps.KmlLayer('http://ift.tt/1JlmAf9',
 {preserveViewport: false, suppressInfoWindows: true});

        //Layer 4 PC3
        layers [4] = new google.maps.KmlLayer('http://ift.tt/1cxMzBp',
 {preserveViewport: false, suppressInfoWindows: true});
        //layer 5 Schools
        layers [5] = new google.maps.KmlLayer('http://ift.tt/1Jlmyni',
 {preserveViewport: false, suppressInfoWindows: true});


  for (var i = 0; i < layers.length; i++) {
        layers[i].setMap(null);
      }



    layer2 = new google.maps.FusionTablesLayer({
    query: {
      select: 'col9',
      from: '1FzRSqRcxY37i7VtejqONHhAB-MrzFhakYSvZaIvo'
    }
  });
  layer2.setMap(map);

   // Pop-up window
    layers.forEach(function(url) {
        var layer = new google.maps.KmlLayer(url, kmlOptions);
        layer.setMap(map);
        google.maps.event.addListener(layer, "click", openInfoWindow);

    });

}


function toggleLayer(i) {
  if (layers[i].getMap() === null) {
    layers[i].setMap(map);
  }
  else {
    layers[i].setMap(null);
  }
}

//initialize();
google.maps.event.addDomListener(window, 'load', initialize);

My HTML:

    <div id="map-canvas"></div>
    <div id="checkboxes">
  <input type="checkbox" id="layer0" onclick="toggleLayer(0)">NDP <br>
  <input type="checkbox" id="layer1" onclick="toggleLayer(1)">Liberal <br>
  <input type="checkbox" id="layer2" onclick="toggleLayer(2)">PC1 <br>
  <input type="checkbox" id="layer3" onclick="toggleLayer(3)">PC2 <br>
  <input type="checkbox" id="layer4" onclick="toggleLayer(4)">PC3 <br>
  <input type="checkbox" id="layer5" onclick="toggleLayer(5)">Schools 
</div>

My CSS:

   html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px;
}
   #checkboxes {
  position: absolute;
  top: 30px;
  right: 10px;
  font-family: 'arial', 'sans-serif';
  font-size: 14px;
  background-color: white;
    border-width:5px;   
    border-style:groove;
}




Aucun commentaire:

Enregistrer un commentaire