Any number of polygons can be displayed on map. Polygons can also respond to selection by via overlaySelect behavior.
Documentation<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script> <h:form prependId="false"> <p:growl id="growl" life="3000" showDetail="true" /> <p:gmap id="gmap" center="36.890257,30.707417" zoom="13" type="HYBRID" style="width:100%;height:400px" model="#{polygonsView.polygonModel}"> <p:ajax event="overlaySelect" listener="#{polygonsView.onPolygonSelect}" update="growl" /> </p:gmap> </h:form>
@Named @RequestScoped public class PolygonsView implements Serializable { private MapModel polygonModel; @PostConstruct public void init() { polygonModel = new DefaultMapModel(); //Shared coordinates LatLng coord1 = new LatLng(36.879466, 30.667648); LatLng coord2 = new LatLng(36.883707, 30.689216); LatLng coord3 = new LatLng(36.879703, 30.706707); //Polygon Polygon polygon = new Polygon(); polygon.getPaths().add(coord1); polygon.getPaths().add(coord2); polygon.getPaths().add(coord3); polygon.setStrokeColor("#FF9900"); polygon.setFillColor("#FF9900"); polygon.setStrokeOpacity(0.7); polygon.setFillOpacity(0.7); polygonModel.addOverlay(polygon); } public MapModel getPolygonModel() { return polygonModel; } public void onPolygonSelect(OverlaySelectEvent event) { FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "Polygon Selected", null)); } }