Google maps API key no working

[mezerotm]

It appears that the google maps API doesn't work for neither me nor nick, on either js-overhaul or even master.. I think this may have to do with the issue of us leaving the API keys (both census and google maps) on github witch is open domain for anyone to take, so maybe someone has taken our census key and is requesting to much data? - regardless I think we should request a new google maps API key, and remove the keys from github and implement them on our local systems in a special file witch will be .gitignore'd and just passed among ourselves in more secure forms.

[hardnett]

Going forward we need a plan to handle this. We don't want the key to be in clear text. I know that @ravenusmc was talking about an encrypted key. I'd like to know how that would work, and how it would keep someone else from using the key. What I had thought of and had seen done before was to have the key loaded from an external data file, and not include the file in the repository. This way, each of us would have to have our own key and put it in the data file and any developer that forks/clones our repo would have to obtain their own key, and create a key config file. Thoughts?

[hardnett]

This is my approach. There is file named: googlemapapikey.js

GOOGLE_MAP_KEY = "AIzaSyC_y5IRdURJMxS06jTtKecEq47r9VFcLTg";
cmv.loadScript = function()  {
    var script = document.createElement('script');
//    script.type = 'text/javascript';
    script.src = 'https://maps.google.com/maps/api/js?' +
      'key=' + GOOGLE_MAP_KEY;
    document.body.appendChild(script);
    console.log(script);
   }

 cmv.loadScript();

This is loaded in the index.html file: <script src='js/googlemapapikey.js'></script>

its loaded at the bottom of the file with the other scripts. it produces the script tag, but its as if the script tag is not getting loaded because I get errors about the dependent code not able to recognize google, one of the failed lines is:

this.googleMap = new google.maps.Map(this.id, {

[mezerotm]

This is a common issue JavaScript has in terms of, once the DOM is loaded any new HTML content you add to the document is not effected. An example of this would be that if I added additional html code after the dom loaded with class names which references to css code class selectors then the css does not effect the html. This issue most developers I see resolve with frameworks such as ReactJS, or Vue.js