6

Using Angular Google Map (AGM), I'm trying to add a new marker when map is clicked. To do so, I have added an event mapClick that will send the event with the coordinates to addMarker method.

<agm-map [latitude]="location.latitude" [longitude]="location.longitude" (mapClick)="addMarker($event.coords.lat, $event.coords.lng)">
<agm-marker [latitude]="location.latitude" [longitude]="location.longitude"></agm-marker>
import { Component, OnInit } from '@angular/core';

import { Location } from '../models/map-model';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss']
})
export class MapComponent implements OnInit {
  public location: Location;
  public markers: [];

  constructor() { /*empty*/ }

  ngOnInit(): void {
    this.location = {
      latitude: -28.68352,
      longitude: -147.20785
    }
  }

  addMarker(latitude: number, longitude: number) {
    console.log(`latitude: ${latitude}, longitude: ${longitude}`);
  }
}

PROBLEM:

  • CANNOT GET COORDINATES. Error in html = 'Identifier coords is not defined'
  • When i print the event on console, returns "c".

enter image description here

3
  • What version do you have installed? Check package.json.
    – hyperdrive
    Commented Sep 9, 2020 at 21:27
  • I have installed the following versions: "@agm/core": "^3.0.0-beta.0" and "@types/googlemaps": "^3.39.13" @hyperdrive Commented Sep 9, 2020 at 21:37
  • @hyperdrive Do I need another different version? Commented Sep 11, 2020 at 15:10

1 Answer 1

8

It's a bug in the latest published version. 3.0.0-beta.0

It's apparently been fixed but not published.

You could revert to ^1.1.0.

Or implement the workaround suggested in the issue.

1
  • That was the problem. I've changed the version to 1.1.0 and know it works. Thanks! @hyperdrive Commented Sep 12, 2020 at 9:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.