Как запустить GOOGLE карту в модальном окне?

Question

[Cheizer]

Друзья! Поясните пожалуйста, почему не работает Google карта в модальном окне?
Вернее она работает, и ошибок нет, но не ПРОГРУЖАЕТСЯ, пока курсором ее не "пнешь".
Почему так получается? Как заставить ее загружаться вместе с окном?
Вот пример https://codepen.io/Cheizer/pen/jOERLOM



модальное окно использую скрипт arctmodal https://arcticlab.ru/arcticmodal/#examples

Comments

[freeExec]

А у меня сразу отобразилась. Но попробуйте вручную вызвать метод refresh, render, repaint или что-то в этом духе у карты.

[Cheizer]

freeExec, блин, я всю голову сломал, только в окне такой глюк, у меня серый фон вместо карты, пока курсором не поюзаешь не появляется. В разных браузерах смотрел.

[Cheizer]

Moon Presence, да вот в том то и дело, что если ее просто вставить на страницу, она сразу загрузится, а в окне нет. Не пойму в чем дело, карта стандарт.

[Шохрух Шаймардонов]

Роман Кузнецов, дело в том, что в оф.доках пишут, что если изначально у карты display: none, а потом block, то он будет так вот лагать. В стэковерфло уже писали про это (ищите).
Как вариант (костыль) предложу программно сделать действие, после которого карта отобразится (используйте этот костыль, если не хотите верстку/стили менять)

[Cheizer]

Шохрух Шаймардонов, агааа! Вот оно в чем дело, буду капать. Есть вариант делать после вызова окна,
google.maps.event.trigger(theMap, 'resize'); Или смотрю доки окна и там есть калбеки, и вот на beforeOpen просто initialize вешаю вроде получается.

beforeOpen: function(data, el) {
           initialize();
    },

[Шохрух Шаймардонов]

Роман Кузнецов, ну удачи. Решение свое потом можете в ответы закинуть. Чтобы остальным помогло

Answer 1

[Cheizer]

В общем, если вы прячете блок с картой по принципу display none block. То достаточно выполнить событие resize для карты.
Или в функцию отдельную запихнуть и вызывать ее когда нужно, или на событие on click

function showMap(){
google.maps.event.trigger(map, 'resize');
}
//или
$('#btn').on('click', function() {
    showMap();
google.maps.event.trigger(map, 'resize');  //или сразу
	});

Но у меня другая проблема, в модальных окнах это не сработает, так как в дереве при загрузке не было карты, и нужно инициализировать карту в окне. Тут нужно смотреть доки popup окна вашего и на callback функцию вешать вызов функции initialize(); или на события event. Но нужно вызвать initialize(); пример

$('.get-direction').on('click',function() {
    // if map is null (the first time), initiate Google maps;
    if (! map) {
      initialize();
    }
    searchAddress( $(this).html() );
    showMap();
  });
  $('.close-map').click(function() {
    hideMap();
  });