angular 4 _ how can I change dynamically google map api key

Question

I use google map API in my application like this :

import url with api key in index.html :

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

and in component declare google like this :

declare let google: any;

and use it in component like this :

this.map = new google.maps.Map(document.getElementById('googleMap'), this.mapProp);

How can I change API key dynamically that exist in the index.html ?

you should really blot out your api key, so people don't take it — FussinHussin, Oct 09 '17 at 13:47
you dont need to use declare let, just use declare. why would you want to change your api key? — FussinHussin, Oct 09 '17 at 13:50

score 0 · Answer 1 · answered Feb 06 '20 at 23:23

If you really need to do this, you can add the script tag directly to the DOM.

var script = document.createElement( 'script' );
script.type = 'text/javascript';
script.src = 'https://maps.googleapis.com/maps/api/js?key=myKey';
$("#someElement").append( script );

It will load the new code when you add it.

Code is based on https://stackoverflow.com/a/611016

angular 4 _ how can I change dynamically google map api key

1 Answers1