title: How to draw rectangle by outside custom button event handler
body: <p>I am trying to draw a rectangle by using a Custom Dom Element like </p>
  
  <pre><code>&lt;button id="rect"&gt;Draw&lt;/button&gt;
  </code></pre>
  
  <p>and here is the script which I am using</p>
  
  <pre><code>var drawingStyle = {
                      strokeWeight: 0,
                      fillOpacity: 0.45,
                      editable: true,
                      draggable: true,
                     }; 
  
   google.maps.event.addListener(rect, 'click', function() {
       var drawingManager = new google.maps.drawing.DrawingManager({
       drawingControlOptions: {
              drawingModes: [ google.maps.drawing.OverlayType.RECTANGLE]
          },
          rectangleOptions: drawingStyle,
          map: map
      });
      drawingManager.setMap(map);
    }); 
  </code></pre>
  
  <p>but clicking on the <code>#rect</code> is not causing any event! not even any error on the console. What am I doing wrong?</p>