Google map api v3 - how to limit the number of polygonal lines and force closure with 5 clicks?

Question

I have this code

<script>
    function initialize() {
        var mapOptions = {
            center: new google.maps.LatLng(-34.397, 150.644),
            zoom: 8
        };

        var map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);

        var drawingManager = new google.maps.drawing.DrawingManager({
            drawingMode: google.maps.drawing.OverlayType.MARKER,
            drawingControl: true,
            drawingControlOptions: {
                position: google.maps.ControlPosition.TOP_CENTER,
                drawingModes: [
                    google.maps.drawing.OverlayType.POLYGON
                ]
            },
            polygonOptions: {
                draggable: true,
                editable: true,
                strokeColor: "#000",
                strokeWeight: "2"
            }
        });
        drawingManager.setMap(map);

    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>

And I'm trying to limit the number of polygonal lines to 5 and with 5 clicks to force close the polygon shape.

I could not find any direction to solve this problem. If you have any link to a good resource or ideas on how to do this - it will be good!

Answer 1

One option: do not use the DrawingManager . Gather the polygon and watch for added markers.

var poly;
var map;

function initialize() {
  var polyOptions = {
      strokeColor: '#000000',
      strokeOpacity: 1.0,
      strokeWeight: 3, map: map
    };
  poly = new google.maps.Polygon(polyOptions);
  var bounds = new google.maps.LatLngBounds();
  map = new google.maps.Map(document.getElementById('map_canvas'), {
    center: new google.maps.LatLng(10.9386, -84.888),
    zoom: 10,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  var evtListnr = google.maps.event.addListener(map,"click",function(evt) {
    bounds.extend(evt.latLng);
    addLatLng(evt);
    if (poly.getPath().getLength() == 5) {
      google.maps.event.removeListener(evtListnr);
    }
  });    

  poly.binder = new MVCArrayBinder(poly.getPath());

  poly.setMap(map);
} 

proof of concept