Javascript Google map API加载资源失败：服务器响应状态为403（）

目前，我正在使用Angularjs进行一个定位项目，我正在使用GoogleMapsJavaScriptAPI加载地图，并使用GoogleAutoComplete服务。我已经从下载了JS，并将其放置在project 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();
                    });
                }
            }
          })

---

HTTP状态403表示“禁止访问”。您是否确保申请访问令牌并正确使用该令牌？此问题很可能是由于配置错误的令牌引起的

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

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

在我通过Cloudflare启用rocketloader后，出现了相同的问题。禁用Rocketloader使站点恢复工作状态。

我已经生成了访问令牌，但不知道如何通过请求传递访问令牌。你能帮我一下吗…我已经给出了我的所有建议configuration@PawanKumar我补充了上面的答案。希望这能有所帮助。我知道你上面提到的内容，但问题是我已经下载了JS，并且在我的配置中包含了JS，所以我现在将传递API_密钥。不，你需要从谷歌的服务器获取它。这就是为什么他们无法验证你的身份。我也面临着这个问题，通过禁用rocketloader，“地图预览”得到了修复。

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