设置网站应用限制后Google Map API Key请求被拒问题

你遇到的REQUEST_DENIED错误核心原因是：带Referer（网站）应用限制的API Key，不能直接调用Geocoding REST API端点，这类限制的Key仅支持通过Google Maps JavaScript API的内置服务发起请求，而非直接访问https://maps.googleapis.com/maps/api/geocode/json这类REST接口。

解决方案：改用Maps JavaScript API内置的Geocoder服务 #

把直接XHR调用REST API的方式，替换为使用Maps JavaScript API提供的google.maps.Geocoder地理编码服务，具体实现如下：

1. 在HTML页面中先加载Maps JavaScript API（带上你的API Key）：

<script src="https://maps.googleapis.com/maps/api/js?key=<你的MAP_API_KEY>&libraries=places"></script>

2. 修改JavaScript代码，使用Geocoder服务替代XHR请求：

const latitude = 24.4564699;
const longitude = 54.4007989;

// 初始化Geocoder实例
const geocoder = new google.maps.Geocoder();
// 构造地理编码请求的坐标参数
const latlng = new google.maps.LatLng(latitude, longitude);

geocoder.geocode({ 'latLng': latlng }, function(results, status) {
  if (status === google.maps.GeocoderStatus.OK) {
    if (results[0]) {
      const formattedAddress = results[0].formatted_address;
      console.log("formattedAddress: " + formattedAddress);
    } else {
      console.log("Location not found");
    }
  } else {
    console.log("Geocoder failed due to: " + status);
  }
});

额外检查要点 #

• 确认Google Cloud控制台中Maps JavaScript API和Geocoding API都已启用
• 检查API Key的网站Referer限制配置，确保格式正确，比如允许https://your-domain.com/*（注意不要遗漏协议https://，通配符*用于匹配子路径）
• 测试前清除浏览器缓存，避免旧配置缓存影响结果

内容的提问来源于stack exchange，提问作者jrh