Setting / Getting Property Values from within JQuery Plugin

Question

Greetings.

I am trying to modify Shawn Mayzes JQuery Google Maps plugin to support retrieving a "current" latlng property.

Shawn's plugin and examples can be found here: http://www.mayzes.org/googlemaps.jquery.examples.html

The example on which I am focusing is "Map Geocoding Simple" (http://www.mayzes.org/fragments/new/geocode.html). The relevant function within the plugin is:

    if ( opts.geocode ) {
        geocoder = new GClientGeocoder();
        geocoder.getLatLng(opts.geocode, function(center) {
            if (!center) {
                alert(address + " not found");
            }
            else {
            $.googleMaps.gMap.setCenter(center, opts.depth);
                $.googleMaps.latitude = center.x;
                $.googleMaps.longitude = center.y;
            }
    });
    }
    else {
        // Latitude & Longitude Center Point
        var center  = $.googleMaps.mapLatLong(opts.latitude, opts.longitude);
        // Set the center of the Map with the new Center Point and Depth
        $.googleMaps.gMap.setCenter(center, opts.depth);
    }

Now, what I want to do is retrieve the "center point", the lat / long value of the center point, after passing ad address to the plugin.

So, in my code when I pass an address, thus:

$('#map').googleMaps({
    geocode: add
}); 

I would like some means of of retrieving the lat / long like this:

$('#map').getLatLng();

...or as a callback function within the plugin instantiation (like they do in the JQuery UI Tabs control).

Those would be the "ideal" solutions, but in the meantime, I was willing to "content myself" with a hack. Why not use the Jquery "data" function like this?

    if ( opts.geocode ) {
        geocoder = new GClientGeocoder();
        geocoder.getLatLng(opts.geocode, function(center) {
            if (!center) {
                alert(address + " not found");
            }
            else {

            alert('center--'+center);
            **$(this).data('latlng', center);**

            $.googleMaps.gMap.setCenter(center, opts.depth);
                $.googleMaps.latitude = center.x;
                $.googleMaps.longitude = center.y;
            }
    });
    }
    else {
        // Latitude & Longitude Center Point
        var center  = $.googleMaps.mapLatLong(opts.latitude, opts.longitude);
        // Set the center of the Map with the new Center Point and Depth
        $.googleMaps.gMap.setCenter(center, opts.depth);
    }

Then I would be able to retrieve the latlng value by simply referencing:

 $('#map').data('latlng');

But, alas, this does not work at all.

Any guidance / hints / solutions to similar problems would be of great assistance.

Shameless

//////////////////////////////////////////////////////// Response to Matchu ////////////////////////////////////////////////////////

Thank you for the idea. Here is what I tried:

$.googleMaps = {
    mapsConfiguration: function(opts) {
    var ThisMap = this;
        // GEOCODE
        if ( opts.geocode ) {
            geocoder = new GClientGeocoder();
            geocoder.getLatLng(opts.geocode, function(center) {
                if (!center) {
                    alert(address + " not found");
                }
                else {

                alert('center--'+center);
                ThisMap.data('latlng', center);

                    $.googleMaps.gMap.setCenter(center, opts.depth);...

The "var ThisMap = this" is on Line 3 of the plugin, which seems pretty "up high" to me :)

I try to retrieve the "latlng" using:

    var map = $('#map').googleMaps({
        geocode: add
    }); 

alert('latlng--'+map.data('latlng'));

I know that what needs to happen here is possible because I have used similar usage pattersn with other plugins. Unfortunately, those plugins seem to be pretty "advanced" and I have not seen an example of storing and retrieving current property values in any of the simple JQuery Plugin tutorials. Has anyone else?

Answer 1

My first guess is that this doesn't refer to the element anymore. Without seeing the entire code, my guess is that this is reset inside the anonymous function started on line 3 of that snippet. Try storing it to a variable above that:

if ( opts.geocode ) {
    geocoder = new GClientGeocoder();
    var element = this; // really you should move the var declaration up higher
    geocoder.getLatLng(opts.geocode, function(center) {
        // ...
    });
}

Of course, even there, $(this) still may refer to something else, since I haven't gone through the whole plugin. Try logging (alert, console.log, whatever) what is stored in this if you're ever unsure.