Google maps with bootstrap modal, partially loading

The maps are loading just fine in a normal div. But in Bootstrap modal half or some portion of the map is showing, but when I open console it fixes the problem and shows the map completely.

Photo without console opened

Photo with console opened

this is my styling:

<style>
#map_canvas{
    width:100%;
    height: 230px;
    border: 1px solid #333335;
    margin-bottom:20px;
}
</style>

HTML for modal:

<!-- Map Modal -->
<div class="modal fade" id="mapModal" tabindex="-1" role="dialog" aria-labelledby="mapModalLabel" aria-hidden="false">
    <div class="modal-dialog" >
        <div class="modal-content">
            <div class="modal-header" >
                <button type="button" class="close" data-dismiss="modal" aria-hidden="false">&times;</button>
                <h4 class="modal-title" id="mapModalLabel">Map: </h4>
            </div>
            <div class="modal-body" >
                <map id="map_canvas" nid="{{nhd.nid}}"></map>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->