Reynald Henryleo Reynald Henryleo - 1 year ago 100
Javascript Question

Google Map API shown blank map on bootstrap modal popup?



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





enter image description here

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

Answer Source

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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download