Namespace 'google.maps' has no exported member 'MouseEvent'

Question

I wanted to integrate Google Maps with my Angular project. In the pilot version, I was just following this link https://angular-maps.com/guides/getting-started/. Currently, I am stuck in error:

node_modules/@agm/core/lib/directives/map.d.ts:232:43 - error TS2694: Namespace 'google.maps' has no exported member 'MouseEvent'

232 mapDblClick: EventEmitter<google.maps.MouseEvent>;

I went to the file location and got this

    mapClick: EventEmitter<google.maps.MouseEvent | google.maps.IconMouseEvent>;
    /**
     * This event emitter gets emitted when the user right-clicks on the map (but not when they click
     * on a marker or infoWindow).
     */
    mapRightClick: EventEmitter<google.maps.MouseEvent>;
    /**
     * This event emitter gets emitted when the user double-clicks on the map (but not when they click
     * on a marker or infoWindow).
     */
    mapDblClick: EventEmitter<google.maps.MouseEvent>;
    /**

Dependencies: npm install @agm/core npm i @types/googlemaps

Answer 1

I found, that the workaround mentioned in some of the other answers does not work if you are using @agm/core. I came across the same error when updating to Angular 11.

It seems, that Angular 11 does not work properly in combination with @agm/core 3.0.0-beta.0 (newest version). Try to downgrade @agm/core to the previous version 1.1.0. This worked for me.

"dependencies": {
    "@agm/core": "^1.1.0"
}

Answer 2

It work around solution found on this github response

"dependencies": {
     "@angular/google-maps": "^11.0.0"
}

then add

"devDependencies": {
     "@types/googlemaps": "3.39.14"
}    

Answer 3

Guys the solution is already merged,

https://github.com/DefinitelyTyped/DefinitelyTyped/pull/50565#issuecomment-759785211

try installing @types/[email protected] from npm.

Answer 4

I faced the same issue with Angular 11. Here is the combination that worked fine for me (package.json):

"dependencies": {
...
    "@agm/core": "^1.1.0",
... 
}
"devDependencies": {
...
"@types/googlemaps": "^3.39.12",
...
}

P.S.: Some tutorials recommend to add @google/maps but I did not add that package.

Answer 5

I'm adding a new answer with a radical solution.

TL;DR:

I got rid of agm/core and replaced it by the ngx-autocomplete package. I also updated my angular to v12 in the process, but that was most likely not necessary. Ref to article.

Long version:

Previously, I needed to use 2 packages

• agm/core to get google-map edition that provided onAddressChange in my components so I could get the google place ID, latLng, etc
• angular/google-maps for showing a map with a marker on an address
• those packages need to be version-synchronized with a typescript @type/googlemaps package

After looking at various answers I found many things to watch our for

• Version numbers (and presence or absence of "^" is important)
• Having the @type package in dependencies and not devDependencies may help
• Adding "googlemaps" to the compilerOptions.types array in all tsconfig*.json (.app.json, .spec.json, tsconfig.json)

Despite this and trying various configurations, I could not make it work. It seems like I needed, in order to fix all my bugs, both

• @types/googlemaps": >= 3.39.14
• @types/googlemaps": <= 3.39.12

With errors like

Generic type 'MapHandlerMap' requires 1 type argument(s).

or

Namespace 'google.maps' has no exported member 'MouseEvent'

My mindset was the following: instead of downgrading version until I find the good one, just bump everything to the latest version (using ng update it went rather smoothly), which included all angular modules, and then get rid of incompatible libraries that are not maintained and/or deprecated.

Turns out agm/core became the main culprit. Just look at how long it has been stuck at 3.0.0-beta.0, and the semver patch version beta.0 is already a big hint that you should not use this package.

After googling a bit, I found out that the ngx-google-places-autocomplete package was much more straightforward to implement, and offered a much simpler interface with only one handler to implement (just look at the article I linked in the tl;dr - you can implement it in a few secs). It was also compatible with angular/google-maps and the type package without doing anything else.

I mentioned that I upgraded to angular 12, but I believe you do not need to do this, and ngx-google-places-autocomplete can most likely work with anterior angular versions. Just get rid of agm.

Answer 6

I had same issue with Angular-Cli 11 and "@agm/core": "^3.0.0-beta.0", I resolved by adding @types/googlemaps: "3.39.12" to my devDependencies, now it works !