Angular PrimeNG GMap Component

Last Updated : 14 Dec, 2022

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

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.

Overlays: The GMap component can display any type of overlays such as markers, polygons, and circles. Overlay instances are bound using the overlays property array. Overlays are aware of one-way binding so whenever the array changes, gmap updates itself.
Events: The GMap components provide callbacks that are used to hook into events including map click, overlay click, and overlay dragging.
Google Maps API: If we need to access the map instance directly, use the getMap() method. Another option is to get the map object directly after init via the (onMapReady) event.
Events: The events are used to track the actions that the user is performing while interacting with the component.
Properties: The properties are used to modify the component according to requirements providing great flexibility which can be done easily inside the component with the help of the properties.

Syntax: Create a GMap component as follows:

Import the module

import { GMapModule } from 'primeng/gmap';

Use the component

<p-gmap
    [options]="options">
</p-gmap>

Initialize as follows:

ngOnInit() {
  this.options = {
    center: { lat: 22.72105, lng: 88.373459 },
    zoom: 12,
  };
}

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=AIzaSyCml42pxbzJP_2afxri8vk4ATCWtCaGyls"> 
    </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: This example describes the basic usage of the GMap component in Angular PrimeNG.

app.component.html

HTML

<h1 style="color: green;  
           text-align:center;"> 
  GeeksforGeeks 
</h1> 
<h3> 
  Angular PrimeNG GMap Component 
</h3> 
  
<p-gmap [options]="options" 
          [style]="{ width: '100%',  
                   height: '320px' }"> 
</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: 12, 
        }; 
    } 
}

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'; 
  
@NgModule({ 
    imports: [ 
        BrowserModule, 
        BrowserAnimationsModule, 
        ButtonModule, 
        HttpClientModule, 
        GMapModule, 
    ], 
    declarations: [AppComponent], 
    bootstrap: [AppComponent], 
    providers: [MessageService], 
}) 
export class AppModule { }

Output:

Example 2: In the following example, we have added overlays to the GMap component by adding markers to two landmarks.

app.component.html

HTML

<h1 style="color: green;  
           text-align:center;"> 
  GeeksforGeeks 
</h1> 
<h3>Angular PrimeNG GMap Component</h3> 
  
<p-gmap [options]="options" 
          [overlays]="overlays" 
          [style]="{ width: '100%',  
                   height: '320px' }"> 
</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: 12, 
        }; 
  
        this.overlays = [ 
            new google.maps.Marker({ 
                position: { lat: 22.72105, lng: 88.373459 }, 
                title: 'Khardah', 
            }), 
            new google.maps.Marker({ 
                position: { lat: 22.764919, lng: 88.37082 }, 
                title: 'Barrackpore', 
            }), 
        ]; 
    } 
}

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'; 
  
@NgModule({ 
    imports: [ 
        BrowserModule, 
        BrowserAnimationsModule, 
        ButtonModule, 
        HttpClientModule, 
        GMapModule, 
    ], 
    declarations: [AppComponent], 
    bootstrap: [AppComponent], 
    providers: [MessageService], 
}) 
export class AppModule { }