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.
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>
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',
});
}
}
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.
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>
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,
});
}
}
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:
Reference: http://primefaces.org/primeng/gmap
Similar Reads
Angular PrimeNG Image Events
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. In this article, we will know how to use Angular PrimeNG Image Events. The Image Component is used t
3 min read
Angular PrimeNG Menu Events
Angular PrimeNG is an open-source library that consists of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will be seeing Angular PrimeNG Menu Events. The Menu component is used for navigatin
4 min read
Angular PrimeNG Panel Events
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. In this article, we will know the Events the of Panel component in Angular PrimeNG. Panel Component
3 min read
Angular PrimeNG Paginator Events
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. In this article, we will see the Angular PrimeNG Paginator Events. The Paginator Component is a triv
3 min read
Angular PrimeNG GMap Component
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.
4 min read
Angular PrimeNG Inplace Events
Angular PrimeNG is a UI component library built by PrimeTek for helping out Angular developers for easing the process of developing consistent and scalable web interfaces in less time. In this article, we will see the Inplace Events in Angular PrimeNG. The Inplace Component is used in place of other
3 min read
Angular PrimeNG PickList Events
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.
5 min read
Angular PrimeNG Tree Events
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 designs, an extensive icon library, and much more.
5 min read
Angular PrimeNG Chip Events
Angular PrimeNG is a UI component library for Angular Applications. It offers many pre-built themes and UI components for various tasks like inputs, menus, charts, Buttons, etc. In this article, we will see Angular PrimeNG Chip Events. The Chip component represents entities using text, icons, and im
3 min read
Angular PrimeNG Steps Events
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. In this article, we will see the Steps Events in Angular PrimeNG. The Steps Component guides users t
3 min read