I am experiencing an issue with Google Maps where it is displaying a grey box or sometimes showing nothing/white. I have tried various solutions found online but none of them have worked for me. Does anyone have a solution? I even attempted to change the zoom level, but that did not resolve the problem. There are no errors being displayed in the console.
<head>
<script src="http://maps.google.com/maps?file=api&v=3&hl=en&key=GOOGLE_GENERATED_API&sensor=true"type="text/javascript"></script>
<script>
function myMap() {
var myCenter = new google.maps.LatLng(31.4856,74.3406);
var mapCanvas = document.getElementById("map");
var mapOptions = {center: myCenter, zoom: 8};
var map = new google.maps.Map(mapCanvas, mapOptions);
var marker = new google.maps.Marker({position:myCenter});
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({
content: "Welcome to Ali Institute of Education"
});
infowindow.open(map,marker);
}
</script>
</head>
<body onload="myMap()">
<?php include '/layout/header.php';?>
<!-- Contact Us Content -->
<div class="container-fluid">
<div id="map" style="width: 800px; height: 400px; overflow:visible;"> </div>
</div>
</body>