（（Google Map API）地理编码未成功，原因如下：REQUEST_DENIED

Question

我是这个地方的新手，非常需要这里专家的帮助！ D =

我试图制作一个可以生成动态数量的Google地图的页面。但是，网页继续显示Geocode was not successful for the following reason: REQUEST_DENIED。

我仔细检查了我的google API控制台，并确认已启用地址解析API和Javascript API。 （我从字面上启用了列表中的所有Google Map API ...）

My Google Map API List

有人可以看一下并告诉我为什么吗？ 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

首先，问题是异步加载脚本，将其删除。。

使用您的API密钥尝试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>