CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
David
David

Reputation: 1511

google map api v3 - how to limit number of polygon lines and force closure at the 5 click?

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 am trying to limit the number of polygon lines to 5 and by the 5 click to force closure of the polygon shape.

I was unable to find any direction to solve this problem.. if u have any link to good resource or ideas how to - that would be good!

Upvotes: 1

Views: 1794

Answers (1)

geocodezip
geocodezip

Reputation: 161334

One option: don't use the DrawingManager. Build the polygon yourself and keep track of the markers added.

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

Upvotes: 3

Related Questions