Guys i was trying to make a user editable polygon on Googlemap using ionic 3 like the image shown below , but not coming ...help me to do this : ## but i am getting only normal polygon line when my marker is placed on map..plz help me to solve this


 - @ionic/cli-utils  : 1.19.2
 - ionic (Ionic CLI) : 3.20.0

global packages:

    cordova (Cordova CLI) : 8.0.0

local packages:

    @ionic/app-scripts : 3.1.8
    Cordova Platforms  : android 7.0.0
    Ionic Framework    : ionic-angular 3.9.2

System:

    Android SDK Tools : 26.1.1
    Node              : v8.10.0
    npm               : 5.6.0
    OS                : Windows 10

Environment Variables:

    ANDROID_HOME : C:\Users\w2s-pc\AppData\Local\Android\Sdk

Misc:

    backend : pro


----------


Code:
     import { NavController } from 'ionic-angular';
     import{LatLng,GoogleMaps,GoogleMap,GoogleMapsEvent,GoogleMapOptions,
     CameraPosition,MarkerOptions,Polyline,Polygon,PolygonOptions,
     Spherical,Marker} from '@ionic- native/google-maps';
     import { Component } from "@angular/core/";
     import { Geolocation } from '@ionic-native/geolocation';


     @Component({
     selector: 'home',
     templateUrl: 'home.html'
     })

     export class HomePage {
     map: GoogleMap;
     me: any;
     locations = []
  
     constructor() { }

     ionViewDidLoad() {
     this.loadMap();
    }

      loadMap() {

      let mapOptions: GoogleMapOptions = {
      // camera: {
      //   target: {
      //     lat: this.me._x,
      //                  lng: this.me._y
      //   },

      //   zoom: 18,
      //   tilt: 30,
      // },
      MyLocation:true,
      MyLocationButton:true,
       disableDefaultUI: true,
      mapType: "MAP_TYPE_HYBRID",


    };


      let map= this.map = GoogleMaps.create('map_canvas', mapOptions);

    // var div = document.getElementById("map_canvas");
    // var map = new GoogleMaps()



    // Wait the MAP_READY before using any methods.
    this.map.on(GoogleMapsEvent.MAP_READY)
      .subscribe(() => {
        console.log('Map is ready!');


        this.map.setMyLocationEnabled(true)

        this.map.setMyLocationButtonEnabled(true)




        this.map.on(GoogleMapsEvent.MAP_CLICK).subscribe((location: any) => {

          console.log(location);


          this.locations.push(new LatLng(location[0].lat, location[0].lng));



          console.log(location);

          let PolyLineInfo;
     

              
           this.map.addPolygon({
               'points' : this.locations , 
               'strokeColor'  :  '# AA00FF' ,  
               'fillColor'  :  '# 00FFAA' , 
               'strokeWidth' :  4 ,
               'editable' :true,
          }).then((info: Polyline) => {

            // info.setPoints
            PolyLineInfo = info;
            
          
          }

          );
          
     
          this.map.addMarker({
            
            animation: 'DROP',
            draggable: true,
            
            position: {
              lat: location[0].lat,
              lng: location[0].lng,
            },
            customInfo: this.locations.length - 1
          })
            .then(marker => {

              marker.on(GoogleMapsEvent.MARKER_DRAG_END)
                .subscribe((marker) => {

                  let index = marker[1].get("customInfo");


                  this.locations[index] = new LatLng(marker[0].lat, marker[0].lng);
                            

                  PolyLineInfo.remove();

                  console.log(this.locations[0]);
                  console.log(this.locations[1]);
                  console.log(this.locations[2]);
                                    

                 
                                    let dis = Spherical.computeSignedArea(this.locations);
                                    
                                          console.log(dis);
                                    let km = Spherical.computeLength(this.locations);
                                         console.log(km);

                  this.map.addPolygon({
                          'points' : this.locations , 
                          'strokeColor'  :  '# AA00FF' ,  
                          'fillColor'  :  '#FF0000' , 
                          'strokeWidth' :  4 ,
                          'editable' :true,
                  }).then((info: Polyline) => {

                    PolyLineInfo = info;
                  }

                  );

                

             });


            })
        });  
     
       });


       }
      } 


----------

   [**i need to do like this using ionic version 3 on Google Map**][1]
   [1]: https://i.stack.imgur.com/tP3BC.jpg
