i trying add ability toggle kmls checkbox options users add kmls map has couple of kmls loaded default.
i used posts suggestions has in common other posts of variety expand on own script - toggle multiple kml/kml layers in google maps api v3 adding in pretty straightforward way doesn't work. have suggestions? looking.
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script> <script> // layers toggle var layers=[]; layers[0] = new google.maps.kmllayer('https://example.com/kmz/groundwater_well_2010.kml', {preserveviewport: true}); layers[1] = new google.maps.kmllayer('https://example.com/kmz/snowpole_2010.kml', {preserveviewport: true}); var map; // end layers toggle // intialize function initialize() { var mylatlng = new google.maps.latlng(0,0); var mapoptions = { zoom: 1, center: mylatlng, maptypeid: google.maps.maptypeid.satellite }; var map = new google.maps.map(document.getelementbyid('map'), mapoptions); loadkml=function(opts,map){ var layer=new google.maps.kmllayer(); opts.preserveviewport=true; if(map){opts.map=map;} google.maps.event.addlistener(layer,'defaultviewport_changed',function(){ var map=this.getmap(), bounds=map.get('kmlbounds')||this.getdefaultviewport(); bounds.union(this.getdefaultviewport()); map.set('kmlbounds',bounds); map.fitbounds(bounds); }); layer.setoptions(opts); return layer; } var siteslayer = loadkml({ url: 'https://example.com/kmzbasins.kml', map:map }); var basinlayer = loadkml({ url: 'https://example.com/kmz/boundries.kml', map:map }); // toggle layers @ beginning function togglelayers(i,themap) { if(layers[i].getmap()==null) { layers[i].setmap(themap); } else { layers[i].setmap(null); } document.getelementbyid('status').innerhtml += "togglelayers("+i+") [setmap("+layers[i].getmap()+"] returns status: "+layers[i].getstatus()+"<br>"; } // end toggle layers } google.maps.event.adddomlistener(window, 'load', initialize); </script> then in body have-
<body onload="initialize()"> <div id="map"></div> layer1 <input type="checkbox" id="layer_01" onclick="togglelayers(0);"/> layer2 <input type="checkbox" id="layer_02" onclick="togglelayers(1);"/>
you have 2 options:
- maker map variable global (it local initialize function), , make togglelayers function global (they need global used in html click handlers.
- use google.maps.event.adddomlistener add click listeners check boxes, keep every thing local initialize function.
code snippet:
// layers toggle var layers = []; layers[0] = new google.maps.kmllayer('http://www.geocodezip.com/geoxml3_test/utah-hunt_com_deersouthern_kml.xml', { preserveviewport: true }); layers[1] = new google.maps.kmllayer('http://www.geocodezip.com/geoxml3_test/utah-hunt_com_deersoutheastern_kml.xml', { preserveviewport: true }); // end layers toggle // intialize function initialize() { var mylatlng = new google.maps.latlng(40, -110); var mapoptions = { zoom: 5, center: mylatlng, maptypeid: google.maps.maptypeid.satellite }; var map = new google.maps.map(document.getelementbyid('map'), mapoptions); loadkml = function(opts, map) { var layer = new google.maps.kmllayer(); opts.preserveviewport = true; if (map) { opts.map = map; } google.maps.event.addlistener(layer, 'defaultviewport_changed', function() { var map = this.getmap(), bounds = map.get('kmlbounds') || this.getdefaultviewport(); bounds.union(this.getdefaultviewport()); map.set('kmlbounds', bounds); map.fitbounds(bounds); }); layer.setoptions(opts); return layer; }; function togglelayers(i) { if (layers[i].getmap() == null) { layers[i].setmap(map); } else { layers[i].setmap(null); } google.maps.event.addlistener(layers[i], 'status_changed', function() { document.getelementbyid('status').innerhtml += "togglelayers(" + + ") [setmap(" + layers[i].getmap() + "] returns status: " + layers[i].getstatus() + "<br>"; }); } // end toggle layers google.maps.event.adddomlistener(document.getelementbyid('layer_01'), 'click', function(evt) { togglelayers(0); }); google.maps.event.adddomlistener(document.getelementbyid('layer_02'), 'click', function(evt) { togglelayers(1); }); // toggle layers @ beginning togglelayers(0); togglelayers(1); } google.maps.event.adddomlistener(window, 'load', initialize);body, html, #map { height: 100%; width: 100%; }<script src="https://maps.googleapis.com/maps/api/js"></script> layer1 <input type="checkbox" id="layer_01" checked="checked" />layer2 <input type="checkbox" id="layer_02" checked="checked" /> <div id="map"></div> <div id="status"></div>
Comments
Post a Comment