How to draw my polygon with Angular Google Map?

Question

I'm using on my angular project this version of Angular Google Maps "@agm/core": "1.0.0-beta.2" . My concern is about how to re-draw the polygon I have drawn on my google Map, I'm storing the latitude and longitude, How can I redraw my polygon ?

    <agm-map [latitude]="latitudeMapUpdate"
        [longitude]="longitudeMapUpdate"
        [disableDefaultUI]="false"
        [zoom]="13"
        (mapReady)="onMapReady($event)">
    </agm-map>

    onMapReady(map) {
        this.initDrawingManager(map);
    }

    initDrawingManager(map: any) {
        const self = this;
        const options = {
            drawingControl: true,
            drawingControlOptions: {
                drawingModes: ["polygon"]
            },
            polygonOptions: {
                draggable: true,
                editable: true
            },
            drawingMode: google.maps.drawing.OverlayType.POLYGON
        };
        const drawingManager = new google.maps.drawing.DrawingManager(options);
        drawingManager.setMap(map);
        google.maps.event.addListener(
            drawingManager,
            'overlaycomplete',
            (event) => {
                alert(event.overlay.getPath().getArray());
                const paths =  event.overlay.getPaths();
                
                drawingManager.setDrawingMode(null);
                self.updatePointList(event.overlay.getPath());
                const newShape = event.overlay;
                newShape.type = event.type;
                google.maps.event.addListener(newShape, 'click', () => {
                    this.setSelectionPolygons(newShape)
                });
                this.setSelectionPolygons(newShape)
            });
        google.maps.event.addListener(drawingManager, 'drawingmode_changed', this.clearSelection);
        google.maps.event.addListener(map, 'click', this.clearSelection);
        google.maps.event.addDomListener(document.getElementById('delete-map-button'), 'click', this.deleteSelectedShape);
        console.log({map});
    } 

Answer 1

Instead of relying on 3rd party libraries/modules to implement the map for you, you can load the script directly so that you can use the google map's official documentations like this simple polygon sample. To do this, simply load the JS map script in the index.html.

Here is a working sample for your reference: https://stackblitz.com/edit/angular-simple-map-64456023

index.html

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
<my-app>loading</my-app>

style.css

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.map {
  height:100%;
}

simple-map.component.html

<div #map class="map"></div>

simple-map.component.ts

import { Component, OnInit, ViewChild } from "@angular/core";
declare const google: any;

@Component({
  selector: "my-maps",
  templateUrl: "./simple-map.component.html",
  styleUrls: ["./simple-map.component.css"]
})
export class MapComponent implements OnInit {
  @ViewChild("map", { static: true }) mapElement: any;
  map: any;

  constructor() {}

  ngOnInit() {
    const mapProperties = {
      center: new google.maps.LatLng(24.886, -70.268),
      zoom: 5,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    this.map = new google.maps.Map(
      this.mapElement.nativeElement,
      mapProperties
    );
    // Define the LatLng coordinates for the polygon's path.
    const triangleCoords = [
      { lat: 25.774, lng: -80.19 },
      { lat: 18.466, lng: -66.118 },
      { lat: 32.321, lng: -64.757 },
      { lat: 25.774, lng: -80.19 }
    ];
    // Construct the polygon.
    const bermudaTriangle = new google.maps.Polygon({
      paths: triangleCoords,
      strokeColor: "#FF0000",
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: "#FF0000",
      fillOpacity: 0.35
    });
    bermudaTriangle.setMap(this.map);
  }
}