4

Every time I try to get the new polygon when I edit it, either by dragend or click, I always get the initial paths of my variable.

I initialize my paths variable with:

paths: Array<LatLngLiteral> = [{lat: -12.052224, lng: -77.050342}, {lat: -12.064306, lng: -77.031790}, {lat: -12.075951, lng: -77.054554}, {lat: -12.063236, lng: -77.072506}, {lat: -12.052224, lng: -77.050342}];

Never update the paths variable whatever I do.

What am I failing? Why I can not get the final polygon with its respective paths and always get the initial? Or what is the correct way to get the new polygon?

This is my component:

<sebm-google-map [latitude]="lat" [longitude]="lng" [zoom]="zoom">
    <sebm-map-polygon [paths]="paths" [editable]="true" [polyDraggable]="true" [strokeColor]="'#c60331'" (polyDragEnd)="onDragEnd($event, paths)">
     </sebm-map-polygon>
</sebm-google-map>
Devid Farinelli
  • 7,514
  • 9
  • 42
  • 73
Eduardo Gabriel Cabrera Japa
  • 501
  • 1
  • 5
  • 18

1 Answers1

2

Late but I thought someone like me may get some help so adding the answer.

The current release doesn't support it so you will need to make some changes to the current node_module. See this url:

https://github.com/SebastianM/angular-google-maps/pull/991

willshowell has explained what needs to be done.

Steps:

  1. Update the sebm to agm (take the current release as of now)
  2. Second, update your angular to at least 2.3 because it will not work with 2.0.
  3. In the link above, he has committed various files to the branch. What he has done, is already explained in the issue.
  4. Short explanation: he has changed the Array to MVCArray so you can get the exact data type which google uses for it's map paths, added getPath() and getPaths() functions. I did same for Polygons you can download the files here to see what I need to change for getting new Paths for Polygons after DragEnd Dropbox link for files changed in @agm module

Once you have made changes to Node Module, you can use the following code in the mouse up event of your PolyGon: @ViewChildren(AgmPolygon) polygonData: QueryList<AgmPolygon>; polyMouseUp($event: any, index:number, polygon: any) { var i =0; this.polygonData.forEach( x =>{ if(i==index){ x.getPath().then((y: any[]) => { console.log('-'); y.forEach(z => console.log(z.lat(), z.lng())); }); } i++; } ); }

Oo-_-oO
  • 417
  • 7
  • 24
  • you will need to download the files and paste in the node_modules. Please refer to the link for explanation. – Oo-_-oO Jun 24 '17 at 16:01
  • do i replace with my files?like if i have alreddy `google-map-types.d.ts` file in my `node module` what i have to do? – paruvelly Vishwanath Jun 25 '17 at 08:34
  • Yes replace types.d.ts and core.umd.js. Replacing d.ts file will ensure that your program is compiling correctly and the intellisense will accept these new methods. And the umd file will actually contain the definition of this function. – Oo-_-oO Jun 30 '17 at 03:58
  • 4
    i added above files .even i am getting `x.getPath() is not a function`..any plunker it will more help to me – paruvelly Vishwanath Nov 06 '17 at 06:26