bootstrap modal popup

hi, am using modalpopup in bootstrap, in that div i have binded google maps, first time the map is displaying, second time onwards popup displaying without maps.. . can you help me in this.
========
java script table design user clicks dynamic table row column one, table id is StatusData user clicks on first column

<td width='10%'><a href='#GMap'> <img src='../../Images/mmap.png'/></a> </td><td class='vid'> <a href='#VDetails'>"+ obj.VID + " </a> </td>
===========
div pop up design using bootstrap

 <div class="remodal" id="GMap" data-remodal-id="GMap">
    <div class="contenttitle2 modal_title">
        <h3>Google Map</h3>
    </div>
    <div id="port_content">
        <div id="mymodal">
            <div id="map-canvas" style="width: auto; height: 300px;"></div>
        </div>
    </div>
</div>

=====
jQuery("#GMap").on("open", function () {
        $('#StatusData tbody tr td:nth-child(1)').click(function () {
            var $row = $(this).closest("tr");
            $("#map-canvas").empty();
            //        alert($row.find(".vid").text());
        });
        var map;
        var latlng = new google.maps.LatLng(5.72144, 100.41659);
        var icon;
        var myOptions = {
            zoom: 16,
            center: latlng
        };
        map = new google.maps.Map(jQuery('#map-canvas')[0], myOptions);
        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            icon: icon
        });
        google.maps.event.trigger(map, 'resize');
        map.setZoom(map.getZoom());



        var infowindow = null;
        infowindow = new google.maps.InfoWindow({
            content: "holding..."
        });

        google.maps.event.addListener(marker, 'mouseover', function () {

            var windowcontent = "test";
            infowindow.setContent(windowcontent);
            infowindow.open(map, this);
        });
    });

==============