(Google Map API) Геокодирование не выполнено по следующей причине: REQUEST_DENIED

Question

Я новичок в этом месте, и мне очень нужна помощь экспертов здесь! D =

Я пытался создать страницу, которая может генерировать динамические c номера карты Google. Однако на веб-странице постоянно отображается Geocode was not successful for the following reason: REQUEST_DENIED.

. Я дважды проверил свою консоль API Google и подтвердил, что API геокодирования и Javascript API включены. (Я буквально включил все API карт Google в списке ...)

Мой список API карт Google

Может кто-нибудь взглянуть и сказать, почему? T_T

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

Ниже моя кнопка javascript и html:

Javascript:

    <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>

HTML ( Предполагается, что php переменная):

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

Answer 1

Прежде всего, проблема заключалась в загрузке сценариев как asyn c, удалите его ..

попробуйте jsfiddle с вашим API KEY

(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>