CODEWITHSUNDEEP
javascriptjqueryangularjsautocompletegoogle-places-api
kenshin9
kenshin9

Reputation: 2365

AngularJS - Google Place Autocomplete API Key

I'm new to using Google's APIs and have been trying to figure out how to implement the Places Autocomplete API with Angular. I've never really worked with autocomplete in general. I do not have the jQuery library pulled into my project at the moment, but I believe I've seen some developers utilizing that inside the directive with element.autocomplete.

I did look for any existing directives that might help with this, and I've found: https://github.com/kuhnza/angular-google-places-autocomplete

After setting that up according to the documentation, I haven't been able to get it to work, and I also didn't see where I would set up the API key for it to function in the first place. I think the main error has to do with the API key, but I'm not positive.

From what I understood, Google's Docs mention to include the API key as a key parameter when pulling the places library. If I omit the key like in the directive's documentation, I get MissingKeyMapError. If I add the key like Google says, I get ApiNotActivatedMapError. At the same time, Google also says my API key is a server API key, and "This key should be kept secret on your server".

The line for pulling in the library that I'm referencing is: <script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>

Doing a cURL request with my PHP backend or just in the browser provides me with the results. So now I'm just trying to understand how Autocomplete works and how I could get it work with AngularJS.

So yeah, I'm a bit confused on this whole topic. If anyone could point me in the right direction or point out what I may be misunderstanding, it'd be a great help!

Upvotes: 1

Views: 5932

Answers (2)

Zohaib Ijaz
Zohaib Ijaz

Reputation: 22885

You can create a Google API key for a specific domain and in this way you will be sure that no one else can use it on his page etc.

I've also implimented Google place directive using this api and we need API key to get API SDK.

<script src="https://maps.googleapis.com/maps/api/js?libraries=places?key=your_key"></script>

Here is directive code.

angular.module('app')
  .directive('googlePlace', directiveFunction);

directiveFunction.$inject = ['$rootScope'];

function directiveFunction($rootScope) {
  return {
    require: 'ngModel',
    scope: {
      ngModel: '=',
      details: '=?'
    },
    link: function(scope, element, attrs, model) {
      var options = {
        types: [],
        componentRestrictions: {}
      };
      scope.gPlace = new google.maps.places.Autocomplete(element[0], options);

      google.maps.event.addListener(scope.gPlace, 'place_changed', function() {
        scope.$apply(function() {
          scope.details = scope.gPlace.getPlace();
          model.$setViewValue(element.val());
          $rootScope.$broadcast('place_changed', scope.details);
        });
      });
    }
  };
}

You can use it like

 <input type="text" google-place ng-model="venue.address_line_1" aria-label="search">

and then in controller, catch the place_changed event.

$scope.$on('place_changed', function (e, place) {
     // do something with place
});

Upvotes: 3

Revln9
Revln9

Reputation: 847

you can pass your api key right here in the script as params

 <script 
          src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY">
        </script>

and after that if you see this error ApiNotActivatedMapError then it means that you need to activate the service google places in your google dev console

https://console.developers.google.com

under API Google Maps click more and you should see Google Places API Web Service click it and activate .

hope this helps

Upvotes: 1

Related Questions