primefaces GMap example not working and don't know why

Question

I have a problem with gmap4jsf. Here's the code:

<f:view contentType="text/html">
        <h:form id="form">
            <p:growl id="msg" showDetail="true"/>
                        <p:gmap id="gmap" center="36.890257,30.707417" zoom="13" type="HYBRID"

                                style="width:600px;height:400px"
                                model="#{addPlaceBean.emptyModel}"
                                onPointClick="handlePointClick(event);"
                                widgetVar="map" disableDoubleClickZoom="true">

                        </p:gmap>

                        <p:dialog widgetVar="dlg">
                            <h:form prependId="false">
                                <h:panelGrid columns="1">
                                    <h:outputLabel value="Are you sure?"/>


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

                                <h:inputHidden id="lat" value="#{addPlaceBean.lat}"/>
                                <h:inputHidden id="lng" value="#{addPlaceBean.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>
            </h:form>
    </f:view>

Here's the backing bean:

public void addMarker(ActionEvent actionEvent) { 
    System.err.println("Adding marker");
    Marker marker = new Marker(new LatLng(lat, lng), title);  
    emptyModel.addOverlay(marker);  

    addMessage(new FacesMessage(FacesMessage.SEVERITY_INFO, "Marker Added", "Lat:" + lat + ", Lng:" + lng));  
}

As You can see, it's taken from primefaces "Adding Markers" example of using gmap. The primefaces I'm using is 3.5. The thing is, that when I double click on map to add marker, nothing happens! The addMarker(ActionEvent actionEvent) is not executed, and javascript function handlePointClick(event) is executing till currentMarker = new google.maps.Marker({ position: new google.maps.LatLng(event.latLng.lat(), event.latLng.lng()) }); line and then breaks (checked with alert - it does not show after this line). No exceptions noticed. Frankly, I don't have any idea what is going on (javascript knowledge is not my good side). I've tried to remove <h:form> tags inside p:dialog and it's not working. When I change disableDoubleClickZoom attribute to false, the map is zooming in instead of showing the dialog.

Can You please tell mi what am I doing wrong or provide me a good example?

Thanks in advance.

Answer 1

replace

document.getElementById('lat').value = event.latLng.lat();

by

document.getElementById('form:lat').value = event.latLng.lat();

Answer 2

Ok,

I did it. Here's how:

   <p:gmap model="#{addPlaceBean.emptyModel}" center="41.381542, 2.122893" zoom="10" type="ROADMAP" style="width:600px;height:600px" id="map">  
         <p:ajax event="pointSelect" listener="#{addPlaceBean.onPointSelect}" update="msg map" />
         <p:ajax event="overlaySelect" listener="#{addPlaceBean.onMarkerSelect}" update="msg" />
   </p:gmap>

And in backing bean:

public void onPointSelect(PointSelectEvent event) {
    System.out.println("Add marker title: " + title);
    LatLng latlng = event.getLatLng();
    addMessage(new FacesMessage(FacesMessage.SEVERITY_INFO, "Dodano marker.", ""));
    emptyModel = new DefaultMapModel();
    Marker marker = new Marker(latlng, title);
    emptyModel.addOverlay(marker);
}