AGM - Angular Google Maps (Updated)

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.

What's New?

1. Angular 12+ Support: Full compatibility with Angular versions 12 and above.
2. Bug Fixes: Resolved several issues from previous releases.
3. Performance Enhancements: Optimized for better performance in modern Angular applications.

Supported Angular Versions

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

Packages

| Package | Downloads | | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------- | | ng-agm-core-lib | |

Playing with AGM (Angular Google Maps)

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

How to Use AGM - Angular Google Maps

Table of Contents

1. Installation
2. Setup and Configuration
3. Usage Example
4. Supported Versions
5. API Reference
6. Note

Installation

To install the ng-agm-core-lib package, run the following command in your Angular project directory:

npm install ng-agm-core-lib

Setup and Configuration

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:

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.

Usage Example

Here's a basic usage example to display a map with markers and circles:

<h1>Angular Google Maps (AGM) Demo</h1>
<p><a href="https://angular-maps.com/" target="_blank">Official Website</a></p>

<agm-map 
  [latitude]="lat"
  [longitude]="lng"
  [zoom]="zoom"
  [disableDefaultUI]="false"
  [zoomControl]="false"
  (mapClick)="mapClicked($event)">

  <agm-marker 
      *ngFor="let m of markers; let i = index"
      (markerClick)="clickedMarker(m.label, i)"
      [latitude]="m.lat"
      [longitude]="m.lng"
      [label]="m.label"
      [markerDraggable]="m.draggable"
      (dragEnd)="markerDragEnd(m, $event)">
      
    <agm-info-window>
      <strong>InfoWindow content</strong>
    </agm-info-window>
    
  </agm-marker>
  
  <agm-circle [latitude]="lat + 0.3" [longitude]="lng" 
      [radius]="5000"
      [fillColor]="'red'"
      [circleDraggable]="true"
      [editable]="true">
  </agm-circle>

</agm-map>

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

Note

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.