Any number of rectangles can be displayed on map. Rectangles 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"/>
<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
@ViewScoped
public class RectanglesView implements Serializable {
private MapModel<Long> 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<Long> rect = new Rectangle(new LatLngBounds(sw, ne));
rect.setData(1L);
rect.setStrokeColor("#d93c3c");
rect.setFillColor("#d93c3c");
rect.setFillOpacity(0.5);
rectangleModel.addOverlay(rect);
}
public MapModel<Long> getRectangleModel() {
return rectangleModel;
}
public void onRectangleSelect(OverlaySelectEvent<Long> event) {
Overlay<Long> overlay = event.getOverlay();
FacesContext.getCurrentInstance().addMessage(null,
new FacesMessage(FacesMessage.SEVERITY_INFO, "Rectangle " + overlay.getData() + " Selected", null));
}
}