add dragable marker to google map - primefaces

Question

I have seen in PrimeFaces demo an example on Adding markers and on Draggable markers.i flow the two examples and it 's working, and know i'm trying to integrate both these examples into one working example but i couldn't ( i m' a biggenner ) could you please help me .
this is the example of adding marker :
this is the ponitBean:
#Component
#Scope
#ManagedBean (name = "pointBean")
public class PointBean {
// =========================================================================
// ATTRIBUTES
// =========================================================================
private Point point ;
private PointService pointService;
private MapModel emptyModel;
// =========================================================================
// CONSTRUCTORS
// =========================================================================
public PointBean() {
super();
// TODO Auto-generated constructor stub
}
// =========================================================================
// METHODS
// =========================================================================
public void savePoint(){
pointService.savePoint(point);
addMarker();
}
#SuppressWarnings("unchecked")
public List<Point>getAllPoint(){
return pointService.getAllPoint();
}
#PostConstruct
public void reint(){
point = new Point();
}
#PostConstruct
public void init() {
emptyModel = new DefaultMapModel();
}
public void addMarker() {
Marker marker=new Marker(new LatLng(point.getLatitude(), point.getLongitude()));
emptyModel.addOverlay((marker));
FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "Marker Added", "Lat:" + point.getLatitude() + ", Lng:" + point.getLongitude()));
}
// =========================================================================
// GETTERS & SETTERS
// =========================================================================
public Point getPoint() {
return point;
}
public void setPoint(Point point) {
this.point = point;
}
public MapModel getEmptyModel() {
return emptyModel;
}
public void setEmptyModel(MapModel emptyModel) {
this.emptyModel = emptyModel;
}
#Autowired
public void setPointService(PointService pointService) {
this.pointService = pointService;
}
}
and this is my xhtml file :
<h:head>
<title>Home</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
</h:head>
<h:body>
<p:growl id="messages" showDetail="true" />
<p:growl id="growl" showDetail="true" />
<p:gmap id="gmap" center="36.890257,10.365411" zoom="13" type="HYBRID" style="width:600px;height:400px"
model="#{pointBean.emptyModel}" onPointClick="handlePointClick(event);" widgetVar="map" >
</p:gmap>
<p:dialog widgetVar="dlg" showEffect="fade">
<h:form prependId="false">
<h:panelGrid columns="2">
<h:outputLabel for="title" value="Title:" />
<p:inputText id="title" value="#{pointBean.point.titre}" />
<f:facet name="footer">
<p:commandButton value="Add" actionListener="#{pointBean.savePoint}" update=":messages" oncomplete="markerAddComplete()" />
<p:commandButton value="Cancel" onclick="return cancel()" />
</f:facet>
</h:panelGrid>
<h:inputHidden id="longitude" value="#{pointBean.point.latitude}" />
<h:inputHidden id="latitude" value="#{pointBean.point.longitude}" />
</h:form>
</p:dialog>
<script type="text/javascript">
var currentMarker = null;
function handlePointClick(event) {
if(currentMarker === null) {
document.getElementById('longitude').value = event.latLng.lng();
document.getElementById('latitude').value = event.latLng.lat();
currentMarker = new google.maps.Marker({
position:new google.maps.LatLng(event.latLng.lat(), event.latLng.lng())
});
PF('map').addOverlay(currentMarker);
PF('dlg').show();
}
}
function markerAddComplete() {
var title = document.getElementById('title');
currentMarker.setTitle(title.value);
title.value = "";
currentMarker = null;
PF('dlg').hide();
}
function cancel() {
PF('dlg').hide();
currentMarker.setMap(null);
currentMarker = null;
return false;
}
</script>
</h:body>
</html>
what should i add in order to have an dragable marker !!
this is the example for the dragable marker from primefaces :
this is the dragableMarkerbean :
#ManagedBean
#ViewScoped
public class DraggableMarkersView implements Serializable {
private MapModel draggableModel;
private Marker marker;
#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"));
draggableModel.addOverlay(new Marker(coord2, "Ataturk Parki"));
draggableModel.addOverlay(new Marker(coord3, "Karaalioglu Parki"));
draggableModel.addOverlay(new Marker(coord4, "Kaleici"));
for(Marker premarker : draggableModel.getMarkers()) {
premarker.setDraggable(true);
}
}
public MapModel getDraggableModel() {
return draggableModel;
}
public void onMarkerDrag(MarkerDragEvent event) {
marker = event.getMarker();
FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "Marker Dragged", "Lat:" + marker.getLatlng().getLat() + ", Lng:" + marker.getLatlng().getLng()));
}
}
and this is the xhtml :
<h:form>
<p:growl id="growl" showDetail="true" />
<p:gmap id="gmap" center="36.890257,30.707417" zoom="13" type="HYBRID" model="#{draggableMarkersView.draggableModel}" style="width:600px;height:400px">
<p:ajax event="markerDrag" listener="#{draggableMarkersView.onMarkerDrag}" update="growl" />
</p:gmap>
</h:form>
please could you help me!! what should i add in order to have a draggable marker in the first example !!

Answer 1

You have to add in javascript handlePointClick.
add: currentMarker.setDraggable(true);
after: currentMarker = new google.maps.Marker ....