Integrating Google Map Via Prime ng Plugin In Angular 5

Posted By : Shivam Gupta | 30-Apr-2018

angularjs

Google map is very important and necessary part of web application. Many web application uses this facility on our website to show the proper route from source to destination for a specific user who uses that application.

There are many plugins are available in the market for implementing such services in our web application, in which prime ng also support such service in a very easy way. It supports almost every feature which end-user requirements in its web application.

Import of Google map in our project: -

For importing any plugin at first user will install prime ng using given command:

npm install primeng --save

After successful installation, we just import google map in particular module, in which we will implement them.

import {GMapModule} from 'primeng/gmap';

After then we use given a code for showing routes and other google map features in our map.

               <p-gmap [options]="gMapOption" [style]="{'width':'100%','height':'500px'}" ></p-gmap>

export class GoogleMapComponent {

    gMapOption: any;
    
    overlays: any[];
    
    ngOnInit() {
        this.gMapOption = {
            center: {lat: 27.8776, lng: 33.76656},
            zoom: 10
        };
    }
}

Properties of Gmap Plugin: - there are a lot of properties which is used in google map implementation, some of them are given under: -

option: - option property is used for configuring an object.

overlay: - an array of overlay for display.

style: - this property is used for styling google map, like assigning width, height to google map.

styleClass: - for assigning any specific style class to end user.