Help

Controls

PermLinkWikiLink

Built with Seam

You can find the full source code for this website in the Seam package in the directory /examples/wiki. It is licensed under the LGPL.

Forum: Seam Users Forum ListTopic List
18. May 2008, 22:23 CET | Link

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

8 Replies:
19. May 2008, 04:46 CET | Link

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.

22. May 2008, 06:29 CET | Link

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

22. May 2008, 13:59 CET | Link

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

Nejck

23. May 2008, 13:03 CET | Link

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

23. May 2008, 13:09 CET | Link

I simply used seam variables inside javascript...

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

cheers, nejck

23. May 2008, 13:58 CET | Link

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

23. May 2008, 14:52 CET | Link

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

23. May 2008, 16:00 CET | Link

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