In order to use the component, the Google Maps API script should be referenced from the page, ideally in the header section:

<script src="http://maps.google.com/maps/api/js?sensor=true"
  type="text/javascript"></script>

The sensor parameter in the URL is mandatory, and it specifies whether the application requires a sensor, such as a GPS locator.

A simple definition of placing a map canvas on page is given here:

<p:gmap center="41.106261, 29.057465" zoom="10" type="hybrid"
  style="width:600px;height:400px" />

This output will be rendered as follows:

The gmap component depicts four attributes that should be set, as shown in the previous example, in order to use the map canvas properly. The center attribute defines the center of the map in the [latitude, longitude] format. The zoom attribute defines the zoom level of the map. Zoom levels between 0 (the lowest zoom level, in which the entire world can be seen on one map) and 21+ (down to individual buildings) are possible. The type attribute declares the type of the map with one of the following values: roadmap (the default value), satellite, hybrid, or terrain. The style attribute could be used to define dimensions of the map canvas.

It is also possible to bind the component to a model with an instance of org.primefaces.model.map.MapModel. PrimeFaces provides org.primefaces.model.map.DefaultMapModel as the default model implementation. DefaultMapModel is a wrapper class for markers, polylines, polygons, circles, and rectangles. Here's how you can bind the gmap component to a model:

<p:gmap center="41.106261, 29.057465" zoom="10" type="roadmap"
  style="width:600px;height:400px"
  model="#{mapBean.markerModel}" />