Серая карта Google Maps в Magnific Popup

397

13 марта 2017, 08:29

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

Я использую библиотеку 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, иллюстрирующий проблему.

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

Answer 1

Дублирую ;)

Думаю дело в 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"); 
    } 
  }, 
   
});

#map { 
  width: 100%; 
  height: 500px; 
}

<link rel="stylesheet prefetch" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> 
 
<link rel="stylesheet prefetch" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css"> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script> 
 
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAUAAJjs1T751i6-4U__XnNCSQz-xXAelI&amp;libraries=places"></script> 
 
 
 
<button class="btn btn-1">button 1</button> 
<button class="btn btn-2">button 2</button>