Oops! Something went wrong. This page didn't load Google Maps correctly. See the JavaScript console for technical details
Solution 1
Please take a look at Google maps api tutorial: https://developers.google.com/maps/documentation/javascript/tutorials/adding-a-google-map
When reading carefully, you will see that a key, YOUR_API_KEY, is needed
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
To get your key go here: https://developers.google.com/maps/documentation/javascript/tutorials/adding-a-google-map#key
Solution 2
I had the same problem, trying to use Google Maps API. Got the same message to go look into JavaScript Console. What a waste of time!
In my case the problem was that I mistyped the domain name (the referrer) when getting the Browser API key from Google.
Fixing the name of the referring domain (http://example.com/*) inside Google API site solved the problem for me.
Solution 3
Replace your googleApi maps plugin with this...
"https://maps.googleapis.com/maps/api/js?sensor=false&callback=initMap"
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&callback=initMap"></script>
</body>
</html>
Hope it works for you.
Solution 4
I had this same problem when going live with a site on a new host with a page that included an embedded map that had not been on the site previously. The map had worked on my development site, so this was a surprise to me as well.
If you landed on this page doing a Google search, you'll want to start here: https://developers.google.com/maps/documentation/javascript/get-api-key.
If you wish to read the announcement about the API key requirement, read this: https://googlegeodevelopers.blogspot.com/2016/06/building-for-scale-updates-to-google.html
Also note, in my case anyway, "&callback=initMap
" caused an error.
Admin
Updated on September 10, 2021Comments
-
Admin over 2 years
Oops! Something went wrong. This page didn't load Google Maps correctly. See the JavaScript console for technical details.
i don't know why
API error: RefererNotAllowedMapError
<!DOCTYPE html> <html> <head> <title>Simple Map</title> <meta name="viewport" content="initial-scale=1.0"> <meta charset="utf-8"> <style> html, body { height: 100%; margin: 0; padding: 0; } #map { height: 100%; } </style> </head> <body> <div id="map"></div> <script> var map; function initMap() { map = new google.maps.Map(document.getElementById('map'), { center: {lat: -34.397, lng: 150.644}, zoom: 8 }); } </script> <script src="https://maps.googleapis.com/maps/api/js?key=myAPI&callback=initMap" async defer></script> </body> </html>
-
prajmus over 7 yearsMy problem was, I only added the http:// version but not the www version and it worked for some, but not all people.
-
Amin AmiriDarban over 6 yearsIt's not the answer
-
Prasanna over 5 yearsthis doesn't work for me too, can you provide another way