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

Question

how to draw a shape of polygon dynamically(not predefined paths) and how to store lat long values of Polygon

I already refer AGMPolygon but it didn't solve my isuse

Answer 1

Update 26 Apr 2018.

I am not sure but seems that the Angular Google Maps has already supported drawing polygon. You can check more.

---

Check the working plunker:

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

2. Updated version (draw polygon and intersect checking) (plunker is not working now) https://embed.plnkr.co/3sNWwX/

AGM is the best library for Angular 2 for now but It still needs to update more to reflect all the Google Maps API. So better we follow Google Maps doc and use it directly before the Angular community support it.

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

Please be noted that it is a very basic one which allows you to draw a polygon and get the coordinate once finishing. You might want to move all the map related code into a service as well.

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());
        }
    });
}