google map show after screen resize?

Question

I'm having problems with the google map I'm embedding, I don't understand why on load the map not appears and only appear when I resize the window, I went through different solutions in stackoverflow but they don't work for me.

Here is my js code:

<script>
function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 31.554606, lng: 74.357158},
          zoom: 14
        });
 google.maps.event.addListenerOnce(map, 'idle', function() {
               google.maps.event.trigger(map, 'resize');
            });
         } 
</script>

my div

<div id="map"></div>

when i load application it appears like

and after re size browser window it appears perfectly like this

kindly tell me how to fix this problem ?

Answer 1

call google.maps.event.trigger(map, 'resize') when your "div id=map" will be visible. Please see How do I resize a Google Map with JavaScript after it has loaded?