谷歌地图 API 提供加载资源失败:服务器响应状态为 403 ()

Question

目前我正在使用Angularjs进行定位项目，在那里我使用Google maps JavaScript api来加载地图，以及Google自动完成服务。我已经从 http://maps.googleapis.com/maps/api/js 下载了JS并放置在项目js文件夹中。

我已经创建了指令，代码如下：

.directive('callerLocation', function(){
return {
restrict:'E',
replace:true,
scope: {callerLocation:'='},
template: '<input id="caller_location" name="caller_location" type="text"/>',
link: function($scope, elm, attrs){
var autocomplete = new google.maps.places.Autocomplete($("#caller_location")[0], {});
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace();
$scope.callerLocation=place.formatted_address;
$scope.$apply();
});
}
}
})

访问这是使用以下代码的 HTML

<caller-location caller-location=caller_location class="form-control"></caller-location>

它可以工作 3-4 天，之后它会发出禁止访问的问题。

我将以下JS包含在应用程序中。(地址.js包含来自 http://maps.googleapis.com/maps/api/js 的JS(

module.exports = {
client: {
lib: {
js: [
'public/lib/google/address.js'
]
}
}
}

Answer 1

在我通过Cloudflare启用火箭装载机后遇到了同样的问题。禁用Rocketloader使网站恢复工作状态。

Answer 2

HTTP status 403 代表"Access Forbidden"。您是否确保申请访问令牌并正确使用该令牌？此问题很可能是由于令牌配置错误而引起的。

如果您已在 Google API 控制台上注册了 API 密钥，则需要将脚本嵌入为：

<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>