After following a google maps tutorial on tuts+, I have decided to build few of my custom functions. Link

In the 'controlZoom' function I am trying to set up some custom controls however I cannot access the 'this.gMap':

    controlZoom:function(){
        var plusZoom = document.getElementsByClassName('icon-plus-sign')[0],
            minusZoom = document.getElementsByClassName('icon-minus-sign')[0],
            count = this.gMap.getZoom();
        plusZoom.addEventListener('click', function() {
            this.gMap.zoom(count++);
        });
        minusZoom.addEventListener('click', function() {
            this.gMap.zoom(count--);
        });
    }

i can access the following:

console.log(count);

but not inside the 'click'event.

I am calling my custom function here: link

When I try to click I get the following error in the console:

'Cannot read property 'zoom' of undefined '

After following a google maps tutorial on tuts+, I have decided to build few of my custom functions. Link

In the 'controlZoom' function I am trying to set up some custom controls however I cannot access the 'this.gMap':

    controlZoom:function(){
        var plusZoom = document.getElementsByClassName('icon-plus-sign')[0],
            minusZoom = document.getElementsByClassName('icon-minus-sign')[0],
            count = this.gMap.getZoom();
        plusZoom.addEventListener('click', function() {
            this.gMap.zoom(count++);
        });
        minusZoom.addEventListener('click', function() {
            this.gMap.zoom(count--);
        });
    }

i can access the following:

console.log(count);

but not inside the 'click'event.

I am calling my custom function here: link

When I try to click I get the following error in the console:

'Cannot read property 'zoom' of undefined '

• javascript

3 Answers 3

'this' inside your event listeners is probably the plus/minus button that was clicked. You can fix this by using a 'self' variable:

controlZoom:function(){
    var self = this;
    var plusZoom = document.getElementsByClassName('icon-plus-sign')[0],
        minusZoom = document.getElementsByClassName('icon-minus-sign')[0],
        count = this.gMap.getZoom();
    plusZoom.addEventListener('click', function() {
        self.gMap.zoom(count++);
    });
    minusZoom.addEventListener('click', function() {
        self.gMap.zoom(count--);
    });
}

or using .bind:

controlZoom:function(){
    var plusZoom = document.getElementsByClassName('icon-plus-sign')[0],
        minusZoom = document.getElementsByClassName('icon-minus-sign')[0],
        count = this.gMap.getZoom();
    plusZoom.addEventListener('click', function() {
        this.gMap.zoom(count++);
    }.bind(this));
    minusZoom.addEventListener('click', function() {
        this.gMap.zoom(count--);
    }.bind(this));
}

These fixes assume that 'this' inside controlZoom is the object that has gMap! I think it is, because you say the this.gMap.getZoom() line is returning the correct count. So my two suggestions should both work, but if not, try debugging by adding

console.debug(this)

to check that 'this' is what you expect.

A note about using ++

++ is an operator, and count++ will increment count and return. But the value passed into the function will be that of count before it was incremented. You can convince yourself of this via the following console session:

var n = 0

function report(p) { console.log(p) }

report(n++)
0

You call the 'report' function with n++, which you would think might lead it to print out '1'. In fact it actually prints out '0'. This is because n is passed into report before it is incremented by ++.

In your case, the first time you call your zoom(count++) function, you are in fact calling it with the existing value of count, and then only afterwards is count incremented. So it appears as if you need two clicks to zoom in. The safe way to do this is:

    plusZoom.addEventListener('click', function() {
        count++;
        this.gMap.zoom(count);
    }.bind(this));

then you will be sure that count is incremented before you pass it to the zoom function.

You should use setZoom method instead:

this.gMap.setZoom(count++);

And you need to save reference to this and remove bind's:

var self = this,
    plusZoom = document.getElementsByClassName('icon-plus-sign')[0],
    // ...

and then

self.gMap.setZoom(count++);

It will work then.

In the scope of the function, gMap is not defined. Undefined variables do not have any properties, thus your zoom property won't work.

gMap is currently only defined in your prototype, and the functions that are a part of it, such as your controlZoom. When you add the click event listener's, you're not passing in gMap, and those functions do not belong to the prototype, so this.gMap won't work.

You'd have to define gMap in a global, or reference it using the prototype Mapster.