Menu
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>
255
The fix is really simple: just replace YOUR_API_KEY on the last line of your code with your actual API key! If you don't have one, you can get it for free on the Google Developers Website. Show activity on this post. You could also get the error if your Billing is not set up correctly.
This error means that one or more of the required Google Maps APIs have not been enabled in your Google console. Usually this isn't needed as they are enabled when you create an API key but sometimes they have to be enabled manually.
from() with an implementation that doesn't support iterables, which could cause Google Maps JavaScript API v3 to not work correctly.")
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
192
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.
21
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.
41
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.
36
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
