I recently encountered an issue on my website where the Google Map displayed suddenly showed an error message saying:
"Oops! Something went wrong. This page didn't load Google Maps correctly. See the JavaScript console for technical details."
After researching online, I found that obtaining an API key was suggested as a solution. I have acquired and linked the API key, but unfortunately, the map still does not work.
Below is the code snippet related to the Google Map:
<html>
<head>
</head>
<body>
<div id="googleMap" style="width:1030px;height:380px;"></div>
</body>
<script
src="https://maps.googleapis.com/maps/api/js?key=API_KEY_GOES_HERE&libraries=places&callback=initialize"
async defer>
</script>
<script>
var amsterdam=new google.maps.LatLng(34.0789742,-118.361875);
function initialize()
{
var mapProp = {
center:amsterdam,
zoom:13,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var myCity = new google.maps.Circle({
center:amsterdam,
radius:3000,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});
myCity.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</html>
If anyone has any suggestions or solutions on how to resolve this issue with the Google Map not loading properly, please let me know. Thank you!