javascript - show hide polylines google maps -

when page loaded polyline autoloaded on map. m need hide , when click chekcbox show on map. how can it? polylines has categories.. rayon.. call on checkbox categories rayon..

p.s. sorry english code:

    function getline() {        var mpenc = new google.maps.infowindow();   function pinfo(poly, html) {         google.maps.event.addlistener(poly,"mouseover",function(){ poly.setoptions({  strokecolor:'#ffffff', strokeopacity: .8});});        google.maps.event.addlistener(poly,"mouseout",function(){  poly.setoptions({strokecolor:colorr});});        google.maps.event.addlistener(poly,'click', function(event) {     mpenc.setcontent(html);     mpenc.setposition(event.latlng);     mpenc.open(map);   });  }        alert('loading lines.. please wait 10 sec.');   downloadurl("all.php", function(doc) {       alert('lines loaded..');          var g = google.maps;          var xmldoc = xmlparse(doc);         bounds = new google.maps.latlngbounds();        // ========= process polylines ===========       var lines = xmldoc.documentelement.getelementsbytagname("line");        // read each line       (var = 0; < lines.length; a++) {         // line attributes        var colour = lines[a].getattribute("colour");         var width  = parsefloat(lines[a].getattribute("width"));         var diameter = lines[a].getattribute("diameter");         var project = lines[a].getattribute("projectid");       var type = lines[a].getattribute("type");         var contract = lines[a].getattribute("contract");             var cr = lines[a].getattribute("contractor"); if (cr) {cr1 = "  " + cr + " ";} else { cr1 = "none";}         var comp = lines[a].getattribute("complated");         var id = lines[a].getattribute("id_line");         var html = "<b>contractor:</b> " + cr1 + " </a> <br/> <b> contract: </b>" + contract + " <br/><b>line segment:</b> " + id + " <br/><b>project: </b>" + project +"<br/>  <b>diameter: </b>" + diameter + " <br/> <b>completed: </b>" + comp + "% <hr><br/><a class=\"inline-link-1\" href=\"javascript:void(0)\"onclick=\"window.open('cdatal.php?id="+ id +"','cdatal','height=300, width=460,scrollbars=no')\">change completed</a> <a class=\"inline-link-1\" href=\"javascript:void(0)\"onclick=\"window.open('dedit.php?id="+ id +"','cdata','height=300, width=350,scrollbars=no')\">design data</a>" ;         // read each point on line         var points = lines[a].getelementsbytagname("point");         var pts = [];         var length = 0;         var point = null;         (var = 0; < points.length; i++) {            pts[i] = new g.latlng(parsefloat(points[i].getattribute("lng")),                                 parsefloat(points[i].getattribute("lat")));            if (i > 0) {              length += pts[i-1].distancefrom(pts[i]);              if (isnan(length)) { alert("["+i+"] length="+length+" segment="+pts[i-1].distancefrom(pts[i])) };            }            bounds.extend(pts[i]);            point = pts[parseint(i/2)];         }         // length *= 0.000621371192; // miles/meter      if (comp < 1) {   colorr = '#fa0505' }   if (comp > 0 && comp < 25 ) {   colorr = '#ffa640' }   if (comp > 24 && comp < 50) {   colorr = '#fffd91' }   if (comp > 49 && comp < 75) {   colorr = '#e8e400' }   if (comp > 74 && comp < 100) {   colorr = '#bfffad' }   if (comp == 100) {   colorr = '#0f8500' }     if(type == 'dl') {en = '1'}     if(type == 'ml') {en = '3'}     if(type == 'tl') {en = '5'}          var poly = new g.polyline({                           map:map,                           path:pts,                           strokecolor:colorr,                           strokeweight:en,                           clickable: true                           });       pinfo(poly,html);     }       map.fitbounds(bounds);      });   }     <li><input type="checkbox" id="value1" value="wsn/qabala.php" onclick="boxclick(this.value,'qabala','value1')" /> qabala</li>   <li><input type="checkbox" id="value2" value="wsn/ismailli.php"  onclick="boxclick(this.value,'ismailli','value2')" /> ismayilli</li>   <li><input type="checkbox" id="value3"  value="wsn/agshu.php"   onclick="boxclick(this.value,'value3')" /> aghsu</li> .... 

and xml data:

http://nn-gis.com/map/all.php 

do mean this?

http://jsfiddle.net/nczyw/9/

$(function() {      var div = $('#categories');      var map = new google.maps.map($('#map').get(0), {         center: new google.maps.latlng(0, -180),         zoom: 3,         maptypeid: google.maps.maptypeid.roadmap     });      var categories = {         rayon: [             {                 coordinates: [                     [37.772323, -122.214897],                     [21.291982, -157.821856],                     [-18.142599, 178.431],                     [-27.46758, 153.027892]                 ],                 color: '#ff0000'             }         ]     };      $.each(categories, function(name) {          var paths = [];new google.maps.latlng          $.each(this, function(i) {              var path = [];              $.each(this.coordinates, function(i) {                  path.push(new google.maps.latlng(this[0], this[1]));              });              paths.push(new google.maps.polyline({                 path: path,                 strokecolor: this.color,                 strokeopacity: 1.0,                 strokeweight: 2,                 visible: false,                 map: map             }));          });          categories[name] = paths;          div.append('<label><input type="checkbox" value="' + name + '"/> ' + name + '</label>');      });      div.on('change', 'input', function(event) {          var checked = this.checked;          $.each(categories[this.value], function(i) {              this.setvisible(checked);          });      });  }); 

the key group polylines.