title: Google Map Drawing freehand
body: <p><img src="https://i.stack.imgur.com/4Az4l.jpg" alt="enter image description here"></p>
  
  <p>LATEST CODE - <a href="http://jsfiddle.net/YsQdh/88/" rel="noreferrer">http://jsfiddle.net/YsQdh/88/</a> -</p>
  
  <p>THIS VERSION USES gDouglasPeuker to create a rudamentary polygon shape from the drawn version - <a href="http://jsfiddle.net/YsQdh/94/" rel="noreferrer">http://jsfiddle.net/YsQdh/94/</a></p>
  
  <p>^ this disables the map for drawing, and enables it again after creating the shape.</p>
  
  <p>I am working on a google map application. As opposed to a polygon point and click exercise. I want to be able to draw a shape - that is then converted into a polygon.</p>
  
  <p>Here is my latest application - <a href="http://jsfiddle.net/Cbk9J/168/" rel="noreferrer">http://jsfiddle.net/Cbk9J/168/</a></p>
  
  <p>I have found the following code - but I am unsure how to incorporate this into the example. I have not found any documentation to free hand drawing and I am unsure if these functions exist in the google maps drawing manager.</p>
  
  <pre><code>    var completeFreehand = function (changed) {
          if (changed) {
              isUserPolygon = true;
              updateLocation();
          }
  
          unhighlightControls();
          showMessages();
          updateListingResults();
      };
  
      var completeDelete = function() {
          map.endDeleteSearchArea();
          unhighlightControls();
          showMessages();
      };
  
      var cancelDelete = function() {
          if (map.isDeletingSearchArea()) {
              completeDelete();
              updateListingResults();
              enableControls();
          }
          return false;
      };
  
      var cancelFreehand = function () {
          if (map.isDrawingFreehand()) {
              map.cancelFreehand();
              completeFreehand();
              enableControls();
          }
      };
  
      var clearMap = function (silent) {
          map.clearSearchArea(silent);
          mostRecentPinCount = 0;
          enableControls();
          map.clearMarkers(true);
  
          return false;
      };
  
      var drawFreehand = function (element) {
  
          if (map.isDrawingFreehand()) {
  
              cancelFreehand();
              return;
  
          } else if (map.isDeletingSearchArea()) {
  
              completeDelete();
  
          }
  
          disableControls(true);
          highlightControl(element);
          hideMessages();
  
          if ( $(element).hasClass('js-maps-btn-add') ) {
              $('.js-maps-status-message-draw').removeClass('is-hidden');
          } else {
              $('.js-maps-status-message-new').removeClass('is-hidden');
          }
  
          map.clearMarkers();
          map.drawFreehand(completeFreehand);
          updateBasePolygon();
  
          return false;
      };
  
  
  
  
  function updateBasePolygon () {
      if (typeof(basePolygon) == 'undefined') {
          var polys = map.getPolygons();
          if (polys.length) {
              basePolygon = $.map(polys, function (val, i) {
                  var a = val.getPath().getArray();
                  return [
                      $.map(a, function (val, i) {
                          return [[ val.lat(), val.lng() ]];
                      })
                  ];
              });
          }
      }
  }
  </code></pre>