[解決済み】(Google Map API) Geocodeは以下の理由で成功しませんでした。REQUEST_DENIED

質問内容

私はここに来るのが初めてで、ここの専門家の助けをどうしても必要としています。D=

Googleマップの数字を動的に生成するページを作ってみました。しかし、ウェブページには <script async defer src="https://maps.googleapis.com/maps/api/js?key=APIkey&callback=initMap" type="text/javascript"></script> <script async defer src="https://maps.googleapis.com/maps/api/js?key=APIKEY&callback=mapAddress" type="text/javascript"></script> <!-- &callback=mapAddress --> <script> function mapAddress(mapElement, address) { var geocoder = new google.maps.Geocoder(); // alert(mapElement); // alert(address); geocoder.geocode({ 'address': address }, function (results, status) { if (status == google.maps.GeocoderStatus.OK) { var mapOptions = { zoom: 17, center: results[0].geometry.location, disableDefaultUI: true }; var map = new google.maps.Map(document.getElementById(mapElement), mapOptions); var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location }); } else { alert("Geocode was not successful for the following reason: " + status); } }); } </script> .

google APIコンソールをダブルチェックし、ジオコーディングAPIとJavascript APIが有効になっていることを確認しました。(文字通り、リストにある全てのGoogle map APIを有効化しました...)

私のGoogle Map API一覧

どなたか見ていただいて、理由を教えていただけませんか？T_T

//------------------------------------------------\\

以下は、私のjavascriptとhtmlのボタンです。

Javascriptを使用します。

<button type="button" class="button_mapAPI" id="address_<?php echo $case["id"]; ?>"  value="<?= $case['location_detail'] ?>" onclick="mapAddress('map1', 'Hong Kong')"/>Map Refresh</button>

HTML(phpの変数と思われる)。

Geocode was not successful for the following reason: REQUEST_DENIED

解決方法は？

まず、スクリプトを非同期で読み込んでいたのが問題でしたので、これを削除します。

あなたのAPI KEYでjsfiddleを試してみてください。

(function(){
	let mapElement = 'map';
	let address = 'SPAIN';
	geocoder = new google.maps.Geocoder();
   geocoder.geocode({ 'address': address }, function (results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      var mapOptions = {
          zoom: 17,
          center: results[0].geometry.location,
          disableDefaultUI: true
      };
      var map = new google.maps.Map(document.getElementById(mapElement), mapOptions);
      var marker = new google.maps.Marker({
          map: map,
          position: results[0].geometry.location
      });
    } else {
    	alert("Geocode was not successful for the following reason: " + status);
    }
  });
})();

#map {
  width: 100%;
  height: 350px;
}

<script src="https://maps.googleapis.com/maps/api/js?key=APIKEY" type="text/javascript"></script>

<div id="map"></div>