Angular PrimeNG GMap Events

Last Updated : 24 Apr, 2025

Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. It provides a lot of templates, components, theme design, an extensive icon library, and much more. In this article, we will see the Angular PrimeNG GMap Events.

The GMap is a google map component that is used to display a map on the webpage. We can perform zoom-in and out functions by default in the GMap component. PrimeNG also provides extra features so that we can add markers, and change the location by changing latitude and longitude and other features. The GMap Events trigger the callback functions when we interact with the component.

Angular PrimeNG GMap Events:

onMapClick(event): It is the callback to invoke when the map is clicked except for markers.
onMapDragEnd(event): It is the callback to invoke when map drag has ended.
onMapReady(event): It is the callback to invoke when the map is ready to be used.
onOverlayClick(event): It is the callback to invoke when an overlay is clicked.
onOverlayDblClick(event): It is the callback to invoke when an overlay is double-clicked.
onOverlayDrag(event): It is the callback to invoke when an overlay is being dragged.
onOverlayDragEnd(event): It is the callback to invoke when an overlay drag ends.
onOverlayDragStart(event): It is the callback to invoke when an overlay drag starts.
onZoomChanged(event): It is the callback to invoke when the zoom level has changed.

Syntax:

<p-gmap [options]="options" 
        [overlays]="overlays"
        (onOverlayClick)="overlayClicked($event)">
</p-gmap>

Creating Angular application & Module Installation:

Create an Angular application using the following command.

ng new geeks_angular

After creating your project folder i.e. geeks_angular, move to it using the following command.

cd geeks_angular

Install PrimeNG in your given directory:

npm install primeng --save
npm install primeicons --save

Project Structure: The project structure will look like the following:

Add the script URL for Google Maps in index.html and replace API_KEY with your own. Create the same in Google Cloud Console.

index.html:

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="utf-8" /> 
    <title>Demo</title> 
    <base href="/" /> 
  
    <meta name="viewport" 
          content="width=device-width,  
                         initial-scale=1" /> 
    <link rel="stylesheet" 
          type="text/css" 
          href= 
"/node_modules/primeicons/primeicons.css" /> 
    <script async src= 
"https://maps.googleapis.com/maps/api/js?key=AIzaSyALujzkyEKeBKtudqCn1E_ZRBZQsbzAKHY"> 
    </script> 
    <link rel="icon" 
          type="image/x-icon" 
          href="favicon.ico" /> 
</head> 
  
<body> 
  <app-root></app-root> 
</body> 
  
</html>

Steps to run the application: Write the below command to run the application:

ng serve --open

Example 1: In the following example, a toast appears when the user zooms in or out the map.

app.component.html

HTML

<h1 style="color: green; 
           text-align:center;"> 
  GeeksforGeeks 
</h1> 
<h3>Angular PrimeNG GMap Events</h3> 
<p-toast></p-toast> 
<p-gmap [options]="options" 
          [overlays]="overlays" 
          (onZoomChanged)="zoomChanged($event)" 
          [style]="{ width: '100%', height: '500px' }"> 
</p-gmap>

app.component.ts

Javascript

import { Component } from '@angular/core'; 
import { MessageService } from 'primeng/api'; 
  
declare var google: any; 
@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
}) 
export class AppComponent { 
    constructor(private messageService: MessageService) { } 
    options: any; 
  
    overlays: any[]; 
    ngOnInit() { 
        this.options = { 
            center: { lat: 22.72105, lng: 88.373459 }, 
            zoom: 6, 
        }; 
  
        this.overlays = [ 
            new google.maps.Marker({ 
                position: { lat: 22.5726, lng: 88.3639 }, 
                title: 'Kolkata', 
            }), 
            new google.maps.Marker({ 
                position: { lat: 28.7041, lng: 77.1025 }, 
                title: 'New Delhi', 
            }), 
            new google.maps.Marker({ 
                position: { lat: 19.076, lng: 72.8777 }, 
                title: 'Mumbai', 
            }), 
            new google.maps.Marker({ 
                position: { lat: 13.0827, lng: 80.2707 }, 
                title: 'Chennai', 
            }), 
        ]; 
    } 
    zoomChanged(event) { 
        this.messageService.add({ 
            summary: 'User zoomed', 
            closable: true, 
            severity: 'success', 
            detail: 'Welcome to GeeksforGeeks', 
        }); 
    } 
}

app.module.ts

Javascript

import { NgModule } from '@angular/core'; 
import { BrowserModule }  
    from '@angular/platform-browser'; 
import { BrowserAnimationsModule }  
    from '@angular/platform-browser/animations'; 
import { HttpClientModule }  
    from '@angular/common/http'; 
import { AppComponent } from './app.component'; 
import { ButtonModule } from 'primeng/button'; 
import { MessageService } from 'primeng/api'; 
import { GMapModule } from 'primeng/gmap'; 
import { ToastModule } from 'primeng/toast'; 
  
@NgModule({ 
    imports: [ 
        BrowserModule, 
        BrowserAnimationsModule, 
        ButtonModule, 
        HttpClientModule, 
        GMapModule, 
        ToastModule, 
    ], 
    declarations: [AppComponent], 
    bootstrap: [AppComponent], 
    providers: [MessageService], 
}) 
export class AppModule { }

Output:

Example 2: In the following example, when an overlay is clicked, the toast is shown.

app.component.html

HTML

<h1 style="color: green;  
           text-align:center;"> 
  GeeksforGeeks 
</h1> 
<h3>Angular PrimeNG GMap Events</h3> 
<p-toast></p-toast> 
<p-gmap [options]="options" 
          [overlays]="overlays" 
          (onOverlayClick)="overlayClicked($event)" 
          [style]="{ width: '100%', height: '500px' }"> 
</p-gmap>

app.component.ts

Javascript

import { Component } from '@angular/core'; 
import { MessageService } from 'primeng/api'; 
  
declare var google: any; 
@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
}) 
export class AppComponent { 
    constructor(private messageService: MessageService) { } 
    options: any; 
  
    overlays: any[]; 
    ngOnInit() { 
        this.options = { 
            center: { lat: 22.72105, lng: 88.373459 }, 
            zoom: 6, 
        }; 
  
        this.overlays = [ 
            new google.maps.Marker({ 
                position: { lat: 22.5726, lng: 88.3639 }, 
                title: 'Kolkata', 
            }), 
            new google.maps.Marker({ 
                position: { lat: 28.7041, lng: 77.1025 }, 
                title: 'New Delhi', 
            }), 
            new google.maps.Marker({ 
                position: { lat: 19.076, lng: 72.8777 }, 
                title: 'Mumbai', 
            }), 
            new google.maps.Marker({ 
                position: { lat: 13.0827, lng: 80.2707 }, 
                title: 'Chennai', 
            }), 
        ]; 
    } 
    overlayClicked(event) { 
        this.messageService.add({ 
            summary: 'Overlay title: ' + event.overlay.title, 
            closable: true, 
            severity: 'success', 
            detail: 'Coordinates: ' + event.overlay.position, 
        }); 
    } 
}

app.module.ts

Javascript

import { NgModule } from '@angular/core'; 
import { BrowserModule }  
    from '@angular/platform-browser'; 
import { BrowserAnimationsModule }  
    from '@angular/platform-browser/animations'; 
import { HttpClientModule }  
    from '@angular/common/http'; 
import { AppComponent } from './app.component'; 
import { ButtonModule } from 'primeng/button'; 
import { MessageService } from 'primeng/api'; 
import { GMapModule } from 'primeng/gmap'; 
import { ToastModule } from 'primeng/toast'; 
  
@NgModule({ 
    imports: [ 
        BrowserModule, 
        BrowserAnimationsModule, 
        ButtonModule, 
        HttpClientModule, 
        GMapModule, 
        ToastModule, 
    ], 
    declarations: [AppComponent], 
    bootstrap: [AppComponent], 
    providers: [MessageService], 
}) 
export class AppModule { }