Loading google maps in anonymous function

Question

I'm attempting to load google maps in an anonymous function but am getting a javascript error whenever I try to use one of the api's methods. For example:

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've created 2 examples:

1) This loads google map js via script tag in the body of the page. This method DOES work and there is no js error. http://jsfiddle.net/malonso/hgPQk/1/

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

I am sure I'm missing something glaringly obvious but I simply cannot figure out what. Thanks in advance.

Update: I should point out that it is a requirement that google maps be loaded from w/in the anonymous function.

Seems like the real difference between the two fiddles is that one is loading the Google stuff asynchronously, and the other (the working one) isn't. The anonymous function probably doesn't have anything to do with it. — Pointy
@Pointy - I don't doubt that, however, I'm not sure what the issue is. In both examples, prepGoogleMaps() does detect that the google maps module has loaded, so it seems like - at that stage - a call/method that works in example #1 should also work in #2. Again though, I am sure there is something I am missing. — malonso
Well that particular approach to loading the map code won't work because of the document.write() call that's made. See the other answer about an alternative way to load it asynchronously. — Pointy
I can't view the google map in FireFox version 23 in Mac OSX — clevertension

Armel Larcier Armel Larcier · Accepted Answer · 2012-09-26T12:51:58

You can do this. You can add a callback function name in the url. It'll be called when the API gets loaded. That callback function must be accessible in the document's scope.

I did that some time ago by triggering a custom event on the window with 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();
})());

Asynchronously Loading the API

You may wish to load the Maps API JavaScript code after your page has finished loading, or on demand. To do so, you can inject your own tag in response to a window.onload event or a function call, but you need to additionally instruct the Maps JavaScript API bootstrap to delay execution of your application code until the Maps JavaScript API code is fully loaded. You may do so using the callback parameter, which takes as an argument the function to execute upon completing loading the API.

The following code instructs the application to load the Maps API after the page has fully loaded (using window.onload) and write the Maps JavaScript API into a tag within the page. Additionally, we instruct the API to only execute the initialize() function after the API has fully loaded by passing callback=initialize to the Maps

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

Loading google maps in anonymous function

2 Answers