Oops! Something went wrong. This page didn't load Google Maps correctly. See the JavaScript console for technical details
Question
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>
6 answers
solution1
6 2016-09-05 07:53:27
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
solution2
4 2016-07-11 07:44:29
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://phystutor.com/ *) inside Google API site solved the problem for me.
solution3
1 2016-06-24 06:42:33
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.
solution4
1 2016-08-09 20:57:48
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.
solution5
0 2016-07-02 16:21:34
You can refer the Google Maps documentation for different error codes here : https://developers.google.com/maps/documentation/javascript/error-messages#deverrorcodes
The above error code is described in the documentation as below:
The current URL loading the Google Maps JavaScript API has not been added to the list of allowed referrers. Please check the referrer settings of your API key on the Google API Console.
Please check the link to the maps documentation for error messages for more details.
Google Maps now requires the use of a Google Maps API key to display a map on your site as per this article: https://googlegeodevelopers.blogspot.co.za/2016/06/building-for-scale-updates-to-google.html.
solution6
-6 2016-07-01 20:09:05
<!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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.