Map can respond to various events such as click, zoom change and overlay select.
<script src="https://maps.google.com/maps/api/js?key=AIzaSyCvCDkYieuUBmMWon_mfLAfjuaeuosuqow&sensor=false"></script>
<div class="card">
<h:form prependId="false">
<p:growl id="messages" showDetail="true" life="2000"/>
<p:gmap id="gmap" center="41.381542, 2.122893" zoom="15" type="ROADMAP" style="width:100%;height:400px">
<p:ajax event="stateChange" listener="#{eventView.onStateChange}" update="messages"/>
<p:ajax event="pointSelect" listener="#{eventView.onPointSelect}" update="messages"/>
</p:gmap>
</h:form>
</div>
@Named
@RequestScoped
public class EventView implements Serializable {
public void onStateChange(StateChangeEvent event) {
LatLngBounds bounds = event.getBounds();
int zoomLevel = event.getZoomLevel();
addMessage(new FacesMessage(FacesMessage.SEVERITY_INFO, "Zoom Level", String.valueOf(zoomLevel)));
addMessage(new FacesMessage(FacesMessage.SEVERITY_INFO, "Center", event.getCenter().toString()));
addMessage(new FacesMessage(FacesMessage.SEVERITY_INFO, "NorthEast", bounds.getNorthEast().toString()));
addMessage(new FacesMessage(FacesMessage.SEVERITY_INFO, "SouthWest", bounds.getSouthWest().toString()));
}
public void onPointSelect(PointSelectEvent event) {
LatLng latlng = event.getLatLng();
FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "Point Selected",
"Lat:" + latlng.getLat() + ", Lng:" + latlng.getLng()));
}
public void addMessage(FacesMessage message) {
FacesContext.getCurrentInstance().addMessage(null, message);
}
}