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>