Не отображается гугл карта

Для вставки на сайт карт использую следующий код. При загрузке страницы в блоке с id map серое поле и карта появляется при резайзе страницы. Тоже самое если вставлять с помощью айфрейм. Что это может быть за проблема. На мобильных устройствах все нормально работает

<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAKsR1Dub2FitjXVQTJfuZKvnz5DOYTz9c&amp;callback=initMap&amp;language=de-DE"></script>
<script>
function initMap() {

          var mapOptions = {
              zoom: 16,
              scrollwheel: true,                 
              center: {lat: 48.342574, lng: 10.896309},
             styles: [   {"featureType":"all",       "stylers":[         {"saturation":0},           {"hue":"#4fc52e"}       ]   },  {"featureType":"road",      "stylers":[         {"saturation":-70}      ]   },  {"featureType":"transit",       "stylers":[         {"visibility":"off"}        ]   },  {"featureType":"poi",       "stylers":[         {"visibility":"off"}        ]   },  {"featureType":"water",     "stylers":[         {"visibility":"simplified"},            {"saturation":-60}      ]   }]
          };

          var mapElement = document.getElementById('map');
          var map = new google.maps.Map(mapElement, mapOptions);
          var marker = new google.maps.Marker({
              position: {lat: 48.339574, lng: 10.906309},
              map: map,
              title: 'Haunstetter Str. 112, 86161 Augsburg'
          });
      }
</script>