Не удается загрузить API JavaScript Карт Google в Bootstrap Modal

У меня возникают проблемы с загрузкой API Карт Google во всплывающем модальном окне.

HTML:

<div class="portfolio-modal modal fade" id="portfolioModal3" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content">
        <div class="close-modal" data-dismiss="modal">
            <div class="lr">
                <div class="rl">
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2">
                    <div class="modal-body">
                        <h2>Warehousing</h2>
                        <p class="item-intro text-muted"></p>
                        <div id="warehouse-map-canvas"></div>
                        <p class="item-description">Short description</p> <p class="item-description">Short description</p>
                        <button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Project</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

JavaScript:

<script>
    var map;
    function initialize() {
        var center = new google.maps.LatLng(41, -87);
        var mapOptions = {
          center: center,
          zoom: 14,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var mapCanvas = document.getElementById('warehouse-map-canvas');
        map = new google.maps.Map(mapCanvas, mapOptions);

        var marker = new google.maps.Marker({
            position: center,
            map: map,
            title: 'Warehouse'
        });

        /*google.maps.event.addListenerOnce(map, 'idle', function() {
           google.maps.event.trigger(map, 'resize');
           map.setCenter(center);

           This bit of code seems to do nothing for me.
        });*/
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>

Что происходит, я нажимаю и вызываю всплывающее модальное окно, и пространство div карты заполняется отображением элементов карт Google, таких как панель масштабирования, значок просмотра улиц и т. Д. Однако область карты внутри серого цвета.

Вы можете прокручивать, масштабировать и иным образом панорамировать, но это не повлияет на карту. Маркер карты появляется, когда он находится в верхнем левом углу экрана, но находится на сером море.

РЕШЕНИЕ:

Используя эти модальные js и css начальной загрузки (https://github.com/jschr/bootstrap-modal ) Мне удалось обновить карту следующим образом:

$('#portfolioModal3').on('shown', function () {
   google.maps.event.trigger(map, 'resize');
   map.setCenter(new google.maps.LatLng(41, -87));
});

после google.maps.event.addDomListener (окно, «загрузка», инициализация);