google-maps-api-3 - maps.event.trigger Resize( ) が機能しない

Question

コードとその仕組みに精通していますが、サイズ変更イベントを適切に配置できないため、マップが画面に灰色のタイルをレンダリングします。サイズ変更イベントを正確に配置する必要がある場所を教えてください。ここに私のコードがあります:

bank.atmDetailsSuccess = function(response) {

    bank.locate = response;
    bank.getAtmStatus();

};


bank.getAtmStatus = function(results, status) {
    var status = bank.locate.Status[0].Value0;
    locate = bank.locate;
    var map;
    if (status == bank.constants.STATUS_ERROR) {
            var message = locate.Error[0].Value0;
            WL.simpledialog.show(message);
        } else if (status == bank.constants.STATUS_SESSION_EXPIRED) {
            WL.simpledialog.show("Session Expired!!");
        } else if (status == bank.constants.STATUS_SUCCESS) {
            map = bank.initializeAtm();
            google.maps.event.addDomListener(window, 'load', initializeAtm);
            google.maps.event.addDomListener(window, "resize", function() { 
                alert("In");
              var center = map.getCenter();
              google.maps.event.trigger(map, "resize");
              map.setCenter(center); 
              map.setZoom(10);
              });

    }
};


bank.initializeAtm = function(){
    locate = bank.locate;
    var firstlat = locate.Stmt[0].Value5;
    var firstlong= locate.Stmt[0].Value6;
    // var latlng = new google.maps.LatLng(latitude,longitude);

    var image = {
            //url: bank.constants.MARKER_PATH,
           url: 'images/720x720/pin.png',
            // This marker is 20 pixels wide by 32 pixels tall.
            size: new google.maps.Size(32, 40),
            // The origin for this image is 0,0.
            origin: new google.maps.Point(0,0),
            // The anchor for this image is the base of the flagpole at 0,32.
            anchor: new google.maps.Point(0, 32)
          };
    var myOptions = {
            zoom: 10,
            center:new google.maps.LatLng(firstlat, firstlong),
            mapTypeId: google.maps.MapTypeId.ROADMAP

          };

    map = new google.maps.Map($('#map-canvas')[0], myOptions);

    geocoder = new google.maps.Geocoder();
    bank.currentposition();
    $('#mapbranch').hide();
    $('#map-canvas').show();
    $('#atm').html("ATM near your current location");
    $('#results').html("");
    var directionsService = new google.maps.DirectionsService();
    MVC.local.directService = directionsService;
    directionsRenderer = new google.maps.DirectionsRenderer({
          suppressMarkers: true} );
    MVC.local.renderer = directionsRenderer;
    var n;
    for(n=0; n<locate.Stmt.length; n++)
    {
        var value = locate.Stmt[n];
        name = value.Value0,value.Value1;
        lat = value.Value5;
        lon = value.Value6; 
        bank.getDistanceFromLatLonInKm(12.919336, 77.502291,lat,lon);
        var myLatLng = new google.maps.LatLng(lat,lon);
        var marker = new google.maps.Marker({
            position: myLatLng,
            icon:image,
            map: map,
            title: name,
            zIndex: 1
        });

        bank.buildInfoWindow(marker,map,value[n]);
    }
    return map;
};

注：これは完全に機能するコードのみです。ブラウザのサイズを手動で変更するとレンダリングが機能しますが、ロード中にサイズを変更することはできません。変数名は気にしないでください。サイズ変更イベントを除いて、すべての関数呼び出しは有効です。