admin管理员组

文章数量:1418073

Currently I'm working on a location project using Angularjs, where I'm using google maps JavaScript api to load maps, and for google autoplete service. I have downloaded the JS from 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 autoplete = new google.maps.places.Autoplete($("#caller_location")[0], {});
                    google.maps.event.addListener(autoplete, 'place_changed', function() {
                        var place = autoplete.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 )

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

Currently I'm working on a location project using Angularjs, where I'm using google maps JavaScript api to load maps, and for google autoplete service. I have downloaded the JS from http://maps.googleapis./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 autoplete = new google.maps.places.Autoplete($("#caller_location")[0], {});
                    google.maps.event.addListener(autoplete, 'place_changed', function() {
                        var place = autoplete.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./maps/api/js )

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

Share Improve this question edited Jul 10, 2017 at 8:16 Pawan Kumar asked Jul 10, 2017 at 7:05 Pawan KumarPawan Kumar 5224 gold badges10 silver badges29 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 2

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

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./maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

本文标签: