Google Maps APIはブートストラップモードのポップアップで空白のマップを表示していますか？

Question

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a class="showmap">click to show map</a> 
 
<div class="hidden" style="display:none;"> 
 
<div id="mapp" style="height:300px; border:solid 1px #ccc;"></div> 
 
</div> 
 
<script> 
 
$('.showmap').click(function(){ 
 
\t $('.hidden').show(); 
 
}); 
 
</script> 
 
<script> 
 
function myMap(){ 
 
\t   var map = new google.maps.Map(document.getElementById('mapp'), { 
 
      center: {lat: -4.131140, lng: 120.861760}, 
 
      zoom: 2, 
 
      mapTypeId: 'roadmap' 
 
     }); 
 
} 
 
</script> 
 
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDAuTFPlEcDfHzqTWBaSzfaGPWIJpyOUTk&callback=myMap"></script>

のGoogleマップを使用している間、私は問題を抱えている、それはその画像のようなブートストラップモーダルポップアップ上の空白のマップを示します。それを修正するには？

Answer 1

地図を非表示にした後、地図を非表示にします。

.hidden div { 
 
    opacity: 0 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a class="showmap">click to show map</a> 
 
<div class="hidden"> 
 
    <div id="mapp" style="height:300px; border:solid 1px #ccc;"></div> 
 
</div> 
 
<script> 
 
    $('.showmap').click(function() { 
 
    $('.hidden').removeClass("hidden") 
 
    }); 
 

 
</script> 
 
<script> 
 
    function myMap() { 
 
    var map = new google.maps.Map(document.getElementById('mapp'), { 
 
     center: { 
 
     lat: -4.131140, 
 
     lng: 120.861760 
 
     }, 
 
     zoom: 2, 
 
     mapTypeId: 'roadmap' 
 
    }); 
 
    } 
 

 
</script> 
 
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDAuTFPlEcDfHzqTWBaSzfaGPWIJpyOUTk&callback=myMap"></script>