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!