CODEWITHSUNDEEP
javascriptangulargoogle-maps-api-3angular-google-maps
JSG
JSG

Reputation: 1583

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

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

Upvotes: 22

Views: 27561

Answers (11)

Rapha&#235;l Balet
Rapha&#235;l Balet

Reputation: 8553

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

Upvotes: 3

Cyril Duchon-Doris
Cyril Duchon-Doris

Reputation: 13999

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.

Upvotes: 5

Stephan TP
Stephan TP

Reputation: 71

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",
}

Upvotes: 5

bamossza
bamossza

Reputation: 3926

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.

Upvotes: 0

kihtov23
kihtov23

Reputation: 131

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.

Upvotes: 4

Nys
Nys

Reputation: 20

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

Upvotes: -3

vaibhav pandey
vaibhav pandey

Reputation: 69

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 !

Upvotes: 3

Sean Gonzalez
Sean Gonzalez

Reputation: 173

Guys the solution is already merged,

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

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

Upvotes: 8

user2404640
user2404640

Reputation: 157

It work around solution found on this github response

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

then add

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

Upvotes: 14

Aamir Sultan Malik
Aamir Sultan Malik

Reputation: 21

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.

Upvotes: 2

Johannes Hasreiter
Johannes Hasreiter

Reputation: 273

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"
}

Upvotes: 24

Related Questions