8 Replies Latest reply on May 23, 2008 4:00 PM by dam

    GMap and storing lat and lng values

    nejck

      I'm trying to use GMap for letting the user show where he lives... The problem I have is that I can't find the way of storring the position. I can get lan and lng into the normal form input element, but not into h:form h:inputhidden


      If anyone has an idea on how to store data from normal form to the database or how to get data into h:form, please help me ;)


      for the ones that don't know, gmap uses javascript, meaning I have javascript variables with the values I would like to store to database.


      thanks in advance,
      nejck

        • 1. Re: GMap and storing lat and lng values
          shane.bryzak

          You could either give your form and input control an id (then refer  to it using document.getElementById("formId:controlId").value = xxx), or alternatively you could use Seam Remoting to call a method that persists the values.

          • 2. Re: GMap and storing lat and lng values
            aa.no.one.pacific.net.au

            I have just been doing the same thing.  I have a draggable marker on the map that I have added event listeners to...



            marker = new GMarker(point, {draggable: true});
            gmap.addOverlay(marker);
            
            function showDetailBalloon() {
                marker.openInfoWindowHtml(address);
            }
            
            function closeInfoBalloon() {     
              gmap.closeInfoWindow();
            }
            
            function assignPoint() {     
              document.getElementById('addressForm:latitude').setAttribute('value',this.getPoint().lat());     
              document.getElementById('addressForm:longitude').setAttribute('value',this.getPoint().lng());
              var remotePoint = Seam.Component.newInstance("geoPoint");
              remotePoint.setLatitude(this.getPoint().lat());
              remotePoint.setLongitude(this.getPoint().lng());
            
              Seam.Remoting.getContext().setConversationId("#{conversation.id}");
              Seam.Component.getInstance("addressRemoteAction").setLocation(remotePoint);
            }
                                          
            GEvent.addListener(marker, 'click', showDetailBalloon);
            GEvent.addListener(marker, 'dragstart', closeInfoBalloon);
            GEvent.addListener(marker, 'dragend', assignPoint);
            



            Mainly derived from Dan Allen's article, and the Google API's.  It updates the input fields whenever the marker is released, and then on a subsequent form update, saves those to the database.  However, I was really wanting to update the coords via @WebRemote interfaces.  The above sends off the information as displayed in the Seam debugger, and the target session bean gets hit, but the geoPoint coords are missing from the geoPoint object on the server side.  So yet to work out why that is, but I suspect I may have an idea.  However, I have the fall back with the web form for saving the data if I cannot find the solution.


            So it sounds like I am about where you are, but I am able to save my coords to the database from the input fields, whereas for some reason, you are not?  So I thought I would share with you my approach so that you could potentially see if there was any difference and perhaps resolve your issue.


            Cheers.


            Andy

            • 3. Re: GMap and storing lat and lng values
              nejck

              I managed to get the coordinates to the bean with the help of Remoting. Thanks for you're help.


              Nejck

              • 4. Re: GMap and storing lat and lng values
                stereoscope

                hey there !


                well i did that the same way!
                but what if you want to get those coordinates out of the database to the gmap !?


                any idea! i tried to build a file containing json data but cant put the file into the right place to make it accessable to javascript !


                is there any other way to come along with this issue ! ?


                cheers

                • 5. Re: GMap and storing lat and lng values
                  nejck

                  I simply used seam variables inside javascript...


                  var mark = new GLatLng(#{user.lat},#{user.lng});
                    map.addOverlay(new GMarker(mark));


                  cheers,
                  nejck

                  • 6. Re: GMap and storing lat and lng values
                    stereoscope

                    cool !


                    didn't realized that this works! i'll try it out !


                    i think this works for one coordinate! but what if i want to list a  hole bunch of coordinates and places on the map !?


                    cheers

                    • 7. Re: GMap and storing lat and lng values
                      nejck

                      I think it could work... maybe create a javascript function that has coords of 1 point as arguments and call it each time for every point.... I think there is some kind of foreach tag in xhtml...


                      cheers,
                      nejck

                      • 8. Re: GMap and storing lat and lng values
                        dam

                        I think you could do it in javascript and with seam remote, something like this:


                        in a gmap.js file


                        var gmapBean = Seam.Component.getInstance("gmapBean");
                        
                        function init() {
                              addMarkers();         
                        }
                        
                        function addMarkers() {
                             
                             /* Callback */
                             function onResult(markers) {
                                  for (var i = 0; i < markers.length; i++) {
                                  addMarker(markers[i]);
                                  }
                             }
                             gmapBean.getMarkers(onResult);
                        }
                        
                        function addMarker(marker) {
                         // add you marker to the map
                         ...
                        }
                        



                        And in a gmapBean


                        @WebRemote
                        public List<Marker> getMarkers() {
                        ...
                        }
                        



                        And then you need to set

                        oninit=init()

                        in the google maps tag. And register the javascript file in the xhtml page.


                        /Dam