Код выше срабатывает после кода ниже

$(".city_submit").click(function(){
    address = $(".s1_city_autocomplete").val();
    var googleGeocoder = new GeocoderJS.createGeocoder({'provider': 'google'});
    googleGeocoder.geocode(address, function(result) {
        console.log(result);
        str=JSON.stringify(result);
        alert(str);
        str=str.replace('[', '').replace('{', '').replace('}', '').replace(']', '');
        pararr=str.split(',');
        lat=pararr[0].replace('"latitude":','');
        lng=pararr[1].replace('"longitude":','');
        lat=parseFloat(lat);
        lng=parseFloat(lng);
        $(".names").val(address);
        $(".coords").eq(0).val(lat);
        $(".coords").eq(1).val(lng);
    })
    var mlayers = layers();
    var proj = dw.initProj();
    var cx = lng * 180 / Math.PI,
        cy = lat * 180 / Math.PI,
        rect = dw.viewsizeOf(),
        skyRadius = 0.6 * Math.sqrt((rect[2] - rect[0]) * (rect[2] - rect[0]) + (rect[3] - rect[1]) * (rect[3] - rect[1])),
        eaRadius = Math.sqrt((proj.p15 - 1.0) / (proj.p15 + 1.0)) * 180 / Math.PI,
        eaRadiusM = proj.a,
        rotate = dw.m.rotate,
        centerof = dw.viewcenterOf(),
        gmtime = getSelTime(),
        darkhide = ('earth' in mlayers);
    alert(cx);
    alert(cy);

Проблема заключается в том что сначала выводятся 2 нижних алерта а потом верхний и я не могу понять как это вообще возможно