Any number of circles can be displayed on map. Circles 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="#{circlesView.circleModel}"> <p:ajax event="overlaySelect" listener="#{circlesView.onCircleSelect}" update="growl" /> </p:gmap> </h:form>
@Named @RequestScoped public class CirclesView implements Serializable { private MapModel circleModel; @PostConstruct public void init() { circleModel = new DefaultMapModel(); //Shared coordinates LatLng coord1 = new LatLng(36.879466, 30.667648); LatLng coord4 = new LatLng(36.885233, 30.702323); //Circle Circle circle1 = new Circle(coord1, 500); circle1.setStrokeColor("#d93c3c"); circle1.setFillColor("#d93c3c"); circle1.setFillOpacity(0.5); Circle circle2 = new Circle(coord4, 300); circle2.setStrokeColor("#00ff00"); circle2.setFillColor("#00ff00"); circle2.setStrokeOpacity(0.7); circle2.setFillOpacity(0.7); circleModel.addOverlay(circle1); circleModel.addOverlay(circle2); } public MapModel getCircleModel() { return circleModel; } public void onCircleSelect(OverlaySelectEvent event) { FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "Circle Selected", null)); } }