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.
The new Angular Component pearl-lullaby (v9. 0.0-rc. 0) introduces the second official @angular/component component, a Google Maps component.
Description. The angular-google-maps core module. Contains all Directives/Services/Pipes of the core module.
You can easily create your angular app using bellow command: Now in this step, we need to just install agm/core in our angular application. so let's add as like bellow: we also need to install "@types/googlemaps" for google maps library. so let's run bellow command to install googlemaps npm.
Angular Google Maps (short name: AGM) gets shipped via the Node Package Manager (NPM). Run the following command to add it to your new project: Open src/app/app.module.ts and import the AgmCoreModule . You neeed to provide a Google Maps API key to be able to see a Map.
Questions? When you have problems setting up Angular Google Maps (AGM) or questions in general, the best way is to join the chat where you find nice people from the community that can answer you questions:
You can use @angular/cli to create a new Angular Project. In your terminal window, use the following command: This will configure a new Angular project with styles set to “CSS” (as opposed to “Sass”, Less", or “Stylus”), no routing, and skipping tests.
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
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+
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With