Trouble getting Angular Google Map AGM to work with Angular 11

Question

I installed agm/core using npm like this:

npm install @agm/core

The following warnings were displayed:

npm WARN @agm/[email protected] requires a peer of @angular/common@^9.1.0 || ^10.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @agm/[email protected] requires a peer of @angular/core@^9.1.0 || ^10.0.0 but none is installed. You must install peer dependencies yourself.

I continued nevertheless and imported AgmCoreModule into AppModule as per docs like this:

AgmCoreModule.forRoot({
      apiKey: 'MY MAP KEY',
      libraries: ['places']
    })

However, when trying to serve the app with ng serve, the following errors occur:

Error: node_modules/@agm/core/lib/services/google-maps-api-wrapper.d.ts:50:41 - error TS2314: Generic type 'MapHandlerMap<T>' requires 1 type argument(s).
50     subscribeToMapEvent<N extends keyof google.maps.MapHandlerMap>(eventName: N): Observable<google.maps.MapHandlerMap[N]>;
                                           ~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@agm/core/lib/services/google-maps-api-wrapper.d.ts:50:94 - error TS2314: Generic type 'MapHandlerMap<T>' requires 1 type argument(s).
50     subscribeToMapEvent<N extends keyof google.maps.MapHandlerMap>(eventName: N): Observable<google.maps.MapHandlerMap[N]>;
                                                                                                ~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@agm/core/lib/services/managers/marker-manager.d.ts:25:93 - error TS2694: Namespace 'google.maps' has no exported member 'MarkerMouseEventNames'.

25     createEventObservable<T extends (google.maps.MouseEvent | void)>(eventName: google.maps.MarkerMouseEventNames | google.maps.MarkerChangeOptionEventNames, marker: AgmMarker): Observable<T>;
                                                                                               ~~~~~~~~~~~~~~~~~~~~~
node_modules/@agm/core/lib/services/managers/marker-manager.d.ts:25:129 - error TS2694: Namespace 'google.maps' has no exported member 'MarkerChangeOptionEventNames'.39m

25     createEventObservable<T extends (google.maps.MouseEvent | void)>(eventName: google.maps.MarkerMouseEventNames | google.maps.MarkerChangeOptionEventNames, marker: AgmMarker): Observable<T>;

I have this working on an existing Angular 7 application already. But I am trying to upgrade to Angular 11 and having problems getting @agm/core to work.

I am also aware of an official Angular google-map component, but I need to use the autocomplete feature that seems to integrate well with agm, and couldn't find any docs to do this with the google-map component.

Has anyone managed to successfully use @agm/core with Angular 11?
Help and suggestions much appreciated.

Prosthetics

Answer 1

I had the same issue and I found in other forums where rolling back the version of the googlemaps fixed it. I ran the following command and I was able to see it work as expected.

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

Beachlamar

Just to be clear, you used this in Angular 11? I still cant get agm/core to install in Angular 11 – Schnauzer

Worked with Angular 12. – Phrase

Just to be clear, does this library work the same as AGM? – Hydrogenolysis

Hey, @jjaur's did you try and get any results? Because I am having the same issue with agm. -- edited Also getting error with npm i @types/[email protected] --save-dev – Omland

Hey, @Omland i had a result while using the solution proposed. It is working. Hope it will help you – Hydrogenolysis

@Phrase I ma using Angular 12 as well with [email protected] but still having the issue. Did you do anything aside? – Administrator

Answer 2

Sorry for late response. I opted to use the google-map component from Angular that works well in Angular 11+

You can find more info here:
https://github.com/angular/components/tree/master/src/google-maps#readme

Thank you for all the comments and suggestions for the problem with AGM.
However, I stopped using AGM in favour of the google-map component. It made more sense since it is supported directly in Angular. So unfortunately I am unable to confirm whether the suggested solutions work for AGM.

I do recommend using google-map instead if you experience problems with AGM in Angular 11+

Prosthetics

Answer 3

AGM may not be working on angular 11 or later.

Do a ng --version to take a look at your ng client version

(my angular cli version is 13.3.8 a few version below the latest, at the time of writing) and then visit https://www.npmjs.com/package/@angular/google-maps and click the xyz Versions tabs to find all the versions, and select the one matches your major.minor version. In my case the closest I can find was 13.3.9 and click that link to get more information, mine suggest to use the below code (near the top right hand corner)..happy coding

npm i @angular/[email protected]

Satellite

Answer 4

Thank you for your advice and answers, just out of interest sake I got it working with angular 11 by forcing the install, got a lot of warnings, but it works:

npm install @agm/core -f

Here is the warnings:

npm WARN using --force Recommended protections disabled.
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @agm/[email protected]
npm WARN Found: @angular/[email protected]
npm WARN node_modules/@angular/common
npm WARN   peer @angular/common@"^11.0.0 || ^12.0.0-0" from @angular/[email protected]
npm WARN   node_modules/@angular/cdk
npm WARN     peer @angular/cdk@"11.2.13" from @angular/[email protected]
npm WARN     node_modules/@angular/material
npm WARN     1 more (the root project)
npm WARN   11 more (@angular/forms, @angular/material, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer @angular/common@"^9.1.0 || ^10.0.0" from @agm/[email protected]
npm WARN node_modules/@agm/core
npm WARN   @agm/core@"*" from the root project
npm WARN
npm WARN Conflicting peer dependency: @angular/[email protected]
npm WARN node_modules/@angular/common
npm WARN   peer @angular/common@"^9.1.0 || ^10.0.0" from @agm/[email protected]
npm WARN   node_modules/@agm/core
npm WARN     @agm/core@"*" from the root project
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @agm/[email protected]
npm WARN Found: @angular/[email protected]
npm WARN node_modules/@angular/core
npm WARN   peer @angular/core@"11.2.14" from @angular/[email protected]
npm WARN   node_modules/@angular/animations
npm WARN     peer @angular/animations@"^11.0.0 || ^12.0.0-0" from @angular/[email protected]
npm WARN     node_modules/@angular/material
npm WARN     3 more (@angular/platform-browser, ngx-bootstrap, the root project)
npm WARN   14 more (@angular/cdk, @angular/common, @angular/forms, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer @angular/core@"^9.1.0 || ^10.0.0" from @agm/[email protected]
npm WARN node_modules/@agm/core
npm WARN   @agm/core@"*" from the root project
npm WARN
npm WARN Conflicting peer dependency: @angular/[email protected]
npm WARN node_modules/@angular/core
npm WARN   peer @angular/core@"^9.1.0 || ^10.0.0" from @agm/[email protected]
npm WARN   node_modules/@agm/core
npm WARN     @agm/core@"*" from the root project

PS I noticed that the @agm/core repo has been forked quite a bit, and some of them seem to resolve this problem.

Fettling