Google maps with bootstrap modal, partially loading

Question

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 -->

Answer 1

From the documentation

resize - Developers should trigger this event on the map when the div changes size: google.maps.event.trigger(map, 'resize').

Because the modal is hidden when the map is rendered you have to call google.maps.event.trigger(map, 'resize') after showing the modal.

The fact that opening the console fixes the problem, is because it forces the container to resize, so the map is resized, thus refreshed, thus rendered correctly.

Answer 2

Call google map initialize method on shown event of bootstrap

for bootstap 3

$("#modal_map").on("shown.bs.modal",function(){
        initialize();
    })