Why does the map on my website only load when the browser window is resized?
Below is the JavaScript code being used:
<div class="map-cont">
<div id="map" class="location-container map-padding" style="width:100%;height:400px;background:yellow"></div>
<script>
function initMap() {
var uluru = {lat: 45.4420432, lng: 15.999982};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: uluru,
scrollwheel: false
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBEQc2mBnThiUz-Pj472iG1i2FyqJvNb00&callback=initMap">
</script>
</div>
Plus, here is the corresponding CSS:
#map { width: 100% !important; }
.map-cont { margin-left: 10%; }
The issue seems to be related to the .map-cont { margin-left: 10%; } line in the CSS file. When removed, it works fine but you prefer not to have the map fullscreen.