google map show after screen resize?
<p>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.</p>

<p>Here is my js code:</p>

<pre><code>&lt;script&gt;
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');
            });
         } 
&lt;/script&gt;
</code></pre>

<p>
my div</p>

<pre><code>&lt;div id="map"&gt;&lt;/div&gt;
</code></pre>

<p>when i load application it appears like
<a href="https://i.stack.imgur.com/xFFmj.png" rel="noreferrer"><img src="https://i.stack.imgur.com/xFFmj.png" alt="enter image description here"></a></p>

<p>and after re size browser window it appears perfectly like this
<a href="https://i.stack.imgur.com/AlVHk.png" rel="noreferrer"><img src="https://i.stack.imgur.com/AlVHk.png" alt="enter image description here"></a> </p>

<p>kindly tell me how to fix this problem ?</p>