dynamically set googleapi key

Question

I have a application wants to embed google map, and it is required that the key is put into a config file. So here is what I do:

In config.js

GOOGLE_MAP_KEY = "mykeyofgoogleapi";

In index.html

<script type="text/javascript" 
        src="https://maps.googleapis.com/maps/api/js?key="+GOOGLE_MAP_KEY+"&sensor=true">
</script>

The problem is that I see the GET URL to google is only

Request URL:  https://maps.googleapis.com/maps/api/js?key=

the rest of the URL is lost.

Looks I did something bad in concat the URL like this. What is wrong?

Answer 1

Where you're specifying the <script> tag, you're writing HTML not Javascript (even though you're using it to load in a JS file). So you can't reference Javascript variables in the HTML.

Instead to do this you need to load the Google Maps JS using javascript, not HTML. See for instance the example they have in the docs: https://developers.google.com/maps/documentation/javascript/examples/map-simple-async

<script>
var GOOGLE_MAP_KEY = "mykeyofgoogleapi";

function loadScript() {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://maps.googleapis.com/maps/api/js?v=3' +
      '&key=' + GOOGLE_MAP_KEY +'&callback=initialize'; //& needed
  document.body.appendChild(script);
}

window.onload = loadScript;
</script>