Property 'coords' does not exist on type 'MouseEvent'. In Angular2-google-maps marker event

Question

I have added mapClicked event of angular2-google-maps map. The code is as below:

mapClicked($event: MouseEvent) {
this.markers.push({
  lat: $event.coords.lat,
  lng: $event.coords.lng,
  draggable: false
});

}

I am getting compile time error while serving my ionic 2 app with "ionic serve".

Thanks in advance, AB

Answer 1

This is just Typescript complaining since the default MouseEvent interface doesn't have the coords property, but since you're using angular2-google-maps you know the coords property will be there (ng2 google maps MouseEvent interface) so you can avoid that compile time error by just using any instead of MouseEvent like this:

mapClicked($event: any) {
this.markers.push({
  lat: $event.coords.lat,
  lng: $event.coords.lng,
  draggable: false
});

---

EDIT

Just like @Bruno Garcia pointed out, a better way to solve this would be to import the proper interface from the AGM library. That way you could use typings and the autocomplete feature of the IDE for that MouseEvent event.

But instead of importing the MouseEvent as he described in his answer, I'd prefer to use an alias, to avoid any confusion with the default MouseEvent interface:

import { MouseEvent as AGMMouseEvent } from '@agm/core';

and then just use that alias:

mapClicked($event: AGMMouseEvent) { ... }

Answer 2

The accepted answer is correct in pointing out that the default MouseEvent doesn't have a coords property.

But AGM does ship with its own MouseEvent interface which does contain a coords property of type LatLngLiteral as expected. You just need to import it:

import {MouseEvent} from "@agm/core";

Then TypeScript's warning will go away and you'll have typings for the $event argument.