Google Map is not rendering properly for same div if tried for second request

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.