$getScript Method to load google maps api -> blank page?

I have a little button on my page that should load a google map. Since I want my page to load really fast and this feature is not actually necessary I don't want to embed the google maps API script on page-load. I just want to load it when the button is actually clicked.

I tried using the jquery $.getScript() method, however if I'm using the code above I'm getting a blank page. The page starts loading and as soon as my javascript file gets executed the page is blank (white).

$.getScript("http://maps.google.com/maps/api/js?sensor=false", function(){
    $('#googleMap').live('click', function(e) {

        e.preventDefault();
        loadMap("mapBottomContainer", false);

    });
});

What am I doing wrong here?

edit/update:

Doesn't seem to make a difference if I do this:

$('#googleMap').live('click', function(e) {

    $.getScript("http://maps.google.com/maps/api/js?sensor=false", function(){

        e.preventDefault();
        loa开发者_Go百科dMap("mapBottomContainer", false);

    });

});

The page doesn't get blank on page-load however as soon as I click on the maps-button the page gets whitened.

update 2:

the loadMap function:

function loadMap(cont, scroll) {

    var latlng = new google.maps.LatLng(47.244236,11.249194);
    var options = {
        zoom: 14,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scrollwheel: scroll,
        streetViewControl: false,
        navigationControlOptions: {  
            style: google.maps.NavigationControlStyle.SMALL 
        }
    }

    var map = new google.maps.Map(document.getElementById(cont), options);

    var mapdesc = '<div id="gmContent">'+
    '<h3 id="gmTitle" class="widget-title">Something</h3>'+
    '<div id="gmBody">'+
    '</div>'+
    '</div>';

    var infowindow = new google.maps.InfoWindow({
        content: mapdesc
    });

    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        title: 'My Title'
    });

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker);
    });

    infowindow.open(map,marker);

}

The problem here is the google map api js link you are loading uses document.write to add additional script tags to the page. That makes what you trying to do impossible since it will override the page content.

The js script is loaded successfully:

alert(window.google);   // before load undefined
$.getScript("http://maps.google.com/maps/api/js?sensor=false", function(){
    alert(window.google); // after load [object Object]
});

However, it seems that google.maps doesn't have some property you're calling in loadMap, for example google.maps.LatLng.