import {GMap} from 'primeng/primeng';
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
};
}
}
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})
];
}
}
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
}
}
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);
}
}
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. |
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. |
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 = [];
}
}