SO? Answer POC: Google Maps load with jQuery Deferred

$.getScript(...).done methods that reference certain parts of the Google Maps API will blow up because, although the script has been executed, some parts don't appear to be ready until the optional callback method is called from within the script code. This fiddle wraps that system with a deferred promise to make that sort of logic possible in consuming code. Unfortunately, it requires a single method to pollute the global namespace for Google to call it when it is done. Via SO Answer: http://stackoverflow.com/questions/6398342/cant-initiate-the-google-maps-geocoder/8659465#8659465

by Adam Patridge

HTML

<div id="map_canvas"></div>

CSS

html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }

JavaScript

var googleMapsCallback; // Required for Google Maps API to call back when it thinks it is done (vs. when jQuery finishes loading the script file).
(function ($) {
    var googleMapsLoaded = $.Deferred();
    googleMapsCallback = function () {
        googleMapsLoaded.resolve();
    };
    $.extend({
        loadGoogleMaps: function () {
            $.ajax({
                url: "https://maps.googleapis.com/maps/api/js?v=3&callback=googleMapsCallback&sensor=false",
                dataType: "script"
            }).fail(googleMapsLoaded.reject);
            return googleMapsLoaded.promise();
        }
    });
}(jQuery));
$(function () {
    $.loadGoogleMaps().done(function () {
        var geocoder = new google.maps.Geocoder(),
            map = new google.maps.Map($("#map_canvas")[0], {
                center: new google.maps.LatLng(20, 0),
                zoom: 1,
                mapTypeId: google.maps.MapTypeId.SATELLITE
            });
    });
});