Is there a way to dynamically set google API KEY in config.xml for an ionic project

I am developing a mobile application and the application uses 2 API keys one for production and another for debugging, since we use plugins it is a pain to change the api keys everytime I run ionic cordova run android/ios, I figured out setting the API key in index.html dynamically with the below code:

console.log("Api key in onLoad function", API_KEY)
function loadScript(){
console.log("loadScript being called with api key", API_KEY)
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = ''+API_KEY+'&libraries=places' //& 
window.onload = loadScript;


And this works fine, I call another script with a post method and fetch the api key from server and set it to API_KEY, but how do I set the same key in config.xml and in package.json where plugins along with there API keys are declared.


<preference name="GOOGLE_API_KEY_FOR_ANDROID" value="google api key" />
<preference name="GOOGLE_MAPS_ANDROID_API_KEY" value="google api key" />
<preference name="GOOGLE_MAPS_IOS_API_KEY" value="google api key" />


"": {
    "GOOGLE_API_KEY_FOR_ANDROID": "google api key",
    "OKHTTP_VERSION": "3.12.0"

If you are using Cordova look for “Cordova hooks”, its the correct way to manipulate the XML file.

Good luck!

Hello @Shiv49,

You can use separate environment file for dynamic variables, please refer the post