gmap shows one fourth after one load in jquery dialog box

Question

I am trying to show gmap on the basis of longitude and latitude which are available in repeater control data source .here is my code

<script src="http://maps.google.com/maps/api/js?key=myapikey&sensor=false"
    type="text/javascript"></script>
<script type="text/javascript">
    $('document').ready(function () {
        $('.mapicon').click(function (e) {              
            init($(this).next('.hdnLatitude').val(), $(this).nextAll('.hdnLongitude').val(), $(this).nextAll('.hdnInfoWindow').val());
            $("#popup_container").dialog({ modal: true }, { border: 10 }, { width: 513 }, { height: 450 });
        });
    });
</script>

and this is the init method which load gmap in

<script type="text/javascript">

        function init(hdnLatitude, hdnLongitude, hdnInfoWindow) {
            //            alert(hdnLatitude);
            //            alert(hdnLongitude);

            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 10,
                center: new google.maps.LatLng(hdnLatitude, hdnLongitude),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });

            var infowindow = new google.maps.InfoWindow();

            var marker, i;

            var image = 'images/map-icon.gif';
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(hdnLatitude, hdnLongitude),
                map: map,
                icon: image
            });

            var infoWindow = new google.maps.InfoWindow();

            google.maps.event.addListener(marker, 'click', function () {
                infoWindow.setContent(hdnInfoWindow);
                infoWindow.open(map, marker);
            });

        }
    </script>

and this is the HTML

<div id="popup_container" style="display: none;">
        <div id="map" style="width: 500px; height: 400px;">
        </div>
    </div>

the problem is when first time click on mapicon then gmap appears correctly but after that in every call popup opens but map appear one fourth and marker is not appearing correctly.

Edited

Unfotunately i am not getting a single answer or may be possible that my question is not clear to SO users.

I have made a test page where you can check that whats the exact problem.

on first click its shows perfect map but when you close popup once and again click on gmap then popup opens but gmap shows one fourth.

this is link of test page

Answer 1

Finally problem resolved by making some changes or adjustment in dialog open method

initially use the $("#popup_container").dialog({ autoOpen: false }); instead of

style=display:none for not showing popup on page load .

second change i made open the popup using this call to open method

$('#popup_container').dialog('open');

and after that i call the init() method

and problem is solved .

Here is final document.ready method

<script type="text/javascript">
        $('document').ready(function () {
            $("#popup_container").dialog({ autoOpen: false });
            $('#gmap').click(function () {
                $('#popup_container').dialog('open');
                $("#popup_container").dialog({ modal: true }, { border: 10 }, { width: 500 }, { height: 340 });
                init();
            });
        });
    </script>