Angular Google Maps (AGM) v2

Angular Google Maps (AGM) is a set of Angular components for Google Maps. This version is specifically designed to work with Angular 19 and provides a modern, type-safe way to integrate Google Maps into your Angular applications.

Features

• 🗺️ Full Google Maps JavaScript API support
• 📍 Markers, Info Windows, and Custom Controls
• 🎯 Drawing Tools (Polygons, Polylines, Circles)
• 📊 Marker Clustering
• 🎨 Custom Styling
• 🔄 Real-time Updates
• 📱 Responsive Design
• 🚀 Standalone Components Support
• ⚡ Angular 19 Compatibility

Installation

# Install the core package
npm install @babluroy/[email protected]

# Optional packages
npm install @babluroy/[email protected]
npm install @babluroy/[email protected]
npm install @babluroy/[email protected]

Quick Start

1. Get a Google Maps API Key

First, you need to get a Google Maps API key from the Google Cloud Console.

2. Import the Module

For Standalone Components (Recommended for Angular 19)

import { Component } from '@angular/core';
import { AgmCoreModule } from '@babluroy/agm-core';

@Component({
  selector: 'app-map',
  standalone: true,
  imports: [
    AgmCoreModule.forRoot({
      apiKey: 'YOUR_GOOGLE_MAPS_API_KEY'
    })
  ],
  template: `
    <agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom">
      <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
    </agm-map>
  `,
  styles: [`
    agm-map {
      height: 400px;
      width: 100%;
    }
  `]
})
export class MapComponent {
  lat = 51.678418;
  lng = 7.809007;
  zoom = 8;
}

For NgModules

import { NgModule } from '@angular/core';
import { AgmCoreModule } from '@babluroy/agm-core';

@NgModule({
  imports: [
    AgmCoreModule.forRoot({
      apiKey: 'YOUR_GOOGLE_MAPS_API_KEY'
    })
  ]
})
export class AppModule { }

Demo Project

Check out our demo project that showcases various features of AGM with Angular 19: AGM Demo Angular Project

The demo includes:

• Basic map integration
• Custom markers and info windows
• Drawing tools
• Marker clustering
• Custom styling
• Event handling
• And more!

Advanced Usage

Custom Styling

const mapStyles = [
  {
    "featureType": "all",
    "elementType": "geometry",
    "stylers": [{"color": "#f5f5f5"}]
  }
];

// In your template
<agm-map [styles]="mapStyles">

Marker Clustering

import { AgmMarkerClustererModule } from '@babluroy/agm-markerclusterer';

@Component({
  // ...
  imports: [AgmMarkerClustererModule],
  template: `
    <agm-map [latitude]="lat" [longitude]="lng">
      <agm-marker-cluster>
        <agm-marker *ngFor="let marker of markers"
          [latitude]="marker.lat"
          [longitude]="marker.lng">
        </agm-marker>
      </agm-marker-cluster>
    </agm-map>
  `
})

Drawing Tools

import { AgmDrawingModule } from '@babluroy/agm-drawing';

@Component({
  // ...
  imports: [AgmDrawingModule],
  template: `
    <agm-map [latitude]="lat" [longitude]="lng">
      <agm-drawing-manager
        [drawingMode]="'polygon'"
        [drawingControl]="true">
      </agm-drawing-manager>
    </agm-map>
  `
})

Environment Configuration

Create or update your environment files:

// src/environments/environment.ts
export const environment = {
  production: false,
  googleMapsApiKey: 'YOUR_GOOGLE_MAPS_API_KEY'
};

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• IE 11 (with polyfills)

Contributing

We welcome contributions! Please see our Contributing Guide for details.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

• GitHub Issues
• Stack Overflow

Related Projects

• AGM Demo Angular Project - Demo project showcasing AGM features
• AGM Core - Core package
• AGM MarkerClusterer - Marker clustering
• AGM Snazzy Info Window - Custom info windows
• AGM Drawing - Drawing tools

Website | Demo | Twitter | Chat | API Documentation

Packages

This project is a mono repo and hosts multiple packages:

| Package | Downloads | | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------- | | @babluroy/core | | | @babluroy/snazzy-info-window | | | @babluroy/markerclusterer | | | @babluroy/drawing | |

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