Any number of polygons can be displayed on map. Polygons can also respond to selection by via overlaySelect behavior.
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<div class="card">
<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>
</div>
@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));
}
}