Google-map 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。（address.js包含来自http://maps.googleapis.com/maps/api/js的 js）

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

Answer 1

在通过Cloudflare启用了robotloader之后，遇到了同样的问题。 禁用Rocketloader会使网站恢复正常工作。

Answer 2

HTTP状态403代表“禁止访问”。 您确定要申请访问令牌并正确使用该令牌吗？ 由于令牌配置错误，很可能会出现此问题。

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

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