AJAX asynchronisity & returning

Question

Trying to create a map with specific routes with infowindows populated by ajax data. The standard data such as addresses and such taken from an mysql/ajax request, not real-time data, stored. But I'd like to also do an ajax request to get departure times etc on the fly.

The code goes like this:

//initialise function is ok, its the latter function where the problem resides
function initialise(){
    var map = new google.maps.Map(document.getElementById('map-canvas'),{
        center: {lat: 37.7833, lng:-122.4167},
        zoom: 10
    });
$('.route_button input').click(function() {
    clearMarkers();
    $.ajax({
        url: 'include/routeinfo_ajax.php',
        type: 'GET',
        data: {route: $(this).attr('name')},
        success: function(response) {
            setMarkerDetails(response);
            for(var i = 0; i<route.length;i++){
                placeMarkers(map, route[i]);
                placePolylines(map, route[i]);
            }
            //reset polyline path
            path = [];
        },
        error: function(xhr) {
            console.log("error");
        }
    })
});

function placeMarkers(map, route){
    var latLng = new google.maps.LatLng(route[2], route[3]);
    var marker = new google.maps.Marker({
        position:latLng,
        map: map
    });
    markers.push(marker);

    google.maps.event.addListener(marker, 'click', function(){
//onclick I'd like both the info variable and the etd variable to be in the same infowindow, at the moment I can only get one or t'other.
        $.ajax({
            url: 'include/etd.php',
            type: 'GET',
            data: {orig: route[1]},
            success: function(response) {
                var etd = 'Time: '+response.getElementsByTagName('time')[0].innerHTML
                +'<br>Minutes till departure: '+response.getElementsByTagName('minutes')[0].innerHTML
                +'<br>Platform: '+response.getElementsByTagName('platform')[0].innerHTML
                +'<br>Direction: '+response.getElementsByTagName('direction')[0].innerHTML
                +'<br>Destination: '+response.getElementsByTagName('destination')[0].innerHTML;
                return etd;
            },
            error: function(xhr) {
                console.log("error");
            }
        });
        infowindow.close();
        //etd is not defined
        var info = '<h2>'+route[0]+'</h2><p>'+route[4]+'<br>'+route[5]+'<br>'+route[6]+'<br>'+etd+'</p>';
        infowindow.setContent(info);
        infowindow.open(map, this);
    });
}

Now as expected the returned etd variable results in undefined due to the asynchronous nature, I understand that. What I cant seem to get around to is a solution. I attempted a callback function but that didn't work, it resulted in a b.get is not a function error when I tried to place the infowindow properties within said function. I think it messed with the route variable, honestly I'm not quite sure.

Once again any help appreciated.

Note, my attempt of a fix:

    function getVar(fn) {
        $.ajax({
            url: 'include/etd.php',
            type: 'GET',
            data: {orig: route[1]},
            success: function(response) {
                var etd = 'Time: '+response.getElementsByTagName('time')[0].innerHTML
                +'Minutes till departure: '+response.getElementsByTagName('minutes')[0].innerHTML
                +'<br>Platform: '+response.getElementsByTagName('platform')[0].innerHTML
                +'<br>Direction: '+response.getElementsByTagName('direction')[0].innerHTML
                +'<br>Destination: '+response.getElementsByTagName('destination')[0].innerHTML;
                fn(etd);
            },
            error: function(xhr) {
                console.log("error");
            }
        });
    } 
    getVar(function(etd) {
        var info = '<h2>'+route[0]+'</h2><p>'+route[4]+'<br>'+route[5]+'<br>'+route[6]+'<br>'+etd+'</p>';
        infowindow.close();
        infowindow.setContent(info);
        infowindow.open(map, this);

    });
});

}