AGM mapClick($event) not working properly

[markolo]

I made the Getting Started AGM tutorial: https://angular-maps.com/guides/getting-started/

I installed:
"@angular/core": "~10.0.0"
and
"@agm/core": "^3.0.0-beta.0"

In app.component.html I added:
<agm-map [latitude]="lat" [longitude]="lng" (mapClick)="mapClick($event)">
<agm-marker [latitude]="lat" [longitude]="lng">

In app.component.ts I added:
export class AppComponent {
title = 'gbis';
lat = 51.678418;
lng = 7.809007;

mapClick(e) {
    console.log(e);
}

}

In app.component.css I added:
agm-map {
height: 300px;
}

When I run this app the map is working but if I click on the map in TS file function mapClick(e) I receive e="c". No coordinates recieved from parameter e.

please help!

[amalmo]

ETA on this fix? or workaround?

[sqaliu]

I encountered exactly the same issue.

[CesarIAndrade]

Could anybody fix this issue?

[gggiiia]

same issue, have to use an older version to workaround this?

[juanreverter]

Could anybody fix this issue?

[gggiiia]

Could anybody fix this issue?

i suggest to use an older version for now, since this bug is critical, negating basic interaction with the map

[juanreverter]

Could anybody fix this issue?

i suggest to use an older version for now, since this bug is critical, negating basic interaction with the map

Yes, the previous version 1.1.0 (8 months ago) works fine.

[ghost]

simple fix at #1847, waiting for a review from @SebastianM

[AsadAmir111]

I am encountering the same problem. $event in mapClick returns a string "c". Any idea when this will be fixed? Any solution other than shifting to an older version?

[egorkel-da14]

As workaround you can add listener to the google map instance

<agm-map [latitude]="position.lat"
         [longitude]="position.lng"
         [zoom]="zoom"
         (mapReady)="mapReadyHandler($event)">
</agm-map>

public mapReadyHandler(map: google.maps.Map): void {
  this.map = map;
  this.mapClickListener = this.map.addListener('click', (e: google.maps.MouseEvent) => {
    this.zone.run(() => {
      // Here we can get correct event
      console.log(e.latLng.lat(), e.latLng.lng());
    });
  });
}

public ngOnDestroy(): void {
  if (this.mapClickListener) {
    this.mapClickListener.remove();
  }
}

[jesuschavez1994]

¿Alguien podría solucionar este problema?

sugiero usar una versión anterior por ahora, ya que este error es crítico, negando la interacción básica con el mapa

Sí, la versión anterior 1.1.0 (hace 8 meses) funciona bien.

Si funciona con la versión 1.1.0, usar el comando npm i @agm/core@1.1.0

[ahmadalfy]

When will this be released?

[paishin]

Having the same issue on "@agm/core": "^3.0.0-beta.0"

[paishin]

@egorkel-da14 I am trying your workaround but getting this message:
Uncaught TypeError: Cannot read property 'run' of undefined
when calling this.zone.run(...)

Am I missing something here?

update: It seems that I can get the coordinates when omitting that line:

    public mapReadyHandler(map: google.maps.Map): void {
        this.map = map;
        this.mapClickListener = this.map.addListener('click', (e: google.maps.MouseEvent) => {
            console.log(e.latLng.lat(), e.latLng.lng());
        });
    }

[egorkel-da14]

@egorkel-da14 I am trying your workaround but getting this message:
Uncaught TypeError: Cannot read property 'run' of undefined
when calling this.zone.run(...)

Am I missing something here?

update: It seems that I can get the coordinates when omitting that line:

    public mapReadyHandler(map: google.maps.Map): void {
        this.map = map;
        this.mapClickListener = this.map.addListener('click', (e: google.maps.MouseEvent) => {
            console.log(e.latLng.lat(), e.latLng.lng());
        });
    }

Yes :)
you need to inject NgZone service to the constructor

constructor(private zone: NgZone) {}

[egorkel-da14]

You need this line for proper work of Angular change detection (for proper view update)
@paishin

[chaleawmut]

call event.latLng.lat() working
markerDragEnd($event: any) {
console.log($event.latLng.lat(), $event.latLng.lng());
}

[panimat]

I have the same issue with addPin function, but I need to use version 3.0.0 to have translation for maps according user locale. So I need to know is version with translation and add pin functionality was published earlier or not? (because in version 1.1.0 translate still not available)

[munozdaniel]

¿Alguien podría solucionar este problema?

sugiero usar una versión anterior por ahora, ya que este error es crítico, negando la interacción básica con el mapa

Sí, la versión anterior 1.1.0 (hace 8 meses) funciona bien.

Si funciona con la versión 1.1.0, usar el comando npm i @agm/core@1.1.0

With Angular 10 ?

[AmrouzAmar]

As workaround you can add listener to the google map instance

<agm-map [latitude]="position.lat"
         [longitude]="position.lng"
         [zoom]="zoom"
         (mapReady)="mapReadyHandler($event)">
</agm-map>

public mapReadyHandler(map: google.maps.Map): void {
  this.map = map;
  this.mapClickListener = this.map.addListener('click', (e: google.maps.MouseEvent) => {
    this.zone.run(() => {
      // Here we can get correct event
      console.log(e.latLng.lat(), e.latLng.lng());
    });
  });
}

public ngOnDestroy(): void {
  if (this.mapClickListener) {
    this.mapClickListener.remove();
  }
}

Thank you so much for this code, it's verry helpful, have great day

[ahsan-alii]

I was having the exact same issue, so just as a work around, I uninstalled latest version and install the 1.1.0, and it worked flawlessly, without breaking any single line of code and with exact same functionality