Карты Google показывают серый экран вместо карты

Question

GoogleMaps отображается как серый квадрат вместо карты. И при изменении размера окна он работает правильно.
На картах нагрузки окно показать как это:

После изменения размера окна карта работает правильно:

<div style="width:100%; height:400px; padding:0; margin:0; border:3px solid gainsboro; border-radius:3px;"> 
    <div id="canvas" style="width:100%; height:100%; padding:0; margin:0;"></div> 
</div> 

<script src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY"></script> 
<script> 
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.") 
}); 
</script> 

PSКарта объявлена ​​в загрузочном модуле div
Спасибо за помощь.

Answer 1

Google ребята сделали специальный триггер событий, который я использую в этом случае для предотвращения серой карты:

google.maps.event.trigger(map, 'resize'); 

Вам нужно позвонить 'resize' после отображения кода полного или даже с некоторой небольшой задержкой. Попробуйте вставить этот триггер сразу после вашей строки console.log("Map is ready.")