GMap is more powerful with interactive events on the map. There are many callbacks available to hook into events while clicking on the map, overlay clicking, and dragging the overlay.
The map component example with various types of overlay events along with event callbacks would be written as follows:
<p-gmap #gmap [options]="options" [overlays]="overlaysEvents"
(onMapReady)="handleMapReady($event)"
(onMapClick)="handleMapClick($event)"
(onOverlayClick)="handleOverlayClick($event)"
(onOverlayDragStart)="handleDragStart($event)"
(onOverlayDragEnd)="handleDragEnd($event)"
[styleClass]="'dimensions'">
</p-gmap>
Either existing events can be updated by clicking the overlays or new events can be created by clicking the map using the dialog component as follows:
<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" binary="true">
</p-checkbox></div>
</div>
</div>
<p-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>
</p-footer>
</p-dialog>
The component class has to define various overlay types on the initial page load, as shown here:
if (!this.overlaysEvents || !this.overlaysEvents.length) {
this.overlaysEvents = [
new google.maps.Marker({position: {lat: 14.6188043,
lng: 79.9630253}, title:'Talamanchi'}),
new google.maps.Marker({position: {lat: 14.4290442,
lng: 79.9456852}, title:'Nellore'}),
new google.maps.Polygon({paths: [
{lat: 14.1413809, lng: 79.8254154},
{lat: 11.1513809, lng: 78.8354154},
{lat: 15.1313809, lng: 78.8254154},
{lat: 15.1613809, lng: 79.8854154}],
strokeOpacity: 0.5, strokeWeight: 1,
fillColor: '#1976D2', fillOpacity: 0.35
}),
new google.maps.Circle({center: {lat: 14.1413809,
lng: 79.9513809}, fillColor: '#197642',
fillOpacity: 0.25, strokeWeight: 1, radius: 25000}),
new google.maps.Polyline({path: [{lat: 14.1413809,
lng: 79.9254154}, {lat: 14.6413809, lng: 79.9254154}],
geodesic: true, strokeColor: '#F0F000',
strokeOpacity: 0.5, strokeWeight: 2})];
}
The following snapshot shows how the overlay events can be created or updated:
The map component supports the following listed event callbacks:
Name | Parameter | Description |
onMapClick | event: Google Maps MouseEvent | When map is clicked except markers. |
onOverlayClick | originalEvent: Google Maps MouseEvent overlay: Clicked overlay map: Map instance |
When an overlay is clicked. |
onOverlayDragStart | originalEvent: Google Maps MouseEvent overlay: Clicked overlay map: Map instance |
When an overlay drag starts. |
onOverlayDrag | originalEvent: Google Maps MouseEvent overlay: Clicked overlay map: Map instance |
When an overlay is being dragged. |
onOverlayDragEnd | originalEvent: Google Maps MouseEvent overlay: Clicked overlay map: Map instance |
When an overlay drag ends. |
onMapReady | event.map: Google Maps instance | When a map is ready after loading. |
onMapDragEnd | originalEvent: Google Maps dragend | Callback to invoke when a map drag (that is, pan) has ended. |
onZoomChanged | originalEvent: Google Maps zoom_changed | Callback to invoke when a zoom level has changed. |
There are two ways of accessing the map API. One of them is the getMap() function of the GMap component (gmap.getMap()) and the other one is accessed through an event object (event.map). Once the map is ready then all map functions can be used based on our requirement. For example, the getZoom() method can be used to increase or decrease from the current state.
https://github.com/ova2/angular-development-with-primeng/tree/master/chapter8/gmap.