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:

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.