Custom js function 'Cannot read property' zoom 'of undefined'
After looking at the google maps tutorial on tuts +, I decided to create a few of my custom functions. Link
In the "controlZoom" function, I am trying to set up some custom controls, but 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'
source to share
The 'this' inside your event listener was probably the plus / minus button pressed. You can fix this using the "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 an object that has a gMap! I think this is the case because you are saying the this.gMap.getZoom () line returns the correct counter. So my two suggestions should work, but if not, try debugging by adding
console.debug(this)
to check that 'this' is what you expect.
++ Usage Note
++ is an operator and count ++ will increment the counter and return. But the value passed to the function will have a count before it is incremented. You can verify this through the following console session:
var n = 0
function report(p) { console.log(p) }
report(n++)
0
You are calling the "report" function with n ++, which you think might cause it to print "1". In fact, it actually outputs "0". This is because n is passed to the report before it is incremented by ++.
In your case, the first time you call the scaling function (count ++), you actually call it with the existing count value, and then only after that the count is incremented. So you feel like you need two clicks to zoom in. Safe way to do it:
plusZoom.addEventListener('click', function() {
count++;
this.gMap.zoom(count);
}.bind(this));
then you can be sure that the score is increasing before you pass it to the scaling function.
source to share
gMap
Not defined within the function . Undefined variables don't have any properties, so the scaling property won't work.
gMap
is currently only defined by your prototype and the functions that are part of it, eg controlZoom
. When you add a click event listener, you are not passing in gMap
, and these functions do not belong to the prototype, so this.gMap
will not work.
You need to define gMap
in the global or reference it with a prototype Mapster
.
source to share