The GMap component provides an integration with the Google Maps API in order to use it efficiently with less configuration. It covers major features such as binding options, various overlays, events, and so on. This component requires the Google Maps API, hence it needs to be referred in the script section.

The JS resource file needs to be added in a script section, which has to be utilized by the GMap component, as shown here:

<script type="text/javascript"   
  src="https://maps.google.com/maps/api/js?
  key=AIzaSyA6Ar0UymhiklJBzEPLKKn2QHwbjdz3XV0"></script>

A basic example of GMap usage with map options would be as follows:

<p-gmap [options]="options" [styleClass]="'dimensions'">
</p-gmap>

The option has to be defined with coordinates/positional dimensions (latitude and longitude), zoom options, and so on during the page load as follows:

this.options = {
  center: {lat: 14.4426, lng: 79.9865},
  zoom: 12
};

The following screenshot shows a snapshot result of the GMap example:

As per the preceding snapshot, the exact area location is displayed based on the co-ordinates provided and the mode of visibility through zoom settings.