title: Change agm-map google maps API Key dynamically in Angular 7
body: <p>I am building an app that lets you edit maps, the editor has google maps with the Agm map module, the end result for the user is an iframe with his map to embed into his webpage.
  I am using the module for the editor, and in the app.module.ts I import it with my API key. </p>
  
  <pre><code>import { AgmCoreModule } from '@agm/core';
  ...
  imports: [
   ...
   AgmCoreModule.forRoot({
     apiKey: 'YOUR_KEY'
   })
  ]
  </code></pre>
  
  <p>The iframe will be a separate angular app that uses the same back-end. I would need the user's API key that will be fetched from the database but I can't get my head around on how can I build this part in Angular, it seems it creates the build with the api key, is it possible to do it in a way the key is modified on runtime? I've seen it done in jQuery. Where it can be fetched from the code in the script tag, or in vanilla js, an example:</p>
  
  <pre><code>&lt;script async defer
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&amp;callback=initMap"&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>In this last example it can be easily done,
  Thank you</p>