Any number of circles can be displayed on map. Circles 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="#{circlesView.circleModel}">
<p:ajax event="overlaySelect" listener="#{circlesView.onCircleSelect}" update="growl"/>
</p:gmap>
</h:form>
</div>
@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));
}
}