Loading Google maps into anonymous function

Question

I am trying to load Google maps in an anonymous function, but I get a javascript error whenever I try to use one of the api methods. For instance:

code

var mapOptions = { zoom: 8, center: new google.maps.LatLng(-34.397, 150.644), mapTypeId: google.maps.MapTypeId.ROADMAP }; 

Error

 TypeError: google.maps.LatLng is not a constructor 

I created 2 examples:

1) This loads the go go go map through the script tag in the body of the page. This method works and there is no js error. http://jsfiddle.net/malonso/hgPQk/1/

2) This loads the google js w / map into an anonymous function. This method does NOT work and contains the above js error. http://jsfiddle.net/malonso/fZqqW/2/

I am sure that I am missing something obvious, but I just cannot understand that. Thanks in advance.

Update: I must indicate that it is a requirement that google maps be loaded from an anonymous function.

Answer 1

Can you do this. You can add the name of the callback function to the URL. It will be called when the API boots. This callback function must be available in the document area.

I did this a while ago, triggering a custom event in a window using jQuery: http://jsfiddle.net/fZqqW/5/

used http://maps.google.com/maps/api/js?sensor=false&callback=gMapsCallback "

 window.gMapsCallback = function(){ $(window).trigger('gMapsLoaded'); } $(document).ready((function(){ function initialize(){ var mapOptions = { zoom: 8, center: new google.maps.LatLng(-34.397, 150.644), mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions); } function loadGoogleMaps(){ var script_tag = document.createElement('script'); script_tag.setAttribute("type","text/javascript"); script_tag.setAttribute("src","http://maps.google.com/maps/api/js?sensor=false&callback=gMapsCallback"); (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag); } $(window).bind('gMapsLoaded', initialize); loadGoogleMaps(); })());​ 

API Asynchronous Download

You might want to download the Maps API JavaScript code after your page or on demand. To do this, you can tag in response to a window.onload event or function call, but you need to additionally instruct the JavaScript Maps API bootstrap to delay the execution of your application code until the JavaScript Maps API code is fully loaded. You can do this by using a callback parameter, which takes as an argument the function that executes when the API download finishes.

The following code indicates that the application loads the Maps API after the page is fully loaded (using window.onload) and the Maps JavaScript API is written to the tag inside the page. Additionally, we instruct the API to only perform the initialize () function after the API is fully loaded by passing the callback = initialization to Maps

See HERE: https://developers.google.com/maps/documentation/javascript/tutorial

Answer 2

JavaScript that came back from

http://maps.google.com/maps/api/js?sensor=false

includes a call to document.write() . If this happens after loading the DOM, it won’t work. I do not think that you can expect to download Google map code asynchronously this way.