Изменение размера карты Google не решает проблему частичного отображения в модальном диалоге

Я знал, что этот вопрос поднимался и отвечал много раз, но я не могу заставить предложенные решения работать для меня... Я показываю карту Google в простом модальном диалоге. Вне модального диалога карта отображается правильно. Однако, попав внутрь модальной обертки, на первой итерации отображается только часть карты (см. Ниже). Казалось бы, решение связано с привязкой события "изменить размер" к карте, но оно не работает для меня...

Первая итерация: при открытии модального ряда для первой итерации моя карта отображается с частичным разрезом, смещенным к верхней RHS и наложенным на полную карту. После закрытия первого диалога экран возвращается в исходное состояние.

Вторая и последующие итерации: на последующих итерациях карта отображается правильно, но при закрытии виден цвет фона холста карты.

HTML:

<body>
    <button class="modalMap">With Modal </button>
    <button class="nonModalMap">Without Modal </button>
    <div id="mapCanvas"></div>
</body>

CSS:

#simplemodal-overlay    {background-color:#000;}
#simplemodal-container  {color:#999; background-color:#fff;}
#simplemodal-container a{color:#ddd;}

.modalMap:hover,.nonModalMap:hover {
    cursor:pointer;
}
#mapCanvas {
    position:relative;
    width:480px;height:300px;
}

JS:

$(document).ready(function(){
    var myMap;
    $('.modalMap').click(function(){
        buildMap();
        $('#mapCanvas').modal(
            {onOpen:function(dialog){
                dialog.overlay.fadeIn('fast',function(){
                    dialog.data.hide();dialog.container.fadeIn('fast',function(){
                            dialog.data.slideDown('fast');
                    });
                });
            }

            ,onClose:function(dialog){
            dialog.data.fadeOut('fast',function(){
                dialog.container.hide('fast',function(){
                        dialog.overlay.slideUp('fast',function(){
                                $.modal.close();
                                });
                        });
                });
            }
        });
    });

/*  But without the modal the map displays correctly... */
    $('.nonModalMap').click(function(){
        buildMap();
    });
});

function buildMap() {
    var kpl = {
        Place: function (data, map) {

            var self = this;

            this.data = data;

            var coords = data.geo_coords.split(',');
            this.position = new google.maps.LatLng(coords[0], coords[1]);

            this.marker = new google.maps.Marker({
                position: this.position, 
                map: map
            });

            google.maps.event.addListener(this.marker, 'click', function() { 
                if (self.data.url) {
                    window.location.href = self.data.url
                }
            });
        },
        MapManager: function (div, data) {
            this.map = new google.maps.Map(div, {
                zoom: 15,
                center: new google.maps.LatLng(53.818298, -1.573263),
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                scrollwheel: false,
                backgroundColor: '#cccccc',
                streetViewControl: false,
                navigationControl: true,
                mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
            });
            saveCenter = this.map.center;

            this.places = [];

            for (var i in data) {
                if (data.hasOwnProperty(i)) {
                    this.places.push(new kpl.Place(data[i], this.map));
                }
            }
        }
    };

    myMap = new kpl.MapManager($('#mapCanvas').get(0), [{
        url: "mailto:info@????.com", 
        geo_coords: "53.818298, -1.573263",
        name: "Kensington Property LS6"
    }]);

}

/ * плюс простая модальная библиотека... */

Я воссоздал код в jsfiddle - http://jsfiddle.net/redApples/j23ue0n1/32/

Кто-нибудь может спасти мое здравомыслие...?

Источник

0 ответов

Другие вопросы по тегам