title: Google maps shows gray screen instead of map
body: <p>GoogleMaps is shown as gray box instead of map. And on windows resize it works  correctly.<br/>
  <strong>On window load maps show like this:</strong>
  <a href="https://i.stack.imgur.com/e7YXr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/e7YXr.png" alt="Screen 1"></a></p>
  
  <p><strong>After window resize map works correctly:</strong>
  <a href="https://i.stack.imgur.com/IyRxn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IyRxn.png" alt="Screen 2"></a></p>
  
  <pre><code>&lt;div style="width:100%; height:400px; padding:0; margin:0; border:3px solid gainsboro; border-radius:3px;"&gt;
      &lt;div id="canvas" style="width:100%; height:100%; padding:0; margin:0;"&gt;&lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p><br/></p>
  
  <pre><code>&lt;script src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY"&gt;&lt;/script&gt;
  &lt;script&gt;
   var map;
   var latLong;
   $(window).load(function () {
      latLong = new google.maps.LatLng(47.0303105, 28.815481);
       map = new google.maps.Map(document.getElementById('canvas'), {
           center: latLong,
           mapTypeId: google.maps.MapTypeId.ROADMAP,
           zoom: 14
       });
              console.log("Map is ready.")
   });
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>PS</strong> <em>Map is declared in a bootstrap modal div</em>
  <br/>Thanks for help.</p>