How to create a draggable marker?

Question

Code below it's able to create a marker.

But I want to create a draggable marker, problem is that is not sending the click event to the server after the marker has been created.

When the markes is created the draggable flag is set to true.

Any ideas?

<p:gmap id="gmap" center="36.890257,30.707417" zoom="13" type="HYBRID"

style="width:600px;height:400px"
model="#{mapBean.emptyModel}"
onPointClick="handlePointClick(event);"
widgetVar="map">
<p:ajax event="markerDrag" listener="#{mapBean.onMarkerDrag}" update="messages" />
</p:gmap>

<p:dialog widgetVar="dlg" effect="FADE" effectDuration="0.5" close="false" fixedCenter="true">
<h:form prependId="false">
<h:panelGrid columns="1">
<h:outputLabel value="Are you sure?"/>


<f:facet name="footer">
<p:commandButton value="Yes"
actionListener="#{mapBean.addMarker}"
update=":messages"
oncomplete="markerAddComplete()"/>
<p:commandButton value="Cancel" onclick="return cancel()"/>
</f:facet>
</h:panelGrid>

<h:inputHidden id="lat" value="#{mapBean.lat}"/>
<h:inputHidden id="lng" value="#{mapBean.lng}"/>
</h:form>
</p:dialog>

<script type="text/javascript">
var currentMarker = null;

function handlePointClick(event) {

console.log("click event");

console.log(event.marker);

if (currentMarker == null) {
document.getElementById('lat').value = event.latLng.lat();
document.getElementById('lng').value = event.latLng.lng();

currentMarker = new google.maps.Marker({
position: new google.maps.LatLng(event.latLng.lat(), event.latLng.lng())
});

map.addOverlay(currentMarker);

dlg.show();
}
}

function markerAddComplete() {
//currentMarker = null; Only one can be added.
dlg.hide();
}

function cancel() {
dlg.hide();
currentMarker.setMap(null);
currentMarker = null;

return false;
}
</script>

Answer 1

Problem was being caused with the attribute onPointClick of p:gmap. This is a Javascript Callback to the function handlePointClickEvent() in this case.

So I setted this attribute with an EL expression, so after creating the marker, this expression would evaluate to null, component p:gmap updates in an AJAX call, and draggable events work now ;)