Get Array of All Polygon Points - Google Maps API-3 Drawing Tool
I am using google drawing tools to draw polygon / rectangle on google maps, now i need to show markers that fall inside the drawn polygon and for that i use geometry.poly.containsLocation method which takes a point (latLng) and polygon point array. if i use maps.polygon i can get polygon points via poly.getPath () but because i use Google Drawing Tools which uses maps.drawing. DrawingManager / google.maps.drawing.OverlayType.POLYGON so not sure how to find the points here. thank
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)
+3
source to share
3 answers
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>";
}
});
snippet of code:
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"></script>
<div id="map_canvas" style=" border: 2px solid #3872ac;"></div>
<div id="info"></div>
+11
source to share
A slightly different solution than geocodezip suggests , 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);
});
+1
source to share