title: How to google maps api keys safe on website
body: <p>I am using the google maps api on my website and would like to use my API key, but I'm confused about how to keep it safe.  I know that I could just hardcode the actual key right into index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false&amp;key=HARDCODED_KEY"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>But then it's right there for anyone to see when they view the source code for the site. I also don't want it to show up in the DOM if someone's viewing the site with a debugging tool, like Firebug.</p>
  
  <p>I'm assuming that there is a way to store it in a separate file (probably outside my html/ directory) that I can source.  If anyone could provide an example or comment on whether this approach would be relatively secure, I'd really appreciate the help.  I've found other posts on this topic, but none that apply for this (relatively simple) case.</p>