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

Question

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

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

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

Я использую модальный плагин jQuery для Bootstrap в Твиттере и сам управляю модалом с помощью CSS.Это фиксированное положение, ширина пикселя и т. Д. Ничего необычного.

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

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

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

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

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

(нажмите Просмотреть увеличенную карту * Кнопка 1028 * в нижней части боковой панели.)

Файлы:

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

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

Answer 1

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

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

ОБНОВЛЕНИЕ: Я только что понял, что это решение все еще не центрируеткарта правильно, поэтому мне нужно было добавить еще одну команду:

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

Answer 2

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

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

Answer 3

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

заменить класс "hide" на "невидимый" в Модальном div

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

функция javascript

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

ссылка HTML

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

Answer 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

Это не оптимальное решение, так как затухание на самом деле очень приятно иметь ...

Answer 5

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

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

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

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

работал у меня как минимум:)

Answer 6

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

     });
});

Answer 7

У меня была эта проблема, и я решил ее с помощью обратного вызова метода 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
});
});

Answer 8

карта успешно отрисована без изменения размера.

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

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

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

Чтобы получить правильное расположение карты на любой панели, которая была запущена в последнее время, карту необходимо раскрасить после загрузки панели. Это может быть достигнуто с помощью кода (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);

Answer 9

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

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