How do I extract data from Drawing Manager in react google maps? - reactjs

Question

Hi I am making an app which uses google maps to select some location.
I am using Drawing Manager of google map to draw a polygon.
Now I want to get the coordinates of the polygon.
Is there any way to do it?
Here is the code:
<DrawingManager
defaultDrawingMode={window.google.maps.drawing.OverlayType.POLYGON}
defaultOptions={{
drawingControl: true,
drawingControlOptions: {
position: window.google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
window.google.maps.drawing.OverlayType.MARKER,
window.google.maps.drawing.OverlayType.POLYGON,
],
},
polygonOptions: { editable: true },
}}
/>

Answer 1

You can add a listener to the drawing manager for the "polygoncomplete" event then you can use the getPath() method to get the coordinates. If you are using a reactjs library for google maps, you can check how that library is using the polygoncomplete event.
Here is a snippet where I put all the points from the polygon.getpath().getArray() to the array and log it in the console in a simple code:
const drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.MARKER,
drawingControl: true,
drawingControlOptions: {
position: window.google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
window.google.maps.drawing.OverlayType.MARKER,
window.google.maps.drawing.OverlayType.POLYGON
]
},
polygonOptions: { editable: true }
});
drawingManager.setMap(map);
google.maps.event.addListener(
drawingManager,
"polygoncomplete",
function(polygon) {
let polygonCoordsArray = [];
let coords = polygon.getPath().getArray();
for (let i = 0; i < coords.length; i++) {
// console.log(coords[i].lat() + "," + coords[i].lng());
polygonCoordsArray.push(
coords[i].lat() + "," + coords[i].lng()
);
}
console.log(polygonCoordsArray);
}
);

Answer 2

const [LocationList, setLocationList] = useState([]); //define state
//method to store location in state
const onPolygonComplete = (polygon) => {
setLocationList(
polygon
.getPath()
.getArray()
.map((point) => ({
lat: point.lat(),
lng: point.lng(),
}))
)}
// define component
<DrawingManager
onPolygonComplete={onPolygonComplete}//link method
/>