Elevation Serviceサンプルを実行しようとしています。Google アカウントを使用して API キーを作成し、[JAVASCRIPT + HTML] セクションの下部にある [YOUR_API_KEY] リンクをクリックすると、アプリケーションから API キーを選択するのに役立ち、挿入されました。次に、コードをコピーして自分のマシンに貼り付け、サンプルを実行しましたが、次のエラーが発生しました。
このページは Google マップの要素を表示できませんでした。指定された Google API キーが無効であるか、このサイトで使用する権限がありません。エラー コード: InvalidKeyOrUnauthorizedURLMapError .
有料 API キーを使用して Google Elevation Service リクエストの実行に成功した人はいますか?
実行しようとしたコードは次のとおりです。
<!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>
アップデート：
ブラウザ キーを作成したところ、コードが機能するようになりました。ありがとうございました！
