Google Map API在bootstrap模式弹出窗口中显示空白地图？

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(){
	$('.hidden').show();
});
</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>

我在使用谷歌地图时遇到问题，它会在该图像的bootstrap模态弹出窗口中显示空白地图。如何解决？

Answer 1

加载后隐藏地图然后它就可以了。

＆＃13;

＆＃13;

.hidden div {
  opacity: 0
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;