Question

I’m writing a simple App Engine app.

I have a simple page that allows a user to move a marker on a Google map instance. Each time the user drops the marker, I want to return the long/lat to my Python app.

function initialize() {

  ... // Init map

  var marker = new GMarker(center, {draggable: true});
  GEvent.addListener(marker, "dragend", function() {
    // I want to return the marker.x/y to my app when this function is called ..
  });

}

To my (admittedly limited) knowledge, I should be:

1). Returning a JSON structure with my required data in the listener callback above

2). In my webapp.RequestHandler Handler class, trying to retrieve the JSON structure during the post method.

I would very much like to pass this JSOn data back to the app without causing a page reload (which is what has happened when I’ve used various post/form.submit methods so far).

Can anyone provide me with some psuedo code or an example on how I might achieve what I’m after?

Thanks.

Answer 1

If you don’t want the page to update, then you need to use a XMLHttpRequest. In this example, i’m using the client-side function Request(function_name, opt_argv) and server-side RPCHandler from this Google App Engine example. I haven’t tested this, but it would look like:

Client-side Javascript

function initialize() {

  ... // Init map

  var marker = new GMarker(center, {draggable: true});
  GEvent.addListener(marker, "dragend", function(position) {
    Request('update_marker_position', [ unique_identifier, position.lat(), position.lng() ] );
  });

}

Server-side Python

# Create database model for LatLng position
class LatLng(db.Model):
    lat = db.IntegerProperty()
    lng = db.IntegerProperty()

...

class RPCMethods:
    """ Defines the methods that can be RPCed.
    NOTE: Do not allow remote callers access to private/protected "_*" methods.
    """

    def update_marker_position(self, *args):
        # args[0] - unique identifier, say GAE db key
        # args[1] - lat
        # args[2] - lng
        # Note: need to do some checking that lat and lng are valid
        
        # Retrieve key and update position
        position = LatLng.get(db.Key(args[0])
        if position:
            position.lat = args[1]
            position.lng = args[2]
        else:
            position = LatLng(
                lat= args[1], 
                lng= args[2]
            )
        position.put()
        
        payload = {
            'lat': args[1],
            'lng': args[2],
        }
        return payload

You’ll need to create the db entry when you serve up the page, and store the db key client side. You could also use some other unique identifier. In this case, I assumed you stored it as a global variable ‘unique_identifier’.

As well, you’ll need to add a callback function to handle the returning payload (with members ‘lat’ and ‘lng’). From the example, I believe you just add your callback function as the zeroth parameter in the opt_argv array of Request. I hope this helps.