I am using Google Maps API V3 to do some free form drawing of a polygon in Google Maps, as opposed to the standard point-per-click polygon that es with the standard library. Everything works great.

Problem: Polygons generates lot of editable points.

How can I simplify the polygons and create editable point when its needed?

here my code:

var latlng = new google.maps.LatLng(46.779231, 6.659431);

        var options = {
            center: latlng,
            zoom: 19,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            draggable:false
        };


        var map = new google.maps.Map(document.getElementById("map"), options);

        var markers = [];

        var isDrawing = false;
        var overlay = new google.maps.OverlayView();
        overlay.draw = function () {};
        overlay.setMap(map);
        var polyLine;
        var parcelleHeig = Array();
        google.maps.event.addListener(map, 'mousedown', function () {
                isDrawing=true;
                polyLine = new google.maps.Polyline({
                    map: map
                });
                $("#map").mousemove(function (e) {
                    if(isDrawing == true)
                    {
                        var pageX = e.pageX;
                        var pageY = e.pageY;
                        var point = new google.maps.Point(parseInt(pageX), parseInt(pageY));

                        var latLng = overlay.getProjection().fromDivPixelToLatLng(point);

                        polyLine.getPath().push(latLng);

                        latLng = String(latLng);
                        latLng=latLng.replace("(","");
                        latLng=latLng.replace(")","");

                        var array_lng =  latLng.split(',');
                        parcelleHeig.push(new google.maps.LatLng(array_lng[0],array_lng[1])) ;
                    }
                });
        });
        google.maps.event.addListener(map, 'mouseup', function () {

            isDrawing=false;
            //console.log(parcelleHeig);

            var polygoneParcelleHeig = new google.maps.Polygon({
                paths: parcelleHeig,
                strokeColor: "#0FF000",
                strokeOpacity: 0.8,
                strokeWeight: 2,
                fillColor: "#0FF000",
                fillOpacity: 0.35,
                editable:true,
                geodesic: false

            });

            parcelleHeig=Array();
            polygoneParcelleHeig.setMap(map);
            polyLine.setMap(null);
        });

/

I am using Google Maps API V3 to do some free form drawing of a polygon in Google Maps, as opposed to the standard point-per-click polygon that es with the standard library. Everything works great.

Problem: Polygons generates lot of editable points.

How can I simplify the polygons and create editable point when its needed?

here my code:

var latlng = new google.maps.LatLng(46.779231, 6.659431);

        var options = {
            center: latlng,
            zoom: 19,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            draggable:false
        };


        var map = new google.maps.Map(document.getElementById("map"), options);

        var markers = [];

        var isDrawing = false;
        var overlay = new google.maps.OverlayView();
        overlay.draw = function () {};
        overlay.setMap(map);
        var polyLine;
        var parcelleHeig = Array();
        google.maps.event.addListener(map, 'mousedown', function () {
                isDrawing=true;
                polyLine = new google.maps.Polyline({
                    map: map
                });
                $("#map").mousemove(function (e) {
                    if(isDrawing == true)
                    {
                        var pageX = e.pageX;
                        var pageY = e.pageY;
                        var point = new google.maps.Point(parseInt(pageX), parseInt(pageY));

                        var latLng = overlay.getProjection().fromDivPixelToLatLng(point);

                        polyLine.getPath().push(latLng);

                        latLng = String(latLng);
                        latLng=latLng.replace("(","");
                        latLng=latLng.replace(")","");

                        var array_lng =  latLng.split(',');
                        parcelleHeig.push(new google.maps.LatLng(array_lng[0],array_lng[1])) ;
                    }
                });
        });
        google.maps.event.addListener(map, 'mouseup', function () {

            isDrawing=false;
            //console.log(parcelleHeig);

            var polygoneParcelleHeig = new google.maps.Polygon({
                paths: parcelleHeig,
                strokeColor: "#0FF000",
                strokeOpacity: 0.8,
                strokeWeight: 2,
                fillColor: "#0FF000",
                fillOpacity: 0.35,
                editable:true,
                geodesic: false

            });

            parcelleHeig=Array();
            polygoneParcelleHeig.setMap(map);
            polyLine.setMap(null);
        });

http://jsfiddle/kevdiho/yKHs4/

• javascript
• google-maps
• google-maps-api-3
• polygon
• polyline

1 Answer 1

Here is what I am using : http://jsfiddle/uF62D/1/

You can change the value of the variable douglasPeuckerThreshold to change the level of simplification on the algorithm.

Note: This is a version I created from the code found at this URL https://gist.github./adammiller/826148 (updated to get the same "visual" level of simplification at different zoom levels)