copy paste from google instructions:
<!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>
<div id="capture"></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=";callback=initMap"
async defer></script>
</body>
</html>
and I'm still getting this error of google: "Oops! Something went wrong. This page didn't load Google Maps correctly. See the JavaScript console for technical details."
Why it's so plicated?
Here is my API Key
copy paste from google instructions:
<!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>
<div id="capture"></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./maps/api/js?key=AIzaSyC8kDz25qFYhy1UYiPyrzvcOpkiwZz9C4o&callback=initMap"
async defer></script>
</body>
</html>
and I'm still getting this error of google: "Oops! Something went wrong. This page didn't load Google Maps correctly. See the JavaScript console for technical details."
Why it's so plicated?
Here is my API Key
Share Improve this question asked Jul 14, 2016 at 0:58 Nelson DenverNelson Denver 1151 gold badge3 silver badges12 bronze badges 4- you are calling the function initMap before it was loaded in the google maps js file. – brunobliss Commented Jul 14, 2016 at 1:03
- What does the javascript console say? – geocodezip Commented Jul 14, 2016 at 1:35
-
2
its wonderfull, in google example only height is set to 100%, when i set height and width in pixels its working,
#map { height: 500px; width: 400px; }– sairfan Commented Oct 5, 2018 at 17:10 - @sairfan Thanks. I was banging my head. css was my issue. – RamPrakash Commented Jun 24, 2021 at 22:41
1 Answer
Reset to default 2It's simple. You did not activate the API key. I do not recall exactly where in the process this happens or how but it is one of the steps when you created the key.
Google Maps API error: ApiNotActivatedMapError
And included in the console message is the link to your instructions on what to do: https://developers.google./maps/documentation/javascript/error-messages#api-not-activated-map-error`