Any number of polylines can be displayed on map. Polylines 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.890257,30.707417" zoom="13" type="HYBRID" style="width:100%;height:400px"
model="#{polylinesView.polylineModel}">
<p:ajax event="overlaySelect" listener="#{polylinesView.onPolylineSelect}" update="growl"/>
</p:gmap>
</h:form>
</div>
@Named
@ViewScoped
public class PolylinesView implements Serializable {
private MapModel<Long> polylineModel;
@PostConstruct
public void init() {
polylineModel = new DefaultMapModel<>();
//Shared coordinates
LatLng coord1 = new LatLng(36.879466, 30.667648);
LatLng coord2 = new LatLng(36.883707, 30.689216);
LatLng coord3 = new LatLng(36.879703, 30.706707);
LatLng coord4 = new LatLng(36.885233, 30.702323);
//Polyline
Polyline<Long> polyline = new Polyline<>();
polyline.setData(1L);
polyline.getPaths().add(coord1);
polyline.getPaths().add(coord2);
polyline.getPaths().add(coord3);
polyline.getPaths().add(coord4);
polyline.setStrokeWeight(10);
polyline.setStrokeColor("#FF9900");
polyline.setStrokeOpacity(0.7);
polylineModel.addOverlay(polyline);
}
public MapModel<Long> getPolylineModel() {
return polylineModel;
}
public void onPolylineSelect(OverlaySelectEvent<Long> event) {
Overlay<Long> overlay = event.getOverlay();
FacesContext.getCurrentInstance().addMessage(null,
new FacesMessage(FacesMessage.SEVERITY_INFO, "Polyline " + overlay.getData() + " Selected", null));
}
}