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

Import


import {GMap} from 'primeng/primeng';

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="fa-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);
    }
}

Attributes

Name Type Default Description
options any null Google Maps API configuration object.
overlays array null An array of overlays to display.
style string null Inline style of the component.
styleClass string null Style class of the component.

Events

Name Parameters Description
onMapClick event: Google Maps MouseEvent Callback to invoke when map is clicked except markers.
onOverlayClick originalEvent: Google Maps MouseEvent
overlay: Clicked overlay
map: Map instance
Callback to invoke when an overlay is clicked.
onOverlayDragStart originalEvent: Google Maps MouseEvent
overlay: Clicked overlay
map: Map instance
Callback to invoke when an overlay drag starts.
onOverlayDrag originalEvent: Google Maps MouseEvent
overlay: Clicked overlay
map: Map instance
Callback to invoke when an overlay is being dragged.
onOverlayDragEnd originalEvent: Google Maps MouseEvent
overlay: Clicked overlay
map: Map instance
Callback to invoke when an overlay drag ends.

Dependencies

Google Maps API.


<p-growl [value]="msgs"></p-growl>

<p-gmap #gmap [style]="{'width':'100%','height':'320px'}" [options]="options" [overlays]="overlays" 
    (onMapClick)="handleMapClick($event)" (onOverlayClick)="handleOverlayClick($event)" (onOverlayDragEnd)="handleDragEnd($event)"></p-gmap>
<button type="button" pButton label="Clear" icon="fa-close" (click)="clear()" style="margin-top:10px"></button>
<button type="button" pButton label="Reset" icon="fa-map-marker" (click)="initOverlays()" style="margin-top:10px"></button>
<button type="button" pButton label="Zoom In" icon="fa-search-plus" (click)="zoomIn(gmap.getMap())" style="margin-top:10px"></button>
<button type="button" pButton label="Zoom Out" icon="fa-search-minus" (click)="zoomOut(gmap.getMap())" style="margin-top:10px"></button>

<p-dialog showEffect="fade" [(visible)]="dialogVisible" header="New Location">
    <div class="ui-grid ui-grid-pad ui-fluid" *ngIf="selectedPosition">
        <div class="ui-grid-row">
            <div class="ui-grid-col-2"><label for="title">Label</label></div>
            <div class="ui-grid-col-10"><input type="text" pInputText id="title" [(ngModel)]="markerTitle"></div>
        </div>
        <div class="ui-grid-row">
            <div class="ui-grid-col-2"><label for="lat">Lat</label></div>
            <div class="ui-grid-col-10"><input id="lat" type="text" readonly pInputText [ngModel]="selectedPosition.lat()"></div>
        </div>
        <div class="ui-grid-row">
            <div class="ui-grid-col-2"><label for="lng">Lng</label></div>
            <div class="ui-grid-col-10"><input id="lng" type="text" readonly pInputText [ngModel]="selectedPosition.lng()"></div>
        </div>
        <div class="ui-grid-row">
            <div class="ui-grid-col-2"><label for="drg">Drag</label></div>
            <div class="ui-grid-col-10"><p-checkbox [(ngModel)]="draggable"></p-checkbox></div>
        </div>
    </div>
    <footer>
        <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
            <button type="button" pButton label="Add Marker" icon="fa-plus" (click)="addMarker()"></button>
        </div>
    </footer>
</p-dialog>


export class GMapDemo implements OnInit {

    options: any;
    
    overlays: any[];
    
    dialogVisible: boolean;
    
    markerTitle: string;
    
    selectedPosition: any;
    
    infoWindow: any;
    
    draggable: boolean;
    
    msgs: Message[] = [];

    ngOnInit() {
        this.options = {
            center: {lat: 36.890257, lng: 30.707417},
            zoom: 12
        };
        
        this.initOverlays();
        
        this.infoWindow = new google.maps.InfoWindow();
    }
    
    handleMapClick(event) {
        this.dialogVisible = true;
        this.selectedPosition = event.latLng;
    }
    
    handleOverlayClick(event) {
        this.msgs = [];
        let isMarker = event.overlay.getTitle != undefined;
        
        if(isMarker) {
            let title = event.overlay.getTitle();
            this.infoWindow.setContent('
' + title + '
'); this.infoWindow.open(event.map, event.overlay); event.map.setCenter(event.overlay.getPosition()); this.msgs.push({severity:'info', summary:'Marker Selected', detail: title}); } else { this.msgs.push({severity:'info', summary:'Shape Selected', detail: ''}); } } addMarker() { this.overlays.push(new google.maps.Marker({position:{lat: this.selectedPosition.lat(), lng: this.selectedPosition.lng()}, title:this.markerTitle, draggable: this.draggable})); this.markerTitle = null; this.dialogVisible = false; } handleDragEnd(event) { this.msgs = []; this.msgs.push({severity:'info', summary:'Marker Dragged', detail: event.overlay.getTitle()}); } initOverlays() { if(!this.overlays||!this.overlays.length) { 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}) ]; } } zoomIn(map) { map.setZoom(map.getZoom()+1); } zoomOut(map) { map.setZoom(map.getZoom()-1); } clear() { this.overlays = []; } }