javascript - dynamic content loading via ajax does not load gmap

Question

I am dynamically loading content into a page and one of the pages has a google map point. Everything works fine except map point doesn't show up. Map api is loaded asynchronously so if I understand it correct it should work.

Example taken from official google's documentation

<script>
function initialize() {
    var mapOptions = {
        zoom: 8,
        center: new google.maps.LatLng(-34.397, 150.644),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById('map-canvas'),
        mapOptions);
}

function loadScript() {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' +
        'callback=initialize';
    document.body.appendChild(script);
}
</script>

<div class="joomsport-event-location">
    <div class="map" id="map-canvas" style="height: 50%"></div>
    <script>
        loadScript();
        alert('loading'); // test if it's called
    </script>
</div>

This is source that is loaded into another page using jQuery. And once loaded I get expected alert. Am I missing something ? Or it's not even possible what I am trying to do?