Серая карта Google Maps в Magnific Popup. Как исправить?

Question

[CMTV]

Здравствуйте!

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

Мне также необходимо выводить Google карту под фотографией. Для реализации этой идеи я использую следующий код:

$.magnificPopup.open({
    items: { src: 'http://lorempixel.com/1920/1080/', type: 'image' },
    image: { markup: '' +
        '<div class="mfp-figure">' +
        '    <div class="mfp-close"></div>' +
        '    <div class="mfp-img"></div>' +
        '    <div class="mfp-bottom-bar"><div id="map"></div></div>' +
        '</div>'
    },
    callbacks: {
        open: function () {
            var map_options = {
                center: {lat: latitude, lng: longitude},
                streetViewControl: false,
                zoom: 8
            };

            var map = new google.maps.Map(document.getElementById('map'), map_options);

            google.maps.event.trigger(map, "resize");
        }
    }
});

В коде выше я просто добавляю контейнер с Google Maps картой под фотографию. Проблема заключается в том, что карта вся серая. Не помогает даже вызов trigger(map, "resize");!

Вот пример на CodePen, иллюстрирующий проблему.

Никак не могу разобраться, в чем же может быть проблема. Прошу помочь.

Уже и на SO, и на русском SO спрашивал. Все молчат.

Comments

[Eugene]

Что значит серая? посмотрев ваш пример у меня обычная карта была..

[HamSter]

Eugene: При открытии попап окна изначально серая область пока не начнешь ресайзить

Answer 1

[HamSter]

Думаю дело в type: image

Переделала на type: inline (универсально для кастомного содержимого):

$('.btn').magnificPopup({
  items: { 
    src: 
          '' +
          '<div class="mfp-figure">' +
          '<button title="Close (Esc)" type="button" class="mfp-close">×</button>' +
          '<img class="mfp-img" src="http://lorempixel.com/1920/1080/">' +
          '<div class="mfp-bottom-bar"><div id="map"></div></div>' +
          '</div>',
    type: 'inline' 
  },
  callbacks: {
    open: function(){
      var map_options = {
                center: {lat: 55.753994, lng: 37.622093},
                //streetViewControl: false,
                zoom: 8
            };

            var map = new google.maps.Map(document.getElementById('map'), map_options);
          
          google.maps.event.trigger(map, "resize");
    }
  },
  
});

Cмотри CodePen

P.S: чуточку поменяла координаты карты, просто, для наглядности

Comments

[CMTV]

Спасибо, работает! Правда, вокруг изображения появилась неприятная рамка...