Overlays can be selected via ajax behaviors.
<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" showDetail="true"/>
<p:gmap id="gmap" center="36.890257,30.707417" zoom="13" type="HYBRID"
model="#{markerSelectionView.simpleModel}" style="width:100%;height:400px">
<p:ajax event="overlaySelect" listener="#{markerSelectionView.onMarkerSelect}" update="growl"/>
</p:gmap>
</h:form>
</div>
@Named
@ViewScoped
public class MarkerSelectionView implements Serializable {
private MapModel<Long> simpleModel;
private Marker<Long> marker;
@PostConstruct
public void init() {
simpleModel = 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);
//Basic marker
simpleModel.addOverlay(new Marker<>(coord1, "Konyaalti", 1L));
simpleModel.addOverlay(new Marker<>(coord2, "Ataturk Parki", 2L));
simpleModel.addOverlay(new Marker<>(coord3, "Karaalioglu Parki", 3L));
simpleModel.addOverlay(new Marker<>(coord4, "Kaleici", 4L));
}
public MapModel<Long> getSimpleModel() {
return simpleModel;
}
public void onMarkerSelect(OverlaySelectEvent<Long> event) {
marker = (Marker) event.getOverlay();
FacesContext.getCurrentInstance().addMessage(null,
new FacesMessage(FacesMessage.SEVERITY_INFO,
"Marker " + marker.getData() + " Selected", marker.getTitle()));
}
public Marker<Long> getMarker() {
return marker;
}
}