Googleマップのジッバーリ表示

Question

マイマップが正しく表示されません。

私は（歪んで右ボタンのアイコンに注目してください）これをまだ経験したことがありません。地図を生成するために使用されるコードは非常に簡単です：

<script> 
    function initMap() { 
     var mapDiv = document.getElementById('map'); 
     var map = new google.maps.Map(mapDiv, { 
      center: {lat: 43.828430, lng: 18.3445995}, 
      zoom: 18 
     }); 

     new google.maps.Marker({ 
      position: {lat: 43.828430, lng: 18.3445995}, 
      map: map 
     }); 
    } 
</script> 
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA9zhNUfid1PgR6FZ-g8xTp_NCqV3JvsHM&callback=initMap" async defer></script> 

アイデアはありますか？

Answer 1

問題はGoogleのレンダリングを妨害していたCSSルールが悪いことでした。

参考までに、imgの最大幅は100％でした。

Answer 2

Idkなぜ、私はあなたのコードを試したが、それは働いたが、マップも灰色だった。私が指摘したときstyle="width:500px;height:500px"マップが正常に動作するようになりました