Серые коробки появляются в некоторых частях встроенной карты Google в модальной коробке

У меня возникла проблема с внедрением Карты Google через API v3 в модальном поле.

Серые прямоугольники отображаются на холсте карты, когда отображается модальная мода. Изменение размера окна браузера, создание Web Inspector и т.д. делает все видимые карты, т.е. "принудительно повторно отображает" карта.

Родительский элемент элемента карты (section#map-modal, см. код ниже) имеет display: none, установленный в CSS на загрузке страницы. Модальный код JS автоматически устанавливает display: block при нажатии кнопки show. Если я временно удалю display: none из модального элемента, карта будет корректно отображаться при обновлении страницы. Не нравится ли Google Map иметь скрытый родительский элемент?

Я использую плагин Twitter Bootstrap modal jQuery, и я контролирую сам модаз с помощью CSS. Он фиксирован позиционирован, имеет ширину пикселя и т.д. Ничего необычного.

Я, конечно, искал решения, и многие указывают на метод API Google для запуска события resize:

google.maps.event.trigger(map, 'resize');

Я действительно сделал это, но безрезультатно.

Соответствующий код: https://gist.github.com/1591488

Как вы можете видеть, я запускаю события по строке 39.

(нажмите кнопку "Показать большую карту" внизу боковой панели).

Файлы:

fagerhult.js
fagerhult.map.js
bootstrap-modal.js
master.css

Я был бы глубоко признателен за любую помощь или дополнительную пару глаз в этом, так как я скоро сойду с ума над этим.

Ответ 1

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

$('#map-modal').on('shown', function () {
  google.maps.event.trigger(map, 'resize');
})

UPDATE: я просто понял, что это решение по-прежнему не центрирует карту должным образом, поэтому мне нужно добавить еще одну команду:

$('#map-modal').on('shown', function () {
  google.maps.event.trigger(map, 'resize');
  map.setCenter(new google.maps.LatLng(42.3605336, -72.6362989));
})

Ответ 2

Я обнаружил, что наличие display: none на родительском элементе карты (модальном) действительно перепутано. Я изменил его на visibility: hidden просто в отчаянии, чтобы увидеть, что произойдет, и это сработало!

Я также модифицировал модальный JS-код, чтобы установить модальное значение visibility: visible/hidden, когда модальное отображение/спряжение. В противном случае он снова установит display: none/block, что снова создаст серые прямоугольники.

Ответ 3

Мое решение для bootstrap-modal.js v 2.0

заменить класс "скрыть" на "невидимый" в Modal div

<div id="map_modal" class="modal fade invisible">
...
</div>

функция javascript

function open_map()
{   
   $('#map_modal').removeClass("invisible");
   $('#map_modal').modal('toggle');   
}

link html

<a href="javascript:open_map()">Open map</a>

Ответ 4

Для тех, кто использует bootstrap, мне пришлось удалить "fade" из моего "модального" класса

<div class="modal fade"

<div class="modal" ...

Я пробовал предыдущие решения с вызовом google.maps.event.trigger(map, 'resize'); но полагал, что

.on("shown.bs.modal" ...

никогда не вызывался. Этот вопрос, казалось, указывал мне на удаление затухания.
https://github.com/twbs/bootstrap/issues/11793

Это не оптимальное решение, так как fade действительно очень приятно иметь...

Ответ 5

Проблема в том, что если вы сделаете что-то вроде этого:

$("#mapModalLink").click(function(){
  google.maps.event.trigger(map,"resize");
});

заключается в том, что ваш модальный, вероятно, не был открыт (и отображается в нужном размере), когда запускается событие изменения размера. Чтобы решить эту проблему:

$("#mapModalLink").click(function(){
  $("#mapModal").show();
  google.maps.event.trigger(map, 'resize');
});

Работал для меня хотя бы:)

Ответ 6

У меня была эта проблема, и я решил, что это делает обратный вызов методу draw. Я думаю, это происходит потому, что вы рисуете карту раньше, чем показываете диалог.

Я использовал этот код для его решения (это не было модальное окно):

$('#map').show(function()
{
    var punto = new google.maps.LatLng(this.latitud, this.longitud);
    var myOptions = {zoom: 15, center: punto, mapTypeId: google.maps.MapTypeId.ROADMAP,mapTypeControl:false, draggable:false};
    var map = new google.maps.Map(document.getElementById('mapa'),  myOptions);
    var marker = new google.maps.Marker({
    position:punto,
    map: map,
    title: this.nombre
});
});

Ответ 7

google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
     google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
          google.maps.event.trigger(map, 'resize');

     });
});

Ответ 8

Насколько я немного зациклился на Chrome, используя JS live edit, задержка выполнения resize, чтобы ждать, пока модальная анимация может работать:)

https://gist.github.com/1592330#L107

Ответ 9

отображается рендер без изменения размера.

Почему изменение размера дает вам правильную карту?

Поскольку браузер снова отображает представление.

Как это исправить?

Чтобы получить правильную компоновку карты на любой панели, которая запускается в последнее время, карта должна быть окрашена после загрузки панели. Это может быть достигнуто с помощью (setTimeout) кода, как указано ниже. Цель кода - вызвать событие изменения размера карты через 60 миллисекунд.

setTimeout(function () {
        uiGmapIsReady.promise().then(function (maps) {
            google.maps.event.trigger(maps[0].map, 'resize');
            lat = -37;
            lon = 144;
            maps[0].map.panTo(new google.maps.LatLng(lat,lon));
            var marker = {
                id: Date.now(),
                coords: {
                    latitude: lat,
                    longitude: lon
                }
            };
            $scope.map.markers = [];
            $scope.map.markers.push(marker);
            console.log($scope.map.markers);
        });
    }, 60);