I've been trying to embed a Google Maps on my website, but for some reason, it keeps stretching and showing grey sections with rounded borders. Here's the code I'm using:
<div class="p-5 col-6 d-flex flex-column justify-content-between">
<div class="d-flex justify-content-center map-container">
<div id="map"></div>
</div>
</div>
<script type="text/javascript">
var map;
function initMap() {
// Create the map with no initial style specified.
// It therefore has default styling.
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 38.9340635,
lng: 16.2328417
},
zoom: 10,
scrollwheel: false,
dropPins: true,
panBy: [0,0],
tilt: 0,
heading: 0,
mapType: 'roadmap',
panControl: false,
zoomControl: false,
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
overviewMapControl: false,
plusMinusZoom: false
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCAeasy64XNqw6_DVPPmqX1cnqJNqSu7CU&callback=initMap" async defer></script>
Here is the CSS related to it:
.map-container {
position: relative;
display: block;
height: 100%;
}
#map {
position: relative;
display: block;
bottom: 0;
height: 100%;
width: 100%;
border-radius: 15px;
}
This is how it appears on the website:
https://i.sstatic.net/cI4MG.png
What could be causing this issue?