Get Array of all points of Polygon - Google Maps Drawing Tool API-3
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>A slightly different solution than what geocodezip proposes, but using the same API calls:
google.maps.event.addListener(drawingManager, 'polygoncomplete', function (polygon) {
var path = polygon.getPath()
var coordinates = [];
for (var i = 0 ; i < path.length ; i++) {
coordinates.push({
lat: path.getAt(i).lat(),
lng: path.getAt(i).lng()
});
}
console.log(coordinates);
});