Namespace 'google.maps' has no exported member 'MouseEvent'
Asked Answered
S

11

22

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

Swarts answered 28/12, 2020 at 14:10 Comment(1)
Please check out my answer, the solution was just merged now and published, there's no more need for workarounds.Palmieri
B
24

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"
}
Barkeeper answered 30/12, 2020 at 9:58 Comment(1)
Downgrading to @agm/core 1.1.0 worked for me, thank you.I was using @agm/core 3.0.0-beta.0 with Angular 9.Edholm
Q
14

It work around solution found on this github response

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

then add

"devDependencies": {
     "@types/googlemaps": "3.39.14"
}    
Quickie answered 29/12, 2020 at 2:5 Comment(0)
P
8

Guys the solution is already merged,

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

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

Palmieri answered 14/1, 2021 at 17:36 Comment(0)
T
5

Had the same error on my Angular 12 project but it worked after downgrading @types/googlemaps.

"dependencies": {
    "@agm/core": "^3.0.0-beta.0",
},
"devDependencies": {
    "@types/googlemaps": "^3.39.12",
}
Trollope answered 16/8, 2021 at 13:5 Comment(2)
this helped me solve this issue github.com/DefinitelyTyped/DefinitelyTyped/issues/48574 but not the one from OPBoigie
Thanks @Stephan TP, this worked for me. Phew! few hours of googling and you came as the saviour. Gets into this agm issue time and again when ever there is a version upgrade. Wondering whether its best to switch to Angular's Google Map Component.Vaporization
B
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.

Boigie answered 4/10, 2021 at 21:0 Comment(0)
V
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.

Vivisect answered 7/4, 2021 at 8:30 Comment(1)
@agm/core^3.0.0-beta.0 and @types/googlemaps@^3.39.12 also works (for me)..Ahern
F
3

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 !

Flatcar answered 18/1, 2021 at 11:43 Comment(0)
H
3

With the latest version, MouseEvent is now named MapMouseEvent.

Tied with
"@angular/google-maps": "^13.2.3",
"@types/google.maps": "3.47.4"

be careful tho download this one not to download @types/googlemaps without the *.*, which is a deprecated library

Hellion answered 18/2, 2022 at 13:38 Comment(0)
J
2

none of the above worked for me, my angular version is 10 and as per this the issue is with compatibility of @angular/googlemaps and @types/googlemaps on which angular team is currently working.

Jackknife answered 2/1, 2021 at 8:3 Comment(0)
M
0

I found this solution and work for me.

I use Angular 10

because @agm/core support latest angular v.10

Solution below,

npm i @agm/core@^3.0.0-beta.0

npm i @types/[email protected] --save-dev

Full code

{
  "name": "web-vacc-care-ng10",
  "version": "1.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@agm/core": "^3.0.0-beta.0",
    "@angular/animations": "~10.2.4",
    "@angular/common": "~10.2.4",
    "@angular/compiler": "~10.2.4",
    "@angular/core": "~10.2.4",
    "@angular/forms": "~10.2.4",
    "@angular/platform-browser": "~10.2.4",
    "@angular/platform-browser-dynamic": "~10.2.4",
    "@angular/router": "~10.2.4",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1002.3",
    "@angular/cli": "~10.2.3",
    "@angular/compiler-cli": "~10.2.4",
    "@types/googlemaps": "^3.39.13",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.8.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.0.2"
  }
}

Work for me.

Mage answered 29/7, 2021 at 15:17 Comment(0)
B
-3

Since upgrading to Angular 11 I started to experience this issue.

The work around is; in your "node_modules/@agm/core/lib/services/" folder, you will need to change MapHandlerMap to MapMouseEvent at a few places (check your terminal log to see where).

Baten answered 22/2, 2021 at 16:39 Comment(1)
Any change to files in node_modules folder will be discarded when you reinstall the package, so this will be just a temp fix.Tinsley

© 2022 - 2024 — McMap. All rights reserved.