jquery & google maps: loading page fragment including map asynchronous

See:http://stackoverflow.com/questions/14229695/google-maps-api-throws-uncaught-referenceerror-google-is-not-defined-only-whe/14235500#comment19769525_14235500

by bizamajig

HTML

<script>
$(document).ready(function(e) {
    $('button').click(function(){
        $(this).hide();$('#a').html('Loading...');
        $.ajax({dataType:'html',
            type: 'POST', url: '/echo/html/',
            data:{html:unescape('%3Cdiv%20id%3D%22map_canvas%22%20style%3D%22height%3A%20354px%3B%20width%3A713px%3B%22%3E%3C%2Fdiv%3E%0D%0A%3Cscript%20src%3D%22https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F1.8.3%2Fjquery.min.js%22%3E%3C%2Fscript%3E%0D%0A%3Cscript%20src%3D%22https%3A%2F%2Fmaps.googleapis.com%2Fmaps%2Fapi%2Fjs%3Fv%3D3.exp%26sensor%3Dfalse%26callback%3Dinitialize%22%3E%3C%2Fscript%3E%0D%0A%3Cscript%3E%0D%0Avar%20directionsDisplay%2C%0D%0A%20%20%20%20directionsService%2C%0D%0A%20%20%20%20map%3B%0D%0A%0D%0Afunction%20initialize%28%29%20%7B%0D%0A%20%20var%20directionsService%20%3D%20new%20google.maps.DirectionsService%28%29%3B%0D%0A%20%20directionsDisplay%20%3D%20new%20google.maps.DirectionsRenderer%28%29%3B%0D%0A%20%20var%20chicago%20%3D%20new%20google.maps.LatLng%2841.850033%2C%20-87.6500523%29%3B%0D%0A%20%20var%20mapOptions%20%3D%20%7B%20zoom%3A7%2C%20mapTypeId%3A%20google.maps.MapTypeId.ROADMAP%2C%20center%3A%20chicago%20%7D%3B%0D%0A%20%20map%20%3D%20new%20google.maps.Map%28document.getElementById%28%22map_canvas%22%29%2C%20mapOptions%29%3B%0D%0A%20%20directionsDisplay.setMap%28map%29%3B%0D%0A%7D%0D%0A%0D%0A%3C%2Fscript%3E')},
            success: function(d) { $('#a').html(d); }
        })
    });
});
</script>
<button>load fragment</button>
<div id="a"></div>