グレーGoogleマップ

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この問題を再現します。

Answer 1

灰色のGoogleマップの問題は、popipのタイプのために発生しているようです：type: 'image'。だから私はtype: 'inline'に変更しなければならなかった。しかし、イメージを正しくレンダリングするには、マークアップコードの変更が必要です。基本的には、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"); 
     } 
    } 
});