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.la         


        

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) { ... }