Free form on Google maps

Question

I use the Google Maps API V3 to draw a free graphic drawing of the polygon on Google Maps, unlike the standard point-to-click polygon that comes with the standard library. Everything works great.

Problem: Polygons generate many editable points.

How can I simplify polygons and create editable points when necessary?

here is 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.net/kevdiho/yKHs4/

Answer 1

Here is what I use: http://jsfiddle.net/uF62D/1/

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

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