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 ?

Arsphenamine

you should really blot out your api key, so people don't take it – Tupungato

you dont need to use declare let, just use declare. why would you want to change your api key? – Tupungato

this is a fake api key and just for show – Arsphenamine

good to know, glad you didnt through it up there – Tupungato

Did you ever find an answer for this? – Hickie

sorry , not yet :( – Arsphenamine

plz update if you got any solution – Goa

Answer 1

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

Bulkhead