Drawing google map

Question

LAST CODE - http://jsfiddle.net/YsQdh/88/ -

THIS VERSION USES gDouglasPeuker to create a rough polygon shape from an elongated version - http://jsfiddle.net/YsQdh/94/

^ This disables the map for drawing and turns it back on after creating a shape.

I am working on a Google Maps application. Unlike polygon point and click. I want to be able to draw a shape, which is then converted to a polygon.

Here is my last application - http://jsfiddle.net/Cbk9J/168/

I found the following code, but I'm not sure how to include it in the example. I have not found any documentation for free drawing, and I'm not sure if these features exist in the Google Map Drawing Manager.

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() ]]; }) ]; }); } } } 

Answer 1

 function drawFreeHand() { //the polygon poly=new google.maps.Polyline({map:map,clickable:false}); //move-listener var move=google.maps.event.addListener(map,'mousemove',function(e){ poly.getPath().push(e.latLng); }); //mouseup-listener google.maps.event.addListenerOnce(map,'mouseup',function(e){ google.maps.event.removeListener(move); var path=poly.getPath(); poly.setMap(null); poly=new google.maps.Polygon({map:map,path:path}); google.maps.event.clearListeners(map.getDiv(), 'mousedown'); enable() }); } function disable(){ map.setOptions({ draggable: false, zoomControl: false, scrollwheel: false, disableDoubleClickZoom: false }); } function enable(){ map.setOptions({ draggable: true, zoomControl: true, scrollwheel: true, disableDoubleClickZoom: true }); } function initialize() { var mapOptions = { zoom: 14, center: new google.maps.LatLng(52.5498783, 13.425209099999961), mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); //draw $("#drawpoly a").click(function(e) { e.preventDefault(); disable() google.maps.event.addDomListener(map.getDiv(),'mousedown',function(e){ drawFreeHand() }); }); } google.maps.event.addDomListener(window, 'load', initialize); 

 html,body{height:100%;margin:0} #map_canvas{height:500px; width:100%;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry,places&ext=.js"></script> <div id="drawpoly"><a href="#">Click Here To Draw On Map</a></div> <div id="map_canvas"></div> 

Answer 2

The final answer is http://jsfiddle.net/YsQdh/94/

It contains the gDouglasPeuker algorithm

 var theArrayofLatLng = path.j; var ArrayforPolygontoUse= GDouglasPeucker(theArrayofLatLng,50); console.log("ArrayforPolygontoUse", ArrayforPolygontoUse); var polyOptions = { map: map, fillColor: '#0099FF', fillOpacity: 0.7, strokeColor: '#AA2143', strokeWeight: 2, clickable: false, zIndex: 1, path:ArrayforPolygontoUse, editable: false }