title: AngularJS - Google Place Autocomplete API Key
body: <p>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 <code>element.autocomplete</code>.</p>
  
  <p>I did look for any existing directives that might help with this, and I've found: <a href="https://github.com/kuhnza/angular-google-places-autocomplete" rel="nofollow">https://github.com/kuhnza/angular-google-places-autocomplete</a></p>
  
  <p>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.</p>
  
  <p>From what I understood, Google's Docs mention to include the API key as a <code>key</code> parameter when pulling the places library. If I omit the key like in the directive's documentation, I get <code>MissingKeyMapError</code>. If I add the key like Google says, I get <code>ApiNotActivatedMapError</code>. 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".</p>
  
  <p>The line for pulling in the library that I'm referencing is: <code>&lt;script src="https://maps.googleapis.com/maps/api/js?libraries=places"&gt;&lt;/script&gt;</code></p>
  
  <p>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. </p>
  
  <p>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! </p>