title: Allow User to Draw Rectangle on Google Maps
body: <p>I am trying to let the user draw a rectangle on Google Maps by clicking on a button and then adding the rectangle to the map that they can then resize/drag. As far as I know, Google's API doesn't allow us to let the user click and drag the mouse cursor across the map to draw the rectangle, so I think we have to use initial/starting bounds?</p>
  
  <p>I am getting an error (see my JSFiddle <a href="http://jsfiddle.net/58ZuT/" rel="noreferrer">here</a>) when I click on the event handler responsible for drawing the rectangle:</p>
  
  <pre><code>rectangle.setMap(map);
  google.maps.event.addListener(map, 'click', function() {
      addRecPath();
  });
  </code></pre>
  
  <p>I've been trying to create how to let the users draw a rectangle based on the tutorials provided by Google <a href="https://developers.google.com/maps/documentation/javascript/examples/polyline-complex" rel="noreferrer">here (polylines)</a> and <a href="https://developers.google.com/maps/documentation/javascript/examples/user-editable-shapes" rel="noreferrer">here (user-editable shapes)</a>.</p>
  
  <p>Where am I going wrong? It seems like the problem is the event handler. Can (or should) this rectangle be pushed inside an array?</p>