Question

I’ve ripped out every single line of code here with the exception of this:

show = foo.show = function () {
    alert("test");
};

Now, it works if I run the maps API in this way:

foo.display = function() {
    this.elem = document.getElementById('fooBox');

    var script  = document.createElement("script");
    script.type = "text/javascript";
    script.src  = "http://maps.google.com/maps/api/js?sensor=false&callback=show";
    document.body.appendChild(script);
};

But when I try to call it via the callback=foo.show it fails:

foo.display = function() {
    this.elem = document.getElementById('fooBox');

    var script  = document.createElement("script");
    script.type = "text/javascript";
    script.src  = "http://maps.google.com/maps/api/js?sensor=false&callback=foo.show";
    document.body.appendChild(script);
};

The only error I can get form WebKit inspector is Uncaught TypeError: Cannot call method 'show' of undefined.

I’m new to the google maps API, but I would have thought methods don’t matter? I’m sure I’ve seen it done somewhere. What am I doing wrong here?

Answer 1

Is foo declared as a var? If so, it’s not accessible to the global scope. Add a declaration like:

foo = {};

foo.show = function () {
   ...
};

...

to your code and it’s likely to correct the issue. The response from WebKit indicates that the variable foo is not in scope at the time show() is invoked.