Question

-7

Get Array of all points of Polygon - Google Maps Drawing Tool API-3

rated 0 times [ 0] [ 7] / answers: 1 / hits: 30803 / 9 Years ago, fri, june 5, 2015, 12:00:00

i am using Google Drawing tools for drawing polygon/rectangle on google maps, now i need to show markers that falls inside the drawn polygon and for that i am using geometry.poly.containsLocation method which takes a point(latLng) and an array of polygon points. if i use maps.polygon I can get polygon points via poly.getPath() but because i am using Google Drawing tools which uses maps.drawing.DrawingManager/google.maps.drawing.OverlayType.POLYGON so not sure how to find points here. Thanks

  var drawingManager = new google.maps.drawing.DrawingManager({

  drawingMode: google.maps.drawing.OverlayType.POLYGON,

  drawingControl: true,

  drawingControlOptions: {

    position: google.maps.ControlPosition.TOP_CENTER,

    drawingModes: [

      google.maps.drawing.OverlayType.MARKER,

      google.maps.drawing.OverlayType.CIRCLE,

      google.maps.drawing.OverlayType.POLYGON,

      google.maps.drawing.OverlayType.POLYLINE,

      google.maps.drawing.OverlayType.RECTANGLE

    ]

  },

  markerOptions: {

    icon: 'images/car-icon.png'

  },

  circleOptions: {

    fillColor: '#ffff00',

    fillOpacity: 1,

    strokeWeight: 5,

    clickable: false,

    editable: true,

    zIndex: 1

  },

  polygonOptions: {

    fillColor: '#BCDCF9',

    fillOpacity: 0.5,

    strokeWeight: 2,

    strokeColor:'#57ACF9',

    clickable: false,

    editable: false,

    zIndex: 1

  }

});

console.log(drawingManager)

drawingManager.setMap(map)

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

debras

Add To Favorites

Follow

Total Points: 307

Total Questions: 98

Total Answers: 112

Location: Maldives

Member since Tue, Dec 21, 2021

2 Years ago

answered 9 Years ago anyssaarielles · Accepted Answer

google.maps.event.addListener(drawingManager, 'polygoncomplete', function (polygon) {

    // assuming you want the points in a div with id=info

    document.getElementById('info').innerHTML += polygon points: + <br>;

    for (var i = 0; i < polygon.getPath().getLength(); i++) {

        document.getElementById('info').innerHTML += polygon.getPath().getAt(i).toUrlValue(6) + <br>;

    }

});

proof of concept fiddle

code snippet:

var geocoder;

var map;

var polygonArray = [];



function initialize() {

  map = new google.maps.Map(

    document.getElementById(map_canvas), {

      center: new google.maps.LatLng(37.4419, -122.1419),

      zoom: 13,

      mapTypeId: google.maps.MapTypeId.ROADMAP

    });

  var drawingManager = new google.maps.drawing.DrawingManager({

    drawingMode: google.maps.drawing.OverlayType.POLYGON,

    drawingControl: true,

    drawingControlOptions: {

      position: google.maps.ControlPosition.TOP_CENTER,

      drawingModes: [

        google.maps.drawing.OverlayType.MARKER,

        google.maps.drawing.OverlayType.CIRCLE,

        google.maps.drawing.OverlayType.POLYGON,

        google.maps.drawing.OverlayType.POLYLINE,

        google.maps.drawing.OverlayType.RECTANGLE

      ]

    },

    /* not useful on jsfiddle

    markerOptions: {

      icon: 'images/car-icon.png'

    }, */

    circleOptions: {

      fillColor: '#ffff00',

      fillOpacity: 1,

      strokeWeight: 5,

      clickable: false,

      editable: true,

      zIndex: 1

    },

    polygonOptions: {

      fillColor: '#BCDCF9',

      fillOpacity: 0.5,

      strokeWeight: 2,

      strokeColor: '#57ACF9',

      clickable: false,

      editable: false,

      zIndex: 1

    }

  });

  console.log(drawingManager)

  drawingManager.setMap(map)



  google.maps.event.addListener(drawingManager, 'polygoncomplete', function(polygon) {

    document.getElementById('info').innerHTML += polygon points: + <br>;

    for (var i = 0; i < polygon.getPath().getLength(); i++) {

      document.getElementById('info').innerHTML += polygon.getPath().getAt(i).toUrlValue(6) + <br>;

    }

    polygonArray.push(polygon);

  });



}

google.maps.event.addDomListener(window, load, initialize);

html,

body,

#map_canvas {

  height: 500px;

  width: 500px;

  margin: 0px;

  padding: 0px

}

<script src=https://maps.googleapis.com/maps/api/js?libraries=geometry,drawing&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk></script>

<div id=map_canvas style= border: 2px solid #3872ac;></div>

<div id=info></div>