JavaScript Event Handler Scope

Question

I'm working on an application that uses the Google Maps API. I have no prior experience with javascript. What I'm trying to do is the following:

function SpeedMarker(position) {
    this.speed = 50;
    this.marker = new google.maps.Marker({
        position: position,
        map: map,
        icon: 'http://maps.google.com/mapfiles/markerA.png',
        zIndex: Math.round(position.lat() * -100000) << 5
    });
    google.maps.event.addListener(this.marker, 'click', this.ShowInfoWindow)        
}

SpeedMarker.prototype.ShowInfoWindow = function () {
    var contentString = 'stuff';
    infowindow = new google.maps.InfoWindow({
        content: contentString
    });
    infowindow.open(map, this.marker);
}

The issue is that the click event happens in the document object, and this.marker does not exist in that context.

Is there any way to handle the event within the SpeedMarker object I created?

Matt Ball · Accepted Answer · 2012-02-28 19:36:17Z

5

Change

google.maps.event.addListener(this.marker, 'click', this.ShowInfoWindow);

to

var self = this;
google.maps.event.addListener(this.marker, 'click', function () {
    self.ShowInfoWindow();
});

or use Function.bind (warning: may require shim):

google.maps.event.addListener(this.marker, 'click', this.ShowInfoWindow.bind(this));

answered Feb 28, 2012 at 19:36

Matt Ball

361k102 gold badges655 silver badges725 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user472875 Over a year ago

OK, So this might be specific to google maps but here's what happens when I run the code above (not the Function.bind): -the handler gets called when I invoke the constructor, without me clicking the marker (this does not happen if I use the original version with an alert) -if I try to run this handler later on I get an error from google maps saying: unable to find the property 'xx', (I'm guessing because I am no longer in the map context so this.xx does not exist)

Matt Ball Over a year ago

I'm guessing you missed the anonymous function, and are passing something like this: ...addListener(this.marker, 'click', self.ShowInfoWindow()); ...which is not right.

Matt Ball Over a year ago

[psychic-powers-activate] :)

Collectives™ on Stack Overflow

JavaScript Event Handler Scope

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related