从 django settings.py 访问 API 密钥以获取模板中的脚本标记 src

Question

I am trying to add my api key from my settings.py to to the src for my script tag. I have been unsuccessful, so I'm hoping someone has an idea I haven't thought of or found online.

<script>
    let GOOGLE_API_KEY='{{GOOGLE_API_KEY}}'
    console.log(GOOGLE_API_KEY) </script> 
<script
      src="https://maps.googleapis.com/maps/api/js?key=GOOGLE_API_KEY&callback=initMap&libraries=&v=weekly"
      async defer>
</script>

GOOGLE_API_KEY successfully logs the correct api key from my views.py

Answer 1

This doesn't work because of the async nature of js.

Try the following:

<script
      src="https://maps.googleapis.com/maps/api/js?key={{GOOGLE_API_KEY}}&callback=initMap&libraries=&v=weekly"
      async defer>
</script>

Answer 2

I found a solution on geeksforgeeks

<!-- Manipulating script tag to use django secret key -->
<!-- https://www.geeksforgeeks.org/how-to-insert-a-javascript-variable-inside-href-attribute/ -->

<script>
    let GOOGLE_API_KEY='{{GOOGLE_API_KEY}}'
    console.log(GOOGLE_API_KEY)
</script>
<script> 
    var loc = `https://maps.googleapis.com/maps/api/js?key=${GOOGLE_API_KEY}&callback=initMap&libraries=&v=weekly`; 
    document.write('<script src="' + loc + '"><\/script>'); 
</script>