Any number of polygons can be displayed on map. Polygons can also respond to selection by via overlaySelect behavior.
<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="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
@ViewScoped
public class PolygonsView implements Serializable {
private MapModel<Long> 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<Long> polygon = new Polygon<>();
polygon.setData(1L);
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<Long> getPolygonModel() {
return polygonModel;
}
public void onPolygonSelect(OverlaySelectEvent<Long> event) {
Overlay<Long> overlay = event.getOverlay();
FacesContext.getCurrentInstance().addMessage(null,
new FacesMessage(FacesMessage.SEVERITY_INFO, "Polygon " + overlay.getData() + " Selected", null));
}
}