Angular components for Google Maps
npm install ng-agm-core-lib
This is a fork of the original AGM - Angular Google Maps library with support for the latest Angular versions. This repository provides Angular components for Google Maps, maintaining the functionality of the original library while extending compatibility.
---
| Angular Version Range | Supported by AGM v1.0.0 |
| --------------------- | ----------------------- |
| 12.x.x | Yes |
| 13.x.x | Yes |
| 14.x.x | Yes |
| 15.x.x | Yes |
| 16.x.x | Yes |
| 17.x.x | Yes |
| 18.x.x | Yes |
| Latest (currently 19.x) | Yes |
ng-agm-core-lib v1.0.0 supports all Angular versions from 12.x to the latest (currently 19.x).
> Note: ng-agm-core-lib v1.0.0 will continue to support future Angular versions as well, ensuring compatibility with the latest updates and features.
---
| Package | Downloads |
| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| ng-agm-core-lib |  |
---
If you just want to play with AGM and don't want to set up a full project, you can use the following Plunker. It has all the dependencies to play with Angular, TypeScript, and of course AGM:
» Play with Angular Google Maps on Stackblitz
---
---
1. Installation
2. Setup and Configuration
3. Usage Example
4. Supported Versions
5. API Reference
6. Note
---
To install the ng-agm-core-lib package, run the following command in your Angular project directory:
``bash`
npm install ng-agm-core-lib
---
1. Import the AGM Core Module
After installation, import AgmCoreModule into your AppModule (or another module that requires the map functionality). You also need to provide your Google Maps API key as follows:
`typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AgmCoreModule } from 'ng-agm-core-lib';
@NgModule({
imports: [
BrowserModule,
FormsModule,
AgmCoreModule.forRoot({
apiKey: 'YOUR_GOOGLE_MAPS_API_KEY'
})
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {}
`
> Note: Replace 'YOUR_GOOGLE_MAPS_API_KEY' with your actual Google Maps API key. You can obtain it from the Google Cloud Console.
---
Here's a basic usage example to display a map with markers and circles:
`htmlAngular Google Maps (AGM) Demo
[longitude]="lng"
[zoom]="zoom"
[disableDefaultUI]="false"
[zoomControl]="false"
(mapClick)="mapClicked($event)">
(markerClick)="clickedMarker(m.label, i)"
[latitude]="m.lat"
[longitude]="m.lng"
[label]="m.label"
[markerDraggable]="m.draggable"
(dragEnd)="markerDragEnd(m, $event)">
InfoWindow content
[fillColor]="'red'"
[circleDraggable]="true"
[editable]="true">
`
`typescript
import { Component } from '@angular/core';
import { MouseEvent } from '@agm/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
// google maps zoom level
zoom: number = 8;
// initial center position for the map
lat: number = 51.673858;
lng: number = 7.815982;
clickedMarker(label: string, index: number) {
console.log(clicked the marker: ${label || index})
}
mapClicked($event: MouseEvent) {
this.markers.push({
lat: $event.coords.lat,
lng: $event.coords.lng,
draggable: true
});
}
markerDragEnd(m: marker, $event: MouseEvent) {
console.log('dragEnd', m, $event);
}
markers: marker[] = [
{
lat: 51.673858,
lng: 7.815982,
label: 'A',
draggable: true
},
{
lat: 51.373858,
lng: 7.215982,
label: 'B',
draggable: false
},
{
lat: 51.723858,
lng: 7.895982,
label: 'C',
draggable: true
}
];
}
// just an interface for type safety.
interface marker {
lat: number;
lng: number;
label?: string;
draggable: boolean;
}
``
---
ng-agm-core-lib v1.0.0 supports Angular 12+ and will continue to support future versions, ensuring compatibility with the latest updates and features.