CODEWITHSUNDEEP
javascriptangularjsgoogle-mapsgoogle-maps-api-3
Pawan Kumar
Pawan Kumar

Reputation: 522

Google-map API giving Failed to load resource: the server responded with a status of 403 ()

Currently I'm working on a location project using Angularjs, where I'm using google maps JavaScript api to load maps, and for google autocomplete service. I have downloaded the JS from http://maps.googleapis.com/maps/api/js and place in the project js folder.

I have created the directive and the code is as below:

.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();
                    });
                }
            }
          })

and accessing this is the html using the below code

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

It work for 3-4 days and after that it is giving access forbidden issue.

and i am including the js as below in the application.(address.js contains js from http://maps.googleapis.com/maps/api/js )

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

Upvotes: 2

Views: 11872

Answers (2)

user3246911
user3246911

Reputation: 21

had the same problem after I had enabled rocketloader through Cloudflare. Disabling Rocketloader brought the site back to working order.

Upvotes: 2

Ryzokuken
Ryzokuken

Reputation: 40

HTTP status 403 stands for "Access Forbidden". Did you make sure to apply for an access token and use that token properly? This problem most probably arises due to a misconfigured token.

If you have signed up of an API key on the Google API Console, you need to embed the script as:

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

Upvotes: 0

Related Questions