title: google map show after screen resize?
body: <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>