title: Hide Google Maps Marker
body: <p>I can hide or show google maps markers with checkbox. But i want disable loading markers when webpage opening. more two days i working over this but not working. 
  How can i do it.?</p>
  
  <p>p.s. Sorry for my English.</p>
  
  <p>My code:</p>
  
  <pre><code>&lt;form action="#"&gt;
                    &lt;li&gt; &lt;input type="checkbox" id="intakebox" onclick="boxclick(this,'intake')" checked="checked"/&gt; &lt;label&gt;Intake&lt;/label&gt;&lt;/li&gt;
  
                  &lt;li&gt;&lt;input type="checkbox" id="reservoirbox" onclick="boxclick(this,'reservoir')"checked="checked"/&gt; &lt;label&gt;Reservoirs&lt;/label&gt;&lt;/li&gt;
  
                 &lt;li&gt; &lt;input type="checkbox" id="wspsbox" onclick="boxclick(this,'wsps')"checked="checked"/&gt; &lt;label&gt;WSPS&lt;/label&gt;&lt;/li&gt;
  
                 &lt;li&gt; &lt;input type="checkbox" id="wtpbox" onclick="boxclick(this,'wtp')"checked="checked"/&gt; &lt;label&gt; WTP&lt;/label&gt;&lt;/li&gt;
  
                &lt;li&gt;&lt;input type="checkbox" id="wwpsbox" onclick="boxclick(this,'wwps')"checked="checked"/&gt; &lt;label&gt;WWPS&lt;/label&gt;&lt;/li&gt;
  
                 &lt;li&gt;&lt;input type="checkbox" id="wwtpbox" onclick="boxclick(this,'wwtp')" /&gt; &lt;label&gt;WWTP&lt;/label&gt;&lt;/li&gt;
  &lt;/form&gt; 
  </code></pre>
  
  <p>Js side:</p>
  
  <pre><code>var myCoordsLenght = 6;
        var gmarkers = [];
       function show(category) {
          for (var i=0; i&lt;gmarkers.length; i++) {
            if (gmarkers[i].mycategory == category) {
              gmarkers[i].setVisible(true);
            }
          }
           document.getElementById(category+"box").checked = true;
        }
  
          function hide(category) {
          for (var i=0; i&lt;gmarkers.length; i++) {
            if (gmarkers[i].mycategory == category) {
              gmarkers[i].setVisible(false);
            }
          }
           document.getElementById(category+"box").checked = false;
           infowindow.close();
        }
  
         function boxclick(box,category) {
          if (box.checked) {
            show(category);
          } else {
            hide(category);
          }
  
        }
      var customIcons = {
        reservoir: {
          icon: 'http://nn-gis.com/new1/js/ico/reservoir.png',
          shadow: ''
        },
        intake: {
          icon: 'http://nn-gis.com/new1/js/ico/intake.png',
          shadow: ''
        },
          wsps: {
          icon: 'http://nn-gis.com/new1/js/ico/wsps.png',
          shadow: ''
        },
          wtp: {
          icon: 'http://nn-gis.com/new1/js/ico/wtp.png',
          shadow: ''
        },
          wwtp: {
          icon: 'http://nn-gis.com/new1/js/ico/wwtp.png',
          shadow: ''
        },
          wwps: {
          icon: 'http://nn-gis.com/new1/js/ico/wwps.png',
          shadow: ''
        }
      };
  
     function bindInfoWindow(marker, map, infoWindow, html, category) {
        google.maps.event.addListener(marker, 'click', function() {
  
         infoWindow.setContent(html);
          infoWindow.open(map, marker);
  
        });
      }
  
      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("gxml.php", function(doc) {
       var xmlDoc = xmlParse(doc);
  
          var markers = xmlDoc.documentElement.getElementsByTagName("marker");
          for (var i = 0; i &lt; markers.length; i++) {
  
  
  
  
  
  var type = markers[i].getAttribute("type");
  
  
  if(type=='intake'){
              type2='&lt;p align="center"&gt;&lt;b&gt;Intake&lt;/b&gt;&lt;/p&gt; ';}
  else {type2 = "";}
  
  
       if(type=='wwtp'){
              type2='&lt;p align="center"&gt;&lt;b&gt;Wastewater treatment plant&lt;/b&gt;&lt;/p&gt;  ';}
  else {type2 = "";}
  
                          if(type=='wtp'){
              type2='&lt;p align="center"&gt;&lt;b&gt;Water Treatment Plant&lt;/b&gt;&lt;/p&gt; ';}
  else {type2 =="";}
  
                          if(type=='reservoir'){
              type2= '&lt;p align="center"&gt;&lt;b&gt;Reservoir&lt;/b&gt;&lt;/p&gt; ';}
  else {type2 == "";}
                          if(type=='wsps'){
              type2= '&lt;p align="center"&gt;&lt;b&gt;Water supply pump station&lt;/b&gt;&lt;/p&gt;';}
  else {type2 == "";}                     if(type=='wwps'){
              type2= '&lt;p align="center"&gt;&lt;b&gt;Wastewater pump station&lt;/b&gt;&lt;/p&gt;';}
  else {type2 == "";}
  
  
   /**********************  ***************************************/ 
            var oid = markers[i].getAttribute("contract");
   if (oid) {oid1 = "  &lt;b&gt; Contract:&lt;/b&gt; " + oid + "&lt;br/&gt; ";
  } else { oid1 = "";}
  
   /**********************  ***************************************/ 
            var cr = markers[i].getAttribute("contractor");
   if (cr) {cr1 = "  " + cr + "&lt;br/&gt; ";
  } else { cr1 = "None";}
  /**********************  ***************************************/
            var status = markers[i].getAttribute("status");
             if (status) {
      status1 = "&lt;b&gt; Status:&lt;/b&gt; " + status + "&lt;br/&gt;";
  } else  { status1 = "";}
  /**********************  ***************************************/         
            var title = markers[i].getAttribute("projectid");
             if (title) {
      title1 = "&lt;b&gt; Project ID:&lt;/b&gt; " + title + "&lt;br/&gt;";
  } else 
  { title1 = "";}
  /**********************  ***************************************/
             var name = markers[i].getAttribute("name");
             if (name) {
      name1 = "&lt;b&gt; Source:&lt;/b&gt; " + name + "&lt;br/&gt;";
  } else 
  { name1 = "";}
  /**********************  ***************************************/
        var volume = markers[i].getAttribute("volume");
             if (volume) {
      volume1 = "&lt;b&gt; Volume:&lt;/b&gt; " + volume + "&lt;br/&gt;";
  } else {volume1 = "";}
  /**********************  ***************************************/
        var flow = markers[i].getAttribute("FLOW_m3_d");
             if (flow) {
      flow1 = "&lt;b&gt; FLOW_m3_d:&lt;/b&gt; " + flow + "&lt;br/&gt;";
  } else {flow1 = "";}
  /**********************  ***************************************/
        var pe = markers[i].getAttribute("pe");
             if (pe) {
      pe1 = "&lt;b&gt; PE:&lt;/b&gt; " + pe + "&lt;br/&gt;";
  } else {pe1 = "";}
  
  /**********************  ***************************************/
        var dis = markers[i].getAttribute("dis");
             if (dis) {
      dis1 = "&lt;b&gt; Discharge:&lt;/b&gt; " + dis + "&lt;br/&gt;";
  } else {dis1 = "";}
  /**********************  ***************************************/
    var qde = markers[i].getAttribute("qde");
             if (qde) {
      qde1 = "&lt;b&gt; Qdes_L_S:&lt;/b&gt; " + qde + "&lt;br/&gt;";
  } else {qde1 = "";}
  /**********************  ***************************************/
    var qav = markers[i].getAttribute("qav");
             if (qav) {
      qav1 = "&lt;b&gt; Qave_L_S:&lt;/b&gt; " + qav + "&lt;br/&gt;";
  } else {qav1 = "";}
  /**********************  ***************************************/
    var dut = markers[i].getAttribute("dut");
             if (dut) {
      dut1 = "&lt;b&gt; Duty Pumps:&lt;/b&gt; " + dut + "&lt;br/&gt;";
  } else {dut1 = "";}
  /**********************  ***************************************/
   var kwh = markers[i].getAttribute("kwh");
             if (kwh) {
      kwh1 = "&lt;b&gt; KWh:&lt;/b&gt; " + kwh + "&lt;br/&gt;&lt;hr&gt;";
  } else { kwh1 = "&lt;hr&gt;";}
  /**********************  ***************************************/
    var puser = markers[i].getAttribute("puser");
    if (puser) {
      puser1 = "Last changed by  &lt;b&gt;" + puser + "&lt;/b&gt;&lt;br/&gt;";
  } else {  puser1 = "";}
  /**********************  ***************************************/
            var ucomp = markers[i].getAttribute("ucomplate");
             if (ucomp) {
      ucomp1 = "Completed: &lt;b&gt; &lt;big&gt;" + ucomp + "&lt;/big&gt;&lt;/b&gt; ";
  } else { ucomp1 = "";}
  /**********************  ***************************************/
            var udate = markers[i].getAttribute("udate");
             if (udate) {
      udate1 = " [ " + udate + "]&lt;br/&gt;";
  } else {  udate1 = "";}
  /**********************  ***************************************/
            var suser = markers[i].getAttribute("suser");
             if (suser) 
  {  suser1 = "&lt;hr&gt;Last changed by   &lt;b&gt;" + suser + "&lt;/b&gt;&lt;br/&gt;";
  } else {suser1 = "";}
  /**********************  ***************************************/
      var scomp = markers[i].getAttribute("scomplate");
      if (scomp) {
      scomp1 = "Completed: &lt;b&gt; &lt;big&gt;" + scomp+ "&lt;/big&gt;&lt;/b&gt; ";
  } else { scomp1="";   }
  
  /**********************  ***************************************/     
    var sdate = markers[i].getAttribute("sdate");  
       if (sdate) {
      sdate1 = " [" + sdate + "]&lt;br/&gt;&lt;hr&gt;";
  } else { sdate1="";} 
  /**********************  ***************************************/
             var capacity = markers[i].getAttribute("capacity");
             if (capacity) {
      capacity1 = "&lt;b&gt; Capacity:&lt;/b&gt; " + capacity + "&lt;br/&gt;";
  } else 
  { capacity1 = "";}
  
  /**********************  ***************************************/
               var category  = markers[i].getAttribute("type");
              var id  = markers[i].getAttribute("id");
            var point = new google.maps.LatLng(
                parseFloat(markers[i].getAttribute("lat")),
                parseFloat(markers[i].getAttribute("lng")));
  
  function ShowMsg(textVal)
  {
  document.getElementById("msgid").innerHTML=textVal
  }
  function ClearMsg()
  {
  document.getElementById("msgid").innerHTML=""
  }             
  
  
            var html ="" + type2 +  ' &lt;a class=info href="#"&gt;&lt;b&gt;Contractor&lt;/b&gt;&lt;span&gt;' + cr1 +'&lt;/span&gt;&lt;/a&gt; &lt;br/&gt; ' + oid1  + title1   + status1 + name1 + volume1 + capacity1 + flow1 + pe1 + qde1 + qav1 + dut1 + dis1 +  kwh1   + puser1  + ucomp1+  udate1 + suser1 +  scomp1 + sdate1 + "&lt;br/&gt;  &lt;a class=\"inline-link-1\" HREF=\"javascript:void(0)\"onclick=\"window.open('cdata.php?title="+ title +"&amp;amp;type="+ category +"&amp;amp;id="+ id +"','cdata','height=300, width=460,scrollbars=no')\"&gt;* Add/Change Data&lt;/a&gt;    &lt;a class=\"inline-link-1\" HREF=\"javascript:void(0)\"onclick=\"window.open('photo/index.php?id="+ id +"&amp;amp;type="+ category +"','cdata','height=600, width=800,scrollbars=no')\"&gt;Photo&lt;/a&gt; &lt;a class=\"inline-link-1\" HREF=\"javascript:void(0)\"onclick=\"window.open('pedit.php?id="+ id +"','cdata','height=300, width=460,scrollbars=no')\"&gt;Edit&lt;/a&gt;"; 
  
         var icon = customIcons[category] || {};
            var marker = new google.maps.Marker({
              map: map,
              position: point,
              icon: icon.icon,
              shadow: icon.shadow
            });
  
          marker.mycategory = category;                                 
          marker.myname = name;
          gmarkers.push(marker);
  
             bindInfoWindow(marker, map, infoWindow, html);
          }
        });
  
  
  
      google.maps.event.addListener(map, 'mousemove', function(evt){
      document.getElementById('lat').value = (evt.latLng.lat().toFixed(myCoordsLenght)+" lat");
      document.getElementById('long').value = (evt.latLng.lng().toFixed(myCoordsLenght)+" long");
  });
  
  }   
  
  /**********************  ***************************************/
  
  
  
  /***************************************************************/
  
          show("intake");
          show("reservoir");
          show("wsps");
          show("wtp");
          show("wwps");
          hide("wwtp");
  </code></pre>