Angular GMap

Angular GMap component provides integration with Google Maps API. This sample demontrates various uses cases like binding, overlays and events. Click the map to add a new item.

Setup

Refer to PrimeNG setup documentation for download and installation steps for your environment.

Import

import {GMapModule} from 'primeng/gmap';

Getting Started

A map is initialized with options and dimensions. Refer to the google maps api for the list of available options.

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

export class MyModel {

    options: any;

    overlays: any[];

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

}

Overlays

GMap can display any type of overlay 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.

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

export class MyModel {

    options: any;

    overlays: any[];

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

        this.overlays = [
            new google.maps.Marker({position: {lat: 36.879466, lng: 30.667648}, title:"Konyaalti"}),
            new google.maps.Marker({position: {lat: 36.883707, lng: 30.689216}, title:"Ataturk Park"}),
            new google.maps.Marker({position: {lat: 36.885233, lng: 30.702323}, title:"Oldtown"}),
            new google.maps.Polygon({paths: [
                {lat: 36.9177, lng: 30.7854},{lat: 36.8851, lng: 30.7802},{lat: 36.8829, lng: 30.8111},{lat: 36.9177, lng: 30.8159}
            ], strokeOpacity: 0.5, strokeWeight: 1,fillColor: '#1976D2', fillOpacity: 0.35
            }),
            new google.maps.Circle({center: {lat: 36.90707, lng: 30.56533}, fillColor: '#1976D2', fillOpacity: 0.35, strokeWeight: 1, radius: 1500}),
            new google.maps.Polyline({path: [{lat: 36.86149, lng: 30.63743},{lat: 36.86341, lng: 30.72463}], geodesic: true, strokeColor: '#FF0000', strokeOpacity: 0.5, strokeWeight: 2})
        ];
    }
}

Events

GMap provides common callbacks to hook into events including map click, overlay click and overlay dragging.

<p-gmap [options]="options" [overlays]="overlays" [style]="{'width':'100%','height':'320px'}"
            (onMapClick)="handleMapClick($event)" (onOverlayClick)="handleOverlayClick($event)"></p-gmap>

export class MyModel {

    options: any;

    overlays: any[];

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

        this.overlays = [
            new google.maps.Marker({position: {lat: 36.879466, lng: 30.667648}, title:"Konyaalti"}),
            new google.maps.Marker({position: {lat: 36.883707, lng: 30.689216}, title:"Ataturk Park"}),
            new google.maps.Marker({position: {lat: 36.885233, lng: 30.702323}, title:"Oldtown"}),
            new google.maps.Polygon({paths: [
                {lat: 36.9177, lng: 30.7854},{lat: 36.8851, lng: 30.7802},{lat: 36.8829, lng: 30.8111},{lat: 36.9177, lng: 30.8159}
            ], strokeOpacity: 0.5, strokeWeight: 1,fillColor: '#1976D2', fillOpacity: 0.35
            }),
            new google.maps.Circle({center: {lat: 36.90707, lng: 30.56533}, fillColor: '#1976D2', fillOpacity: 0.35, strokeWeight: 1, radius: 1500}),
            new google.maps.Polyline({path: [{lat: 36.86149, lng: 30.63743},{lat: 36.86341, lng: 30.72463}], geodesic: true, strokeColor: '#FF0000', strokeOpacity: 0.5, strokeWeight: 2})
        ];
    }

    handleMapClick(event) {
        //event: MouseEvent of Google Maps api
    }

    handleOverlayClick(event) {
        //event.originalEvent: MouseEvent of Google Maps api
        //event.overlay: Clicked overlay
        //event.map: Map instance
    }
}

Google Maps API

In case you need to access the map instance directly, use the getMap() method.

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

<button type="button" pButton label="Zoom In" icon="pi-search-plus" (click)="zoomIn(gmap.getMap())"></button>

export class MyModel {

    options: any;

    overlays: any[];

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

    zoomIn(map) {
        map.setZoom(map.getZoom()+1);
    }
}

Another option is to to get the map object directly after init via (onMapReady) event. In the example below, google.maps.Map is used for adjusting map bounds to markers.

<p-gmap #gmap [options]="options" [overlays]="overlays" [style]="mapStyle"
    (onMapReady)="setMap($event)"></p-gmap>

Then from your component you would write

export class MyModel {

    options: any;

    overlays: any[];

    map: google.maps.Map;

    setMap(event) {
        this.map = event.map;
    }

    ngOnInit() {
        let bounds = new google.maps.LatLngBounds();
        this.overlays = [
            new google.maps.Marker({position: {lat: 36.879466, lng: 30.667648}, title:"Konyaalti"}),
            new google.maps.Marker({position: {lat: 36.883707, lng: 30.689216}, title:"Ataturk Park"}),
            new google.maps.Marker({position: {lat: 36.885233, lng: 30.702323}, title:"Oldtown"}),
        ]
        // ... extend bounds
        this.overlays.forEach(marker => {
            bounds.extend(marker.getPosition());
        });

        setTimeout(()=> { // map will need some time to load
            this.map.fitBounds(bounds); // Map object used directly
        }, 1000);
    }
}

Theming

GMap supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeNG GMap showcase for demos and documentation.