title: Google maps API key error - Angular - ApiProjectMapError
body: <p>I have an angular application where I have implemented Angular Google Maps (AGM) successfully. </p>
  
  <p>I have added the <code>&lt;agm-map [latitude]="lat" [longitude]="lng"&gt;&lt;/agm-map&gt;</code> in the component.
  The typescript file has title, lat and lng:
  <code>title: string = 'My first AGM project'; lat: number = 51.678418;lng: number = 7.809007;</code></p>
  
  <p>And the css file has the <code>height: 300px;</code> property.
  All of this is ok.</p>
  
  <p><strong>The problem is the Google API key.</strong></p>
  
  <p>When I opet the page, I can see the map for 1 sec and then I get the following <a href="https://imgur.com/xbaAr1s" rel="nofollow noreferrer">error</a>:</p>
  
  <blockquote>
    <p>Google Maps JavaScript API error: ApiProjectMapError
    <a href="https://developers.google.com/maps/documentation/javascript/error-messages#api-project-map-error" rel="nofollow noreferrer">https://developers.google.com/maps/documentation/javascript/error-messages#api-project-map-error</a></p>
  </blockquote>
  
  <p>Which, when I look at the documentation, it says:</p>
  
  <blockquote>
    <p>Either the provided API key or the API project with which it is associated, could not be resolved. This error may be temporary. If this error message persists you may need to get a new API key or create a new API project.</p>
  </blockquote>
  
  <p>I have created two API keys and in both cases I get the same error.
  This is how the Credentials page looks like:</p>
  
  <p><a href="https://i.stack.imgur.com/cKbel.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cKbel.png" alt="enter image description here"></a></p>
  
  <p>When I open the API key page, this is what I have:
  <a href="https://i.stack.imgur.com/dNwFO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dNwFO.png" alt="enter image description here"></a></p>
  
  <p>Note:</p>
  
  <ul>
  <li>The API is enabled. (As you can see in the screenshot)</li>
  <li>There are no restrictions on the key. (No application restrictions and no API restrictions)</li>
  <li>The yellow warning next to the name of the api (screenshot 1), just
  says "This API key is unrestricted. To prevent unauthorized use and
  quota theft, restrict your key to limit how it can be used."</li>
  <li>I have imported the AgmCoreModule in the app.module.ts file.</li>
  </ul>