How to dynamically draw a polygon shape on a map in Angular

Question

how to draw a polygon shape dynamically (no predefined paths ) and how to store the long long values ​​of the polygon

I already reference AGMPolygon, but this did not solve my problem

Answer 1

April 26, 2018 Patch

I'm not sure, but it seems that Angular Google Maps already supports polygon drawing. You can check more .

---

Check the working piston:

1. Basic version (only for drawing a polygon) https://stackblitz.com/edit/angular-draw-polygon-google-maps

2. Updated version (draw polygons and check intersections) ( plunker does not work now ) https://embed.plnkr.co/3sNWwX/

AGM is the best library for Angular 2 at the moment, but it still needs to be updated to reflect all the Google Maps APIs. Therefore, it is best to follow the Google Maps document and use it immediately before the Angular community supports it.

https://developers.google.com/maps/documentation/javascript/examples/drawing-tools

Please note that this is a very simple way to draw a polygon and get the coordinate after finishing. You can also move all the code associated with the card to the service.

ngOnInit() { this.map = new google.maps.Map(document.getElementById('map'), { center: { lat: -34.397, lng: 150.644 }, zoom: 8 }); this.drawingManager = new google.maps.drawing.DrawingManager({ drawingMode: google.maps.drawing.OverlayType.POLYGON, drawingControl: true, drawingControlOptions: { position: google.maps.ControlPosition.TOP_CENTER, drawingModes: ['polygon'] } }); this.drawingManager.setMap(this.map); google.maps.event.addListener(this.drawingManager, 'overlaycomplete', (event) => { // Polygon drawn if (event.type === google.maps.drawing.OverlayType.POLYGON) { //this is the coordinate, you can assign it to a variable or pass into another function. alert(event.overlay.getPath().getArray()); } }); } 

Answer 2

like trungk18, this plunker is limited, but the requirement that I need for the polygon is to have options that you can drag and edit. The working plunker for Angular 4 is below https://embed.plnkr.co/9GacxKCoIs1ZWBuLkH91/

 ngOnInit() { var polygon1 = { draggable:true, editable:true, fillColor:"#f00" }; var rect1 = { draggable:true, editable:true, fillColor:"#0f0" }; this.map = new google.maps.Map(document.getElementById('map'), { center: { lat:17.4471, lng: 78.454 }, zoom: 10 }); this.drawingManager = new google.maps.drawing.DrawingManager({ drawingMode: google.maps.drawing.OverlayType.POLYGON, drawingControl: true, polygonOptions:polygon1 rectangleOptions:rect1 drawingControlOptions: { position: google.maps.ControlPosition.TOP_CENTER, drawingModes: [ 'polygon', 'rectangle'] } }); this.drawingManager.setMap(this.map); google.maps.event.addListener(this.drawingManager, 'overlaycomplete', (event) => { // Polygon drawn var poly =event.overlay.getPath().getArray(); alert(poly); }); } 

Answer 3

Refer to this question and try to implement using javascript. The code will be much simpler (I personally prefer this) https://developers.google.com/maps/documentation/javascript/examples/drawing-tools