Any number of rectangles can be displayed on map. Rectangles 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" /> <p:gmap id="gmap" center="36.880257,30.687417" zoom="13" type="HYBRID" style="width:100%;height:400px" model="#{rectanglesView.rectangleModel}" > <p:ajax event="overlaySelect" listener="#{rectanglesView.onRectangleSelect}" update="growl" /> </p:gmap> </h:form>
@Named @RequestScoped public class RectanglesView implements Serializable { private MapModel rectangleModel; @PostConstruct public void init() { rectangleModel = new DefaultMapModel(); //Shared coordinates LatLng ne = new LatLng(36.879466, 30.667648); LatLng sw = new LatLng(36.885233, 30.702323); //Rectangle Rectangle rect = new Rectangle(new LatLngBounds(sw, ne)); rect.setStrokeColor("#d93c3c"); rect.setFillColor("#d93c3c"); rect.setFillOpacity(0.5); rectangleModel.addOverlay(rect); } public MapModel getRectangleModel() { return rectangleModel; } public void onRectangleSelect(OverlaySelectEvent event) { FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "Rectangle Selected", null)); } }