jQuery getScript and Google Maps API Problem

Question

HI

I got a problem with loading the google maps api.

I got my own object with a function that initializes the map, and the google maps api gets loaded via jquery.getscript. but i always get an error message in the callback function:

var MyGMap = {
GMapScriptURL: "http://maps.google.com/maps?file=api&v=2&async=2&key=",
Map: null,
Geocoder: null,
InitiazlizeMaps: function () {
    if (GBrowserIsCompatible()) {
        this.Map = new GMap2(document.getElementById("map_canvas"));
        this.Map.setCenter(new GLatLng(37.4419, -122.1419), 13);
        this.Geocoder = new GClientGeocoder();
    }
}

}

$(function(){ var CurrentKey = "MY_KEY";

$.getScript(MyGMap.GMapScriptURL + CurrentKey, function () {
    MyGMap.InitiazlizeMaps();
    // throws GMap2 is undefined

});

});

whats wrong? why is this not running?

Answer 1

You've got async=2 in the script URL line which means load the mapping core asynchronously too - you need to wait for it to complete that before you can call InitializeMaps. You can either try dropping the async=2 from the URL, or using Google Map's async and callback instead of the getScript callback function, e.g.

$.getScript(MyGMap.GMapScriptURL + CurrentKey + "&callback=MyGMap.InitializeMaps");