google maps api in javascript does not work if called from nested function

I am using google maps api to point certain locations. These locations I get from my rest api server. so when I try to run the code in my webapp, it does not show on the browser. (it showed once or twice and later not showing)

But the same code works when run in link here (http://www.w3schools.com/googleapi/tryit.asp?filename=tryhtml_map_overlays_marker) works fine (I provide the data hard coded here.)

the data to be provider in the left hand side is here http://pastebin.com/t6DNUS80

The code I have in my angular application is,

adminApp.controller('createController', function($scope, $http) {
var routes = [];
var myCenter;
var index = 0;
var map;

var getRouteData = function(bill, success) {
    $http({
        method: 'POST',
        url: '/api/convertToLatLng',
        data: {
            "address": bill.address,
            "location": bill.location,
            "state": bill.state,
            "zipcode": bill.zipcode
        },
        headers: {
            'Content-Type': 'application/json'
        }
    }).success(function(data) {
        var latLng = {};
        latLng.lat = data.geometry.location.lat;
        latLng.lng = data.geometry.location.lng;
        latLng.billing_id = bill.billing_id;
        success(latLng);
    });
};

var initialize = function() {
    var mapProp = {
        center: myCenter,
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
    var markers = [];
    routes.forEach(function(oneroute) {
        myCenter = new google.maps.LatLng(oneroute.lat, oneroute.lng);
        var marker = new google.maps.Marker({
            position: myCenter,
            animation:google.maps.Animation.BOUNCE,
            label : oneroute.billing_id,
            map: map
        });
        markers.push(marker);
    });
};

var loadCustomerDataInMap = function() {
    var getBillDetailsResponse = $http.get('/api/admin/trips/getBills');
    getBillDetailsResponse.success(function(bill) {
        bill.bills.forEach(function(eachBill) {
            getRouteData(eachBill, function(latlng) {
                routes.push(latlng);
                if(routes.length === bill.bills.length) {
                    console.log(JSON.stringify(routes));
                    myCenter = new google.maps.LatLng(routes[routes.length / 2].lat, routes[routes.length / 2].lng);
                    google.maps.event.addDomListener(window, 'load', initialize);
                }
            });
        });
    });
};
loadCustomerDataInMap(); 
});

Its almost the same code but in here, I am ruing the code only when the data is loaded.

Also, Once in a while my code runs properly (1 in 30 times) and displays the map.

Can someone tell me whats wrong with this code ?