Any number of rectangles can be displayed on map. Rectangles 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"/>
<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>
</div>
@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));
}
}