灰谷歌地圖在Magnfifc彈出

Question

我創造Magnific酒店通過彈出一個彈出與此代碼：

$.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徽標和「使用條款」）

我試圖使用trigger(map, "resize");，但它不起作用。

Here is codepen再現這個問題。

Answer 1

看來，灰谷歌地圖問題的原因是popip的類型：type: 'image'。所以我不得不將其更改爲type: 'inline'。然而，它需要一些標記代碼的更改才能正確呈現圖像。基本上我們需要直接插入帶有圖像的html代碼：src:：

$.magnificPopup.open({ 
    items: { type: 'inline', 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>' 
    }, 
    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"); 
     } 
    } 
});