title: Show/hide all figures drawing in drawingManager
body: <p>My project is related with gps and tracking system. I draw geofences on google maps api v3 with drawingManager. And i need a button, clicking on which it will be show/hide all drawingManager figures. In my project i also use angularJS. I have 2 different directives. In 1-st i declare drawingManager</p>
  
  <pre><code>var polyOption = {
      fillColor: '#ffff00',
      fillOpacity: 0.4,
      strokeWeight: 1,
      clickable: true,
      editable: true,
      zIndex: 1
  };
  drawingManager = new google.maps.drawing.DrawingManager({
      drawingControl: true,
      drawingControlOptions: {
          position: google.maps.ControlPosition.BOTTOM_CENTER,
              drawingModes: [
                google.maps.drawing.OverlayType.MARKER,
                google.maps.drawing.OverlayType.CIRCLE,
                google.maps.drawing.OverlayType.POLYGON,
                google.maps.drawing.OverlayType.POLYLINE,
                google.maps.drawing.OverlayType.RECTANGLE
              ]
       },
       circleOptions: polyOption,
       rectangleOptions: polyOption,
       polygonOptions: polyOption,
       polylineOptions: polyOption,
  });
  scope.geozonesConfig.tempDrawManagerVar = true;
  scope.geozonesConfig.tempDrawManagerHide = false;
  drawingManager.setMap(map);
  
  
  google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
      if (e.type != google.maps.drawing.OverlayType.MARKER) {
          // Switch back to non-drawing mode after drawing a shape.      
          drawingManager.setDrawingMode(null);
          // To hide:              
          // Add an event listener that selects the newly-drawn shape when the user
          // mouses down on it.
          var newShape = e.overlay;                      
          newShape.type = e.type;
          google.maps.event.addListener(newShape, 'click', function() {
            setSelection(newShape);
            scope.$apply (function () {
              scope.geozonesConfig.showGeozoneConfig = true;
            });
          });
      setSelection(newShape);
  });
  google.maps.event.addListener(drawingManager, 'drawingmode_changed', clearSelection);
  google.maps.event.addListener(map, 'click', clearSelection);
  google.maps.event.addDomListener(document.getElementById('delete-button'), 'click', deleteSelectedShape);
  buildColorPalette();
  </code></pre>
  
  <p>there is my button. i used ng-click: </p>
  
  <pre><code> &lt;a href="javascript:void(0)" title="{{ 'Add geozone' | translate }}" ng-click="onGeozoneClick()"&gt;&lt;i class="icon-globe"&gt;&lt;/i&gt;&lt;/a&gt;
  </code></pre>
  
  <p>`and my function is located into another directive:</p>
  
  <pre><code> scope.onGeozoneClick = function () {
              alert('Show/Hide all figures');
   };
  </code></pre>
  
  <p>How can i show/hide these drawingManager figures? Thanks.</p>
  
  <p><strong>EDIT:</strong> Update from OP's reply as an Answer</p>
  
  <p>How can i do it in js? I dont know how to refer to my figures. And there is no any method in google maps api for these figures, as i know. Now i tried to do it using visible property of figuresOptions:
  <code>var anchorShowHideFigure = true; var polyOption = {visible = anchorShowHideFigure };</code>
   and then i want change flag to false after click on button. If i will write in my 1-st directive: 
  <code>function showHideDrawingFigures () { anchorShowHideFigure = false; };</code>
   in console i get: "showHideDrawingFigures is not definied". if i will write it into 2-nd directive i get: "anchorShowHideFigure is not definied" i get this, because my html file use 2-nd directive. sorry if i explained intricately – </p>