Google Map Drawing freehand

Question

enter image description here

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

THIS VERSION USES gDouglasPeuker to create a rudamentary polygon shape from the drawn version - http://jsfiddle.net/YsQdh/94/

^ this disables the map for drawing, and enables it again after creating the shape.

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.

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

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.

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

Your example appears to work to me in that you have freehand polygon drawing. I'm not sure I understand what else you need. — John Powell, Mar 31 '14 at 10:21
Its not complete as intended - I want to be able to draw freehand - not click the polygon points - draw a shape like paint. Then have it polygonised. — The Old County, Mar 31 '14 at 10:40
http://www.zoopla.co.uk/for-sale/map/property/london/?include_retirement_homes=true&include_shared_ownership=true&new_homes=include&q=london&results_sort=highest_price&search_source=home&pn=1&view_type=map - like this — The Old County, Mar 31 '14 at 10:42
Like this example - but this is using d3.js to draw - http://jsfiddle.net/PDf9G/4/ would like to get a version using just google maps — The Old County, Mar 31 '14 at 10:45
Wait a minute - here is an example to draw a polyline - http://jsfiddle.net/doktormolle/YsQdh/ — The Old County, Mar 31 '14 at 11:43
I've cleaned up the code - so it produces a freehand polygon - but I need to merge it with the latest code sample - ideally need to add the listener when the user clicks draw... then it completes the shape - releases the listener so the user can still pan/zoom on the map - http://jsfiddle.net/YsQdh/72/ — The Old County, Mar 31 '14 at 11:50
well done. I have used Open Layers much more than Google Maps, but you have inspired me. — John Powell, Mar 31 '14 at 14:30
possible duplicate of [Google Maps Draw -- draw line or polygon by dragging](http://stackoverflow.com/questions/19547900/google-maps-draw-draw-line-or-polygon-by-dragging) — geocodezip, Mar 31 '14 at 14:32
improved the listener controls - http://jsfiddle.net/YsQdh/88/ — The Old County, Mar 31 '14 at 14:38
Here is a massive mishmash for the final application - http://jsfiddle.net/Cbk9J/175/ — The Old County, Mar 31 '14 at 14:58
now added the gDouglasPeuker algorithm to simplify the polygon after its drawn http://jsfiddle.net/Cbk9J/188/ — The Old County, Mar 31 '14 at 16:24
http://jsfiddle.net/YsQdh/94/ - latest for this code example — The Old County, Mar 31 '14 at 16:28

score 15 · Answer 1 · answered Apr 28 '16 at 10:45

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>

Thanks dude! Its really saved my life! – eildiz Sep 12 '17 at 07:20 — eildiz, Sep 12 '17 at 07:20
is there a way to support this on mobile devices? – Mike Jan 05 '18 at 16:50 — Mike, Jan 05 '18 at 16:50
Yes use touchstart and touchend events. – Saumya gupta May 14 '19 at 07:22 — Saumya gupta, May 14 '19 at 07:22

score 3 · Answer 2 · answered Apr 02 '14 at 10:07

The latest answer - http://jsfiddle.net/YsQdh/94/

This 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
}

use var theArrayofLatLng = path.getArray(); indtead of var theArrayofLatLng = path.j; — Brian Mutiso, Nov 06 '22 at 05:48

Google Map Drawing freehand

2 Answers2

Linked