Google Map API shown blank map on bootstrap modal popup?

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>

I have a problems while using google map, it will shown blank map on bootstrap modal popup like that image. How to fix it?

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

Hide the map after it has been loaded then it works just fine.

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

Google Map API shown blank map on bootstrap modal popup?

Sign up