Cannot use callback in Google Maps script tag

Question

Building the Google Maps script tag like this to be appended after the div has been rendered and then calling initialize which initializes the map like this fails because I have wrapped my code in an anonymous immediately invoked function expression...

(function(){
    var map,infoWindow;
   //lots of stuff...helper functions to initialize
   var initialize=function()
   {
       //init the map and infoWindow and other stuff here
       //manipulate the DOM here...
       //add controls that draw shapes on the map here...
   };
   
   var loadScript=function()
   var script=document.createElement('script');
   script.type='text/javascript';
   //cannot call initialize...
   script.src='http://maps.googleapis.com/maps/api/js?v=3.exp&key=API_KEY&sensor=true&'+'libraries=geometry&'+'callback=initialize';
   document.body.appendChild(script);
    };
    $("map-canvas").ready(loadScript);
})();

I get the error saying that the global object initialize could not be found.I would rather not unwrap initialize because it interacts directly with the map and infoWindow variables on many occassions.

UPDATE:

I have also tried to use the following code:

var res=(function(){
    var map,infoWindow;
   //lots of stuff...helper functions to initialize
   var initialize=function()
   {
       //init the map and infoWindow and other stuff here
       //manipulate the DOM here...
       //add controls that draw shapes on the map here...
   };
   
   var loadScript=function()
   var script=document.createElement('script');
   script.type='text/javascript';
   //cannot call initialize...
   script.src='http://maps.googleapis.com/maps/api/js?v=3.exp&key=API_KEY&sensor=true&'+'libraries=geometry&'+'callback=initialize';
   document.body.appendChild(script);
    };
    return {init:initialize};
})();

var loadScript=function()
{
   var script=document.createElement('script');
   script.type='text/javascript';
   //cannot call initialize...
   script.src='http://maps.googleapis.com/maps/api/js?v=3.exp&key=API_KEY&sensor=true&'+'libraries=geometry&'+'callback='+res.init;
document.body.appendChild(script);//line 509
};
$("map-canvas").ready(loadScript);

Now it says:

 GET http://maps.googleapis.com/maps/api/js?v=3.exp&key=PART_OF_API_KEY%20and%20display%20on%20map...have%20to%20figure%20this%20one%20out...} 
 400  (Bad Request) gmaps.js:509
 loadScript gmaps.js:509
 c jquery-latest.js:3048
 p.fireWith jquery-latest.js:3160
 x.extend.ready jquery-latest.js:433
 q

Why don't you use good old way like in docs? Also you have a typo error in jquery selector of map div: #map-canvas. — alpakyol
– alpakyol, Commented Mar 14, 2014 at 7:54
@user3280126 not a typo,just ignorance...will fix that but i went back and found that it works even without the #...does jQuery search for any DOM element with a classname or id corresponding to the string I have sent??? — vamsiampolu
– vamsiampolu, Commented Mar 14, 2014 at 8:44
@user3280126 are there any advantages of adding the script tag with the callback statically or will it be called before the DOM element is ready. — vamsiampolu
– vamsiampolu, Commented Mar 14, 2014 at 8:46
For google maps script, it is best to write it statically. In most cases, scripts must be written statically. Otherwise, you should know well what you are doing. — alpakyol
– alpakyol, Commented Mar 14, 2014 at 9:06
@user3280126 Google demonstrate themselves in their documentation how to load the map dynamically. Loading it statically isn't the 'good old way', it's just one of the ways — duncan
– duncan, Commented Mar 14, 2014 at 9:34

Dr.Molle · Accepted Answer · 2014-03-14 19:57:43Z

2

Regarding to attempt #1:

the scope of variables created in the self-executing function is the function. So when you use the var-keyword this variable will not be visible outside of the function.

Remove the var-keyword, and initialize will be global visible.

attempt #2 can't work, because res.init is an object and not a string.

answered Mar 14, 2014 at 19:57

Dr.Molle

117k16 gold badges200 silver badges206 bronze badges

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

Collectives™ on Stack Overflow

Cannot use callback in Google Maps script tag

UPDATE:

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

UPDATE:

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related