jQuery getScript and Google Maps API Error message-Collection of common programming errors

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?

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");
   

2. you can also use the async mode, but you need to provide a callback function.

   Here http://lucamanzo-soluzione-software.it/wp/?p=5 you can find a simple jquery plugin showing all the steps to use the async loading and jquery, and building a map with just a few lines of code:

   $.gmapstools.init();
   $("#my_map_canvas").gmap({lat:37.4221913, lng:-122.08458530000001, draw_marker:true, zoom_level:13});
   

Originally posted 2013-11-09 23:10:06.