by code can show , hide markers.. code not work polylines. when page loading lines automaticly loaded.. can suggest how toggle polylines in googlemap?
thanks.
p.s. sorry english
var mycoordslenght = 6; var gmarkers = []; function show(category) { (var i=0; i<gmarkers.length; i++) { if (gmarkers[i].mycategory == category) { if (!gmarkers[i].getmap()) gmarkers[i].setmap(map); gmarkers[i].setvisible(true); } } // == check checkbox == document.getelementbyid(category+"box").checked = true; } function hide(category) { (var i=0; i<gmarkers.length; i++) { if (gmarkers[i].mycategory == category) { gmarkers[i].setvisible(false); } } document.getelementbyid(category+"box").checked = false; infowindow.close(); } function boxwclick(box,category) { if (box.checked) { show(category); } else { hide(category); } } function load() { var myoptions = { zoom: 7, center: new google.maps.latlng(40.0000, 48.0000), maptypecontrol: true, maptypecontroloptions: { style: google.maps.maptypecontrolstyle.dropdown_menu }, zoomcontrol: true, zoomcontroloptions: { style: google.maps.zoomcontrolstyle.small }, maptypeid: google.maps.maptypeid.hybrid, } map = new google.maps.map(document.getelementbyid("map"), myoptions); var infowindow = new google.maps.infowindow; 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 category = lines[a].getattribute("rayon"); 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 marker = new g.polyline({ map:map, path:pts, strokecolor:colorr, strokeweight:en, clickable: true }); marker.mycategory = category; marker.myname = name; gmarkers.push(marker); bindinfowindow(marker, map, infowindow, html); } map.fitbounds(bounds); }); function bindinfowindow(marker, map, infowindow, html, category) { google.maps.event.addlistener(marker, 'click', function() { infowindow.setcontent(html); infowindow.open(map, marker); }); } /***************************************************************/ }
html:
<li> <input type="checkbox" id="siyazanbox" onclick="boxwclick(this,'siyazan')" /> <label>siyazan</label></li>
xml:
<marker><line id_line="1" colour="null" width="2" diameter="110" contract="wws2" contractor="sade compagnie generale de travaux d'hydraulique" projectid="nwssp-2" complated="0" rayon="siyazan" type="dl" coordinats="49.1221079493,41.0833787143;49.1227564511,41.0838059721;49.1230700892,41.0839889587;49.1241003797,41.0845428473"><point lng="41.0833787143" lat="49.1221079493"/><point lng="41.0838059721" lat="49.1227564511"/><point lng="41.0839889587" lat="49.1230700892"/><point lng="41.0845428473" lat="49.1241003797"/></line><line id_line="2" colour="null" width="2" diameter="110" contract="wws2" contractor="sade compagnie generale de travaux d'hydraulique" projectid="nwssp-2" complated="0" rayon="siyazan" type="dl" coordinats="49.1154421711,41.0761833833;49.1165550376,41.0749755563;49.1175163898,41.0740599835;49.1180954926,41.0734165180;49.1185257918,41.0727815949;49.1186139922,41.0726310877;49.1182901054,41.0724703018"><point lng="41.0761833833" lat="49.1154421711"/><point lng="41.0749755563" lat="49.1165550376"/><point lng="41.0740599835" lat="49.1175163898"/><point lng="41.0734165180" lat="49.1180954926"/><point lng="41.0727815949" lat="49.1185257918"/><point lng="41.0726310877" lat="49.1186139922"/><point lng="41.0724703018" lat="49.1182901054"/></line><line id_line="3" colour="null" width="2" diameter="110" contract="wws2" contractor="sade compagnie generale de travaux d'hydraulique" projectid="nwssp-2" complated="0" rayon="siyazan" type="dl" coordinats="49.1094929100,41.0733611765;49.1099543208,41.0733355826;49.1104145028,41.0733449452"><point lng="41.0733611765" lat="49.1094929100"/><point lng="41.0733355826" lat="49.1099543208"/><point lng="41.0733449452" lat="49.1104145028"/></line><line id_line="4" colour="null" width="2" diameter="110" contract="wws2" contractor="sade compagnie generale de travaux d'hydraulique" projectid="nwssp-2" complated="0" rayon="siyazan" type="dl" coordinats="49.1102213081,41.0792663250;49.1096951515,41.0788617355;49.1095352693,41.0787634195;49.1093125815,41.0786383847"><point lng="41.0792663250" lat="49.1102213081"/><point lng="41.0788617355" lat="49.1096951515"/><point lng="41.0787634195" lat="49.1095352693"/><point lng="41.0786383847" lat="49.1093125815"/></line><line id_line="5" colour="null" width="2" diameter="110" contract="wws2" contractor="sade compagnie generale de travaux d'hydraulique" projectid="nwssp-2" complated="0" rayon="siyazan" type="dl" coordinats="49.1087112084,41.0777986205;49.1090009844,41.0779000181;49.1091705193,41.0779693910;49.1097055392,41.0782304164"><point lng="41.0777986205" lat="49.1087112084"/><point lng="41.0779000181" lat="49.1090009844"/><point lng="41.0779693910" lat="49.1091705193"/><point lng="41.0782304164" lat="49.1097055392"/></line><line id_line="6" colour="null" width="2" diameter="110" contract="wws2" contractor="sade compagnie generale de travaux d'hydraulique" projectid="nwssp-2" complated="0" rayon="siyazan" type="dl" coordinats="49.1110047809,41.0815780616;49.1110894030,41.0814954941;49.1111775916,41.0814095421;49.1114574103,41.0811056406;49.1117100334,41.0808386785;49.1119646593,41.0806189159;49.1121959306,41.0803810984;49.1123847807,41.0802126892;49.1125497290,41.0800566494;49.1126203282,41.0800033545"><point lng="41.0815780616" lat="49.1110047809"/><point lng="41.0814954941" lat="49.1110894030"/><point lng="41.0814095421" lat="49.1111775916"/><point lng="41.0811056406" lat="49.1114574103"/><point lng="41.0808386785" lat="49.1117100334"/><point lng="41.0806189159" lat="49.1119646593"/><point lng="41.0803810984" lat="49.1121959306"/><point lng="41.0802126892" lat="49.1123847807"/><point lng="41.0800566494" lat="49.1125497290"/><point lng="41.0800033545" lat="49.1126203282"/></line>
to toggle polyline:
yourpolyline.setmap(yourmap); yourpolyline.setmap(null);
Comments
Post a Comment