Angular-google-maps: dragEnd event on agm-map?

[thanhngvpt]

Hi all.
How can i catch dragEnd event on map such as: <agm-map (dragend)="mapDragEnd($event)"></agm-map>
Thanks.

[camilocano146]

Hi @thanhngvpt, what did you do to emulate the dragend event, do you have any solution?

[thanhngvpt]

@camilocano146 My problem is when user drag map, I need to call api to get new data accordingly new info (radius, center). Currently i can only do it by perform actions in boundChange event, but it cause my app crash because boundChange create many many api call. For now I temporary solved by push every request to queue and every boundChange triggered I'll unsubscribe all request in queue then make new request. It seem terrible, Does anyone have a better solution? Pls put here.

[fabrizziocht]

@SebastianM we need this update now!!!, thanks for your attention

[svetoslavhsavov]

Hello, Is the dragend event turned on ?

[seblemeur]

We need it please !

[seblemeur]

For now, I did like that, no bug :

your.component.html :

<agm-map [latitude]="10" [longitude]="12" [zoom]="3" (mapReady)="mapReady($event)">
</agm-map>

your.component.ts :

mapReady(map) {
    this.map = map;

    var that = this;
    this.map.addListener("dragend", function () {
      //do what you want
    });
}

[svetoslavhsavov]

I am using (idle) event. The event is triggered on dragEnd and also on Zoom Out and ZoomIn , but in my case is working.
https://developers.google.com/maps/documentation/javascript/events

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[dfa1234]

It's not ok, please reopen this, that is very important.

[dfa1234]

In fact this event is here, you just have to

 <agm-map
      (centerChange)="centerChange($event)"
      (boundsChange)="boundsChange($event)"
     ...

(mapReady) is not a good option here, it's only launch on first appearance

[svetoslavhsavov]

Hello, due to the fact that the boundsChange() do not work. I ma using (idle)="centerChange()".
@ViewChild(AgmMap) mapElement: any;

public centerChange() {
const ln = this.mapElement._mapsWrapper.getBounds()
.then((latLngBounds) => {
this.locations.east = latLngBounds.getNorthEast().lat();
this.locations.north = latLngBounds.getNorthEast().lng();
this.locations.south = latLngBounds.getSouthWest().lat();
this.locations.west = latLngBounds.getSouthWest().lng();
});
}

[dfa1234]

I just test the event and it's triggering.

[SebastianM]

Feature got merged

[GaboSantyCosta]

For now, I did like that :

your.component.html :

your.component.ts :

newCenterLat: number
newCenterLng: number

mapReady(map) {
map.addListener("dragend", () => {
//the values
console.log(this.newCenterLat,this.newCenterLng)
});
}
centerChange(e) {
console.log(e)
this.newCenterLat = e.lat
this.newCenterLng = e.lng
}

//test the last lat lng for the console when you are draging with the console when you dragend and are the same

[karthickms]

@camilocano146 My problem is when user drag map, I need to call api to get new data accordingly new info (radius, center). Currently i can only do it by perform actions in boundChange event, but it cause my app crash because boundChange create many many api call. For now I temporary solved by push every request to queue and every boundChange triggered I'll unsubscribe all request in queue then make new request. It seem terrible, Does anyone have a better solution? Pls put here.

Can you explain the temporary or permanent solution with example

[issamalshamaly]

Hi,
You will face a problem if center changes on mouse scroll, zoom in / out by mouse, so I found a better solution using form control, and set value to it on center changes, now you set center and you want to trigger value changes, until now if you listin to form control valuechanges, you will get same result but you can use rxjs to get what you want using

    this.mapForm = this.fb.group({
       mapCenter: ['']
    })

  centerChange(e){
    this.mapForm.get('mapCenter').setValue({lat:e.lat,lng:e.lng});
  }

this.mapForm.get('mapCenter').valueChanges.pipe(
         debounceTime(400),
         distinctUntilChanged(),
         switchMap(latlang =>//your http request http.post('api_link', {latlang} )
      ).subscribe((val) => {
        console.log(val);
      });

The switchMap will cancel any HTTP request that hasn't completed if a new value is emitted through the subject. You can play with the debouneTime to see what feels right for you. Lastly, make sure you unsubscribe from your subject in the ngOnDestroy, this will prevent any memory links and keep everything nice and perfromant.:

ngOnDestroy(){
this.subscription. unsubscribe();
}
Suresh's answer has a distinctUntilChanged() which is an excellent addition to the solution. I'm adding it but want to give credit to his answer below. This is a benefit because if I search for egg the request is made. But then I add an s the end of egg and change my mind before the debounce is completed another duplicate HTTP post with a search of egg will not be made.

I hope this useful