OO JS and Google Maps APIs: What am I doing wrong?

Question

This is my first foray into OO JS, with problems.

Ideally, in this case, I will have a mapLocation object, which I could just pass in coordinates, icon, HTML to display when I click on it. I would add it to my Google map on the page, and I would have something somewhat reusable. Obviously, this will be reorganized later.

Also, I'm not particularly happy with what my code looks like at the moment. :)

Here is the object that I come up with.

function mapLocation() {

    this.lat = 0;
    this.lng = 0;
    this.icon = '';
    this.html = '';
    this.getLocation = getLocation;
}

function getLocation() {
    var baseIcon = new GIcon(G_DEFAULT_ICON);
    baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
    baseIcon.iconSize = new GSize(20, 34);
    baseIcon.shadowSize = new GSize(37, 34);
    baseIcon.iconAnchor = new GPoint(9, 34);
    baseIcon.infoWindowAnchor = new GPoint(9, 2);
    var letteredIcon = new GIcon(baseIcon);
    letteredIcon.image = this.icon;
    var point = new GLatLng(this.lat, this.lng);
    var marker = new GMarker(point, { icon:letteredIcon });

    function show() {
        marker.openInfoWindowHtml('Lat: '+this.lat+'<br />Lng: '+this.lng+'<br /><img src="'+this.icon+'" />');
    }
    alert(this.lat);
    GEvent.addListener(marker, "click", show);
    return marker;
}

And here is my implementation.

var a = new mapLocation;
a.lat = 52.136369;
a.lng = -106.696299;
a.icon = 'http://www.google.com/mapfiles/markerA.png';
a.html = 'asdf fdsa';

var b = a.getLocation();
map.addOverlay(b);

So, I have a window, my marker, but the show () function appears in undefined in it.

I am curious what I am doing wrong - how wrong I am - in this problem.

Thanks for the look.

Answer 1

, , 'this', show .

(Edit: , 'this'):

function show() {
  var x = this;
  return function(){marker.openInfoWindowHtml('Lat: '+x.lat+'<br />Lng: '+x.lng+'<br /><img src="'+x.icon+'" />');}
}

GEvent.addListener(marker, "click", show());

OOJS... :

//convention is to name JS classes with an uppercase character
function MapLocation(params) 
{
    //instantiate from a params object to keep a flexible contructor signature
    //(similarly you can use the native arguments object but I prefer to be explicit)
    this.lat = (params.lat ? params.lat : 0);
    this.lng = (params.lng ? params.lng : 0);
    this.icon = (params.icon ? params.icon : '');
    this.html = (params.html ? params.html : '');

    //keep methods contained within the class definition
    if (typeof(this.geolocation) == 'undefined') //execute once
    {
        //by binding methods with prototype you only construct a single instance of the function
        MapLocation.prototype.getLocation = function ()
                                            {
                                                /* ... */
                                            }
    }
}

//property set at constructor
var a = new MapLocation({lat:52.136369, lng:-106.696299, icon: 'http://www.google.com/mapfiles/markerA.png'});

//deferred property setting
a.html = 'asdf fdsa';

Answer 2

    var _this = this;
    function show() {
            marker.openInfoWindowHtml('Lat: '+_this.lat+'<br />Lng: '+_this.lng+'<br /><img src="'+_this.icon+'" />');
    }

, , ===.

, :

function mapLocation() {
   // constructor stuff
}

mapLocation.prototype = {
  getLocation: function() {
    // code for getLocation 
  }
};

this.getLocation .