GMapGMap 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.
Documentation
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="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);
}
}
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);
}
}
Properties
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. |
onMapDragEnd | originalEvent: Google Maps dragend | Callback to invoke when map drag (i.e. pan) has ended. |
onMapReady | event.map: Google Maps Instance | Callback to invoke when the map is ready to be used. |
onOverlayClick | originalEvent: Google Maps MouseEvent overlay: Clicked overlay map: Map instance | Callback to invoke when an overlay is clicked. |
onOverlayDblClick | originalEvent: Google Maps MouseEvent overlay: Clicked overlay map: Map instance | Callback to invoke when an overlay is double clicked. |
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. |
onOverlayDragStart | originalEvent: Google Maps MouseEvent overlay: Clicked overlay map: Map instance | Callback to invoke when an overlay drag starts. |
onZoomChanged | originalEvent: Google Maps zoom_changed | Callback to invoke when zoom level has changed. |
Dependencies
Google Maps API.
Source
<p-toast [style]="{marginTop: '80px'}"></p-toast>
<p-gmap #gmap [style]="{'width':'100%','height':'320px', 'margin-bottom': '1em'}" [options]="options" [overlays]="overlays"
(onMapClick)="handleMapClick($event)" (onOverlayClick)="handleOverlayClick($event)" (onOverlayDragEnd)="handleDragEnd($event)"></p-gmap>
<button type="button" pButton label="Clear" icon="pi pi-times" (click)="clear()" style="margin-right:.25em"></button>
<button type="button" pButton label="Zoom In" icon="pi pi-plus" (click)="zoomIn(gmap.getMap())" style="margin-right:.25em"></button>
<button type="button" pButton label="Zoom Out" icon="pi pi-minus" (click)="zoomOut(gmap.getMap())"></button>
<p-dialog showEffect="fade" [(visible)]="dialogVisible" header="New Location">
<div class="ui-g ui-fluid" *ngIf="selectedPosition">
<div class="ui-g-2"><label for="title">Label</label></div>
<div class="ui-g-10"><input type="text" pInputText id="title" [(ngModel)]="markerTitle"></div>
<div class="ui-g-2"><label for="lat">Lat</label></div>
<div class="ui-g-10"><input id="lat" type="text" readonly pInputText [ngModel]="selectedPosition.lat()"></div>
<div class="ui-g-2"><label for="lng">Lng</label></div>
<div class="ui-g-10"><input id="lng" type="text" readonly pInputText [ngModel]="selectedPosition.lng()"></div>
<div class="ui-g-2"><label for="drg">Drag</label></div>
<div class="ui-g-10"><p-checkbox [(ngModel)]="draggable" binary="true" [style]="{'margin-top':'.25em'}"></p-checkbox></div>
</div>
<p-footer>
<div class="ui-dialog-buttonpane ui-helper-clearfix">
<button type="button" pButton label="Add Marker" icon="fa-plus" (click)="addMarker()"></button>
</div>
</p-footer>
</p-dialog>
export class GMapDemo implements OnInit {
options: any;
overlays: any[];
dialogVisible: boolean;
markerTitle: string;
selectedPosition: any;
infoWindow: any;
draggable: boolean;
constructor(private messageService: MessageService) {}
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) {
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.messageService.add({severity:'info', summary:'Marker Selected', detail: title});
}
else {
this.messageService.add({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.messageService.add({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 = [];
}
}