CODEWITHSUNDEEP
ajaxgoogle-mapsjsfprimefaces
user11216026
user11216026

Reputation:

Putting Longitude and Latitutes into Textbox with Gmap

I am trying to get longitude and latitude where I click the mouse from Google map. How can I do this?

I used Primefaces' EventView which I recompose accoeding to my project and called its method from JSF page

My xhtml page

<h:form>

<p:inputText value="#{userAddPlaceBean.place.placeName}" id="name">Place Name </p:inputText>

 <p:inputText value="#{userAddPlaceBean.place.lng}" id="lng"> Longitude </p:inputText>

<p:inputText value="#{userAddPlaceBean.place.lat}" id="lat"> Latitude </p:inputText>

 <p:commandButton action="#{userAddPlaceBean.addPlace()}" value="Add Place"></p:commandButton>

    <p:gmap id="gmap" center="41, 29" zoom="8" type="ROADMAP" style="width:100%;height:400px">

  <p:ajax event="pointSelect" listener="#{eventView.onPointSelect}" update="lng, lat" />

    </p:gmap>

</h:form>

My EventView class:

@ManagedBean
@ViewScoped
public class EventView {
    private double lat=0;
    private double lng=0;


     public void onStateChange(StateChangeEvent event) {
            LatLngBounds bounds = event.getBounds();
            int zoomLevel = event.getZoomLevel();

            addMessage(new FacesMessage(FacesMessage.SEVERITY_INFO, "Zoom Level", String.valueOf(zoomLevel)));
            addMessage(new FacesMessage(FacesMessage.SEVERITY_INFO, "Center", event.getCenter().toString()));
            addMessage(new FacesMessage(FacesMessage.SEVERITY_INFO, "NorthEast", bounds.getNorthEast().toString()));
            addMessage(new FacesMessage(FacesMessage.SEVERITY_INFO, "SouthWest", bounds.getSouthWest().toString()));
        }

        public void onPointSelect(PointSelectEvent event) {
            LatLng latlng = event.getLatLng();
            this.lat =   latlng.getLat();
             this.lng= latlng.getLng();
            FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "Point Selected", "Lat:" + latlng.getLat() + ", Lng:" + latlng.getLng()));

        }

        public void addMessage(FacesMessage message) {
            FacesContext.getCurrentInstance().addMessage(null, message);
        }

        public double getLat() {
            return lat;
        }

        public void setLat(double lat) {
            this.lat = lat;
        }

        public double getLng() {
            return lng;
        }

        public void setLng(double lng) {
            this.lng = lng;
        }

As a result when I click on map name of textboxes, longitude and latitude are increment like longitude longitude longitude ...

Result page: enter image description here

Upvotes: 0

Views: 86

Answers (1)

Kukeltje
Kukeltje

Reputation: 12337

You have text inside your p:inputText.

<p:inputText value="#{userAddPlaceBean.place.placeName}" id="name">Place Name </p:inputText>

<p:inputText value="#{userAddPlaceBean.place.lng}" id="lng"> Longitude </p:inputText>

<p:inputText value="#{userAddPlaceBean.place.lat}" id="lat"> Latitude </p:inputText>

This is not something that is supported. If you look at the client-side generated html, you'll most likely see something like 

<input id="....." />Longitude

This means the "Longitude" text is rendered outside the input. When the input is updated, only the <input id="..."/> is updated (JSF updates the html based on id) and the "Longitude" text stays where it is. Since the server side p:inputText is again rendered as <input id="....." />Longitude, what you see is a duplicated "Longitude"

<input id="....." />LongitudeLongitude

This effectively makes your question totally not maps related (you could have tested it with static values in a bean without a map). Effectively narrowing down your problem by creating a [mcve]

Upvotes: 1

Related Questions