How to get drawn multiple polygons coordiantes from google map in angular?

Viewed 27

 mapInitializer() {
    this.map = new google.maps.Map(this.gmap.nativeElement,
      this.mapOptions);

    const drawingManager = new google.maps.drawing.DrawingManager({
      drawingMode: google.maps.drawing.OverlayType.MARKER,
      drawingControl: true,
      drawingControlOptions: {
        position: google.maps.ControlPosition.TOP_CENTER,
        drawingModes: [
          google.maps.drawing.OverlayType.POLYGON
        ],
      },
      polygonOptions: {
        fillColor: '#0FC500',
        strokeColor: '#0FC500',
        strokeWeight: 2,
        strokeOpacity: 2,
        fillOpacity: .2,
        editable: true,
        clickable: true,
        draggable: true
        // zIndex: 1
      },
    });
    drawingManager.setMap(this.map);

    google.maps.event.addListener(drawingManager, 'polygoncomplete', (polygon) => {


      const len = polygon.getPath().getLength();
      const polyArrayLatLng: any[] = [];

      for (let i = 0; i < len; i++) {
        const vertex = polygon.getPath().getAt(i);
        const vertexLatLng = { lat: vertex.lat(), lng: vertex.lng() };
        polyArrayLatLng.push(vertexLatLng);
      }

      // the last point of polygon should be always the same as the first point (math rule)
      // polyArrayLatLng.push(polyArrayLatLng[0]);

      console.log(polygon);
      console.log("############");

      let result = '';
      polyArrayLatLng.map((a) => {
        // return [a.lat, a.lng + '#'];
        result += `${a.lat},${a.lng}#`;
      })

      result = result.substring(0, result.length - 1);

      // console.log("get result: " + result);
      // console.log('coordinates', polyArrayLatLng);

      this.serviceAreaForm.patchValue({
        ServiceAreaGEOCode: result
      })


    });

    google.maps.event.addListener(drawingManager, 'click', function () {
      // var polygonPaths = this.getPaths();

      console.log("Polygon Selected");

    });

  }
<div class="col-sm-12 col-md-7 col-lg-7">
    <button>Delete Shape</button>
    <div class="tile">
        <div class="sa-map-same-height" #mapContainer id="map">
        </div>
    </div>
 </div>

I am able to extract one polygon coordinates from a drawn polygon but unable to detect if two/multiple polygon have drawn and stuck in fetching the coordinates value. I am using angular 12 version. also need some suggestion regarding deleting the selected polygon.

Is there any event for polygoncomplete listener from where I can detect if multiple polygon has drawn? Also should I maintain two drawing manager for two polygon?

0 Answers
Related