jquery - Scopes in Javascript AMD pattern -

i'm totally new javascript java, , have had start directly difficult thing me... developing app using asynchronous module definition pattern...

i'm using platform weejot, provides framework develop javascript web apps uses amd pattern. documentation here. don't know it, maybe can anyway if know amd pattern...

basically have module mycontroller.js looks (note of code automatically generated, wrote commented lines):

define([     "js/util",     "framework/controller" ], function (   util,   controller ){         function mycontroller(environment, connector) {     controller.call(this, environment);     this.settings = environment.siteapplication.getsettings();     this.connector = connector;             //variable have value stored     this.myvariable = "hello";   }        mycontroller.prototype = object.create(controller.prototype);    util.extend(mycontroller.prototype, {     //function show map     showmap: function (request, render) {       //get google maps script       $.getscript("http://maps.googleapis.com/maps/api/js?key=key&sensor=false");                 //render framework object shows view "map.html" in full page mode       render({name: "map", mode: "fullpage"});     }       });    return mycontroller; }); 

this doesn't work fine, because after line of $.getscript(...), script doesn't seem loaded, since can't access object google.maps, should have been created...

i made working adding callback function script url, this:

$.getscript("http://maps.googleapis.com/maps/api/js?key=key&sensor=false&callback=drawmap"); 

the problem callback function must global function, added following function previous module (just before return statement above):

window.drawmap = function () {   var mapoptions = {     center: new google.maps.latlng(-34.397, 150.644);,     zoom: 8,     maptypeid: google.maps.maptypeid.roadmap   };   var map = new google.maps.map(document.getelementbyid("map_canvas"), mapoptions); } 

and somehow, map rendered perfectly... but, problem need access variable myvariable function window.drawmap, , can't... there way it? or doing wrong beginning?

as said i'm new this, , i'm getting crazy , in try make working i've been adding , changing things point don't know i'm doing... suggestion appreciated...

---

edit: if it's useful, response when getting google maps script (copied chrome's console):

window.google = window.google || {}; google.maps = google.maps || {}; (function() {    function getscript(src) {     var s = document.createelement('script');      s.src = src;     document.body.appendchild(s);   }    var modules = google.maps.modules = {};   google.maps.__gjsload__ = function(name, text) {     modules[name] = text;   };    google.maps.load = function(apiload) {     delete google.maps.load;     apiload([0.009999999776482582,[[["http://mt0.googleapis.com/vt?lyrs=m@216000000\u0026src=api\u0026hl=es-es\u0026","http://mt1.googleapis.com/vt?lyrs=m@216000000\u0026src=api\u0026hl=es-es\u0026"],null,null,null,null,"m@216000000"],[["http://khm0.googleapis.com/kh?v=128\u0026hl=es-es\u0026","http://khm1.googleapis.com/kh?v=128\u0026hl=es-es\u0026"],null,null,null,1,"128"],[["http://mt0.googleapis.com/vt?lyrs=h@216000000\u0026src=api\u0026hl=es-es\u0026","http://mt1.googleapis.com/vt?lyrs=h@216000000\u0026src=api\u0026hl=es-es\u0026"],null,null,"imgtp=png32\u0026",null,"h@216000000"],[["http://mt0.googleapis.com/vt?lyrs=t@131,r@216000000\u0026src=api\u0026hl=es-es\u0026","http://mt1.googleapis.com/vt?lyrs=t@131,r@216000000\u0026src=api\u0026hl=es-es\u0026"],null,null,null,null,"t@131,r@216000000"],null,null,[["http://cbk0.googleapis.com/cbk?","http://cbk1.googleapis.com/cbk?"]],[["http://khm0.googleapis.com/kh?v=75\u0026hl=es-es\u0026","http://khm1.googleapis.com/kh?v=75\u0026hl=es-es\u0026"],null,null,null,null,"75"],[["http://mt0.googleapis.com/mapslt?hl=es-es\u0026","http://mt1.googleapis.com/mapslt?hl=es-es\u0026"]],[["http://mt0.googleapis.com/mapslt/ft?hl=es-es\u0026","http://mt1.googleapis.com/mapslt/ft?hl=es-es\u0026"]],[["http://mt0.googleapis.com/vt?hl=es-es\u0026","http://mt1.googleapis.com/vt?hl=es-es\u0026"]],[["http://mt0.googleapis.com/mapslt/loom?hl=es-es\u0026","http://mt1.googleapis.com/mapslt/loom?hl=es-es\u0026"]],[["https://mts0.googleapis.com/mapslt?hl=es-es\u0026","https://mts1.googleapis.com/mapslt?hl=es-es\u0026"]],[["https://mts0.googleapis.com/mapslt/ft?hl=es-es\u0026","https://mts1.googleapis.com/mapslt/ft?hl=es-es\u0026"]]],["es-es","us",null,0,null,null,"http://maps.gstatic.com/mapfiles/","http://csi.gstatic.com","https://maps.googleapis.com","http://maps.googleapis.com"],["http://maps.gstatic.com/intl/es_es/mapfiles/api-3/12/11","3.12.11"],[2244818506],1.0,null,null,null,null,0,"blabla",null,null,0,"http://khm.googleapis.com/mz?v=128\u0026","aizasyaguz1lkdjz9jsrivdsb4cdlmuaomomi34","https://earthbuilder.googleapis.com","https://earthbuilder.googleapis.com",null,"http://mt.googleapis.com/vt/icon"], loadscripttime);   };   var loadscripttime = (new date).gettime();   getscript("http://maps.gstatic.com/intl/es_es/mapfiles/api-3/12/11/main.js"); })(); 

edit: looked @ script, , not jsonp, modified answer use requirejs.

edit again: appears there more asychronous jazz going on here. edit bind global function module scope.

looking @ code returned url, appears within code makes asynchronous call retrieve additional data api, , calls callback. way can think define global function within module , use handle return value api call. not pretty, should work:

define([     "js/util",     "framework/controller" ], function (   util,   controller ){         function mycontroller(environment, connector) {     controller.call(this, environment);     this.settings = environment.siteapplication.getsettings();     this.connector = connector;             //variable have value stored     this.myvariable = "hello";   }        mycontroller.prototype = object.create(controller.prototype);    util.extend(mycontroller.prototype, {     //function show map     createrenderer : function(){        var self = this;        window.drawmap = function(){           var mapoptions = {           center: new google.maps.latlng(-34.397, 150.644);,           zoom: 8,           maptypeid: google.maps.maptypeid.roadmap         };         var map = new google.maps.map(document.getelementbyid("map_canvas"), mapoptions);         // stuff self.myvariable and, render, ect...       };     },     showmap: function (request, render) {       //get google maps script       this.createrenderer();       $.getscript("http://maps.googleapis.com/maps/api/js?key=key&sensor=false&callback=drawmap");                     }       });    return mycontroller; }); 

explanation:

when call this.createrenderer(), function called in context of object. since declare variable, self = this, within this.createrenderer() function call, define window.drawmap within function call well, create closure, stores self reference mycontroller object. when window.drawmap called later, self reference available in closure scope. now, within window.drawmap function call, can access self.myvariable. see how javascript closures work? more information.

as alternative, consider using miller medeiros's async plugin load google maps api dependency module. cleaner way it.