21

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

JSG
  • 1,303
  • 2
  • 8
  • 13

11 Answers11

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"
}
Johannes Hasreiter
  • 273
  • 1
  • 8
  • 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. – featlorin Jan 13 '21 at 10:17
15

It work around solution found on this github response

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

then add

"devDependencies": {
     "@types/googlemaps": "3.39.14"
}
Raphaël Balet
  • 6,334
  • 6
  • 41
  • 78
user2404640
  • 159
  • 3
8

Guys the solution is already merged,

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

try installing @types/googlemaps@3.43.2 from npm.

Sean Gonzalez
  • 163
  • 16
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",
}
Stephan TP
  • 71
  • 1
  • 4
  • this helped me solve this issue https://github.com/DefinitelyTyped/DefinitelyTyped/issues/48574 but not the one from OP – Cyril Duchon-Doris Oct 04 '21 at 18:27
  • 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. – Tashi Nov 12 '21 at 11:26
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.

Cyril Duchon-Doris
  • 12,964
  • 9
  • 77
  • 164
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.

kihtov23
  • 131
  • 1
  • 7
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 !

vaibhav pandey
  • 69
  • 3
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

Raphaël Balet
  • 6,334
  • 6
  • 41
  • 78
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.

Aamir Sultan Malik
  • 21
  • 3
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/googlemaps@3.39.13 --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.

bamossza
  • 3,676
  • 1
  • 29
  • 28
-2

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

Nys
  • 22
  • 3