I am trying to execute Elevation Service sample. I created an API key using my google account, then clicked on "YOUR_API_KEY" link at the bottom of the "JAVASCRIPT + HTML" section, this helped me select an API key from my applications and then was inserted. I then copied and pasted the code on my machine and ran the sample, however I get the following error:
This page was unable to display a Google Maps element. The provided Google API key is invalid or this site is not authorized to use it. Error Code: InvalidKeyOrUnauthorizedURLMapError.
Has anyone had success in executing Google Elevation Service requests using fee API key?
Here is the code I tried to execute:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Elevation service</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: {lat: 63.333, lng: -150.5}, // Denali.
mapTypeId: 'terrain'
});
var elevator = new google.maps.ElevationService;
var infowindow = new google.maps.InfoWindow({map: map});
// Add a listener for the click event. Display the elevation for the LatLng of
// the click inside the infowindow.
map.addListener('click', function(event) {
displayLocationElevation(event.latLng, elevator, infowindow);
});
}
function displayLocationElevation(location, elevator, infowindow) {
// Initiate the location request
elevator.getElevationForLocations({
'locations': [location]
}, function(results, status) {
infowindow.setPosition(location);
if (status === google.maps.ElevationStatus.OK) {
// Retrieve the first result
if (results[0]) {
// Open the infowindow indicating the elevation at the clicked position.
infowindow.setContent('The elevation at this point <br>is ' +
results[0].elevation + ' meters.');
} else {
infowindow.setContent('No results found');
}
} else {
infowindow.setContent('Elevation service failed due to: ' + status);
}
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&signed_in=true&callback=initMap"
async defer></script>
</body>
</html>
Update:
I created a browser key and now the code works! Thank you!
You need to use a browser key with the Google Maps Javascript API v3 Elevation Service. That is what is being used in the Elevation Service in the code you posted.
working example with browser key
If you use the Google Maps Elevation Web Service, then you need a server key.