OpenStreetMap is straight forward. All you have to know is the GPS coordinate of the center of the map.
Source
<p:growl id="growl" showDetail="true" showSummary="true" globalOnly="false">
<p:autoUpdate />
</p:growl>
<pe:osmap style="width:100%; height:500px;"
center="36.890257,30.707417"
zoom="13" model="#{draggableMarkersView.draggableModel}">
<p:ajax event="markerDrag" listener="#{draggableMarkersView.onMarkerDrag}" update="growl"/>
</pe:osmap>
@Named
@ViewScoped
public class DraggableMarkersView implements Serializable {
private MapModel<Long> draggableModel;
@PostConstruct
public void init() {
draggableModel = 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);
// Draggable
draggableModel.addOverlay(new Marker<>(coord1, "Konyaalti", 1L));
draggableModel.addOverlay(new Marker<>(coord2, "Ataturk Parki", 2L));
draggableModel.addOverlay(new Marker<>(coord3, "Karaalioglu Parki", 3L));
draggableModel.addOverlay(new Marker<>(coord4, "Kaleici", 4L));
for (Marker<Long> premarker : draggableModel.getMarkers()) {
premarker.setDraggable(true);
}
}
public MapModel<Long> getDraggableModel() {
return draggableModel;
}
public void onMarkerDrag(MarkerDragEvent<Long> event) {
Marker<Long> marker = event.getMarker();
FacesContext.getCurrentInstance().addMessage(null,
new FacesMessage(FacesMessage.SEVERITY_INFO,
"Marker " + marker.getData() + " Dragged",
"Lat:" + marker.getLatlng().getLat() + ", Lng:" + marker.getLatlng().getLng()));
}
}