Adding Google Maps JavaScript API 3 key to markup
<p>I'm a little confused by Google's instructions on how to securely correctly use their map API. On one hand, their <a href="https://developers.google.com/maps/documentation/javascript/examples/map-simple" rel="nofollow">examples</a> specify that the API key is added to the API script - e.g. </p>

<pre><code>&lt;script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&amp;callback=initMap" async defer&gt;&lt;/script&gt;
</code></pre>

<p>But their <a href="https://support.google.com/cloud/answer/6310037" rel="nofollow">best practices</a> state exactly the opposite - </p>

<blockquote>
  <p>Do not embed API keys directly in code: API keys that are embedded in code can be accidentally exposed to the public—for example, if you forget to remove the keys from code that you share. Instead of embedding your API keys in your applications, store them in environment variables or in files outside of your application's source tree.</p>
</blockquote>