如果尝试第二次请求，则Google Map无法为同一div正确呈现

Question

I have Master/Child type page. In master page there a link which open detail page. On detail page I am displaying Map. Detail page is opened in fancy box with Ajax call. On first iteration of detail page click, I am appending google script to page. I am not appending google script from next detail click as Script already added to DOM. On first iteration of detail page click, Map is loading properly but after that Map is not rendering properly. Map rendered in only half part of div.

Code snippet as below for

var instanceTime = 0
function loadgoogleapiInfoPopup() {

    mapCanvasId = "map_canvas_gdi";
    if (instanceTime == 0)
    {
        instanceTime = 1;
            var script = document.createElement('script');
            script.type = 'text/javascript';
            script.id = 'GoogleAPIMapInfoPop';
            script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' + 'callback=infopopup.Init';
            document.body.appendChild(script);
        }
    else {

        $("#map_canvas_gdi").html('');        
        infopopup.Init();
        google.maps.event.trigger(infopopup.Map, 'resize');

    }
}

infopopup.Init = function () {    
    function initialize() {
        var center = new google.maps.LatLng(53.961687, -1.746825);

        var options =
        {
            zoom: 6,
            center: center,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        infopopup.Map = null;
        infopopup.Map = new google.maps.Map(document.getElementById(mapCanvasId), options);


    }

    initialize();
    infopopup.ClearMarkers();
    infopopup.FillMarkers();
}

Answer 1

Thanks ..Problem is solved , I have applied google.maps.event.trigger(garagemapinfopopup.Map, 'resize'); in parent page, after child loaded in div.