Lazy Load Google Map

HTML

<!DOCTYPE html>
<html>    
    <head>
        <!-- UNCOMMENT SCRIPT TO TEST -->
        <!-- <script src="http://maps.google.com/maps/api/js?sensor=true"></script> -->
    </head>    
    <body>
        <div id="map_canvas" style="width:100%; height:100%;"></div>
    </body>
</html>

CSS

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

JavaScript

var params;

    // dom ready
    $(function () {
        
        //if (typeof google !== "undefined"){
        if (window.google && google.maps) {
            // Map script is already loaded
            //alert("Map script is already loaded. Initialising");
            initializeMap();
        } else {
            //alert("Lazy loading Google map...");
            lazyLoadGoogleMap();            
        }     
   
    });

    function initialize(params) {
        var myLatlng = new google.maps.LatLng(52.872764, -6.496128);
        var mapOptions = {
            center: myLatlng,
            zoom: 8,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };        
        var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: "Hello From Knockananna!!!"
        });        
    }

    function lazyLoadGoogleMap() {
        $.getScript("http://maps.google.com/maps/api/js?sensor=true&callback=initializeMap")
        .done(function (script, textStatus) {            
            //alert("Google map script loaded successfully");
        })
        .fail(function (jqxhr, settings, ex) {
            //alert("Could not load Google Map script: " + jqxhr);
        });
    }

    function initializeMap() {
        initialize(params);
    }