Angular PrimeNG GMap Properties

Last Updated : 06 Feb, 2023

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

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 Properties allow us to customize the component easily and extend the flexibility of the component.

Angular PrimeNG GMap Properties:

options: It is the Google Maps API configuration object. It accepts any type & its default value is null.
overlays: It is the array of overlays to display. It accepts array type & its default value is null.
style: It is the inline style of the component. It accepts string type & its default value is null.
styleClass: It is the style class of the component. It accepts string type & its default value is null.

Syntax:

<p-gmap
    [options]="options">
</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, we have customized the options property to apply zoom and center in a location in India.

app.component.html

HTML

<h1 style="color: green;  
           text-align:center;"> 
  GeeksforGeeks 
</h1> 
<h3>Angular PrimeNG GMap Properties</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; 
  
    ngOnInit() { 
        this.options = { 
            center: { lat: 22.72105, lng: 88.373459 }, 
            zoom: 6, 
        }; 
  
    } 
}

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 are using overlays to add some pins in different locations.

app.component.html

HTML

<h1 style="color: green;  
           text-align:center;"> 
  GeeksforGeeks 
</h1> 
<h3>Angular PrimeNG GMap Properties</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: 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', 
            }), 
        ]; 
    } 
}

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