google map не отображается в модальном окне

[ninzzo]

На странице есть рабочий блок с картой - <div id="mapCanvas"></div>
Все работает.

Хочу засунуть его в модальное окно:

Код: Выделить всё

<?php $this->widget('bootstrap.widgets.TbModal', array(
    'id' => 'myModal',
    'header' => 'Modal Heading',
    'content' => '<div id="mapCanvas"></div>',
    'footer' => array(
        TbHtml::button('Save Changes', array('data-dismiss' => 'modal', 'color' => TbHtml::BUTTON_COLOR_PRIMARY)),
        TbHtml::button('Close', array('data-dismiss' => 'modal')),
    ),
)); ?>

Вставил в контент и теперь окно открывается, зачатки блока карты тоже есть, но блок просто серым цветом.

Попробовал привязать initialize() (функция запуска карты) на момент открытия окно. При первом открытии модального окна карта есть(но без маркеров, дальше пропадает).


Как сделать что бы этот блок <div id="mapCanvas"></div> работал в модальном окне?

[ninzzo]

При открытии окна карта серая до того момента пока я не нажму "Просмотр кода элемента". Тогда она начинает работать. Можно закрывать и открывать окно и все нормально.

Что это за баг?

[valentinich]

Была аналогичная проблема, но с отображением в табе. Решением было необходимость тригерить собыите resize. Что-то вроде:

Код: Выделить всё

<script>
    var map;
    
    function resizeMap() {
        if(typeof map =="undefined") return;
        setTimeout( function(){ resizingMap(); } , 600);
    }

    function resizingMap() {
        if(typeof map =="undefined") return;
        var center = map.getCenter();
        google.maps.event.trigger(map, "resize");
        map.setCenter(center); 
    }
    $(function() {
        $('a[href=#geo]').on('click', function() {      
            resizeMap();
        });
    });
</script>