Estoy tratando de pasar una clave de API de Google a mi archivo js personalizado en Django, la función es para una búsqueda de API de Autocompletar en Google Places, pero en este momento no funciona, si pongo la clave real directamente en la función .getScript, me gusta:
https://maps.googleapis.com/maps/api/js?key=XXX&libraries=places"entonces la función de búsqueda funciona, pero con la configuración actual también pretende ocultar la clave api, no funciona, obviamente me estoy perdiendo algo, ¿agradezco alguna idea?
configuración de Django:
GOOGLE_API_KEY = "XXX"base.html
<script src="{% static 'js/google_places.js' %}"></script>vistas.py
{'google_api_key': settings.GOOGLE_API_KEY}google_places.js
$.getScript("https://maps.googleapis.com/maps/api/js?key=" + google_api_key + "&libraries=places") .done(function( script, textStatus ) { google.maps.event.addDomListener(window, "load", initAutoComplete) }) let autocomplete; function initAutoComplete(){ autocomplete = new google.maps.places.Autocomplete( document.getElementById('autocomplete'), { types: ['country', 'locality'], }) }viajes.html
{% extends 'base.html' %} {% load static %} <input id='autocomplete' placeholder='enter a place' type="text"> {% endblock content %} {% block js %} <script type="text/javascript"> var google_api_key = "{{google_api_key|safe}}"; </script> {% endblock js %}también la variable google_api_key se pasa a travel.html , lo he comprobado y funciona bien.
Pruebe la etiqueta json_script como se describe en los documentos de Django https://docs.djangoproject.com/en/4.0/ref/templates/builtins/
en tu plantilla:
{{ google_api_key|json_script:"google_api_key" }}luego en js antes de querer usar google_api_key:
const google_api_key = JSON.parse(document.getElementById("google_api_key").textContent);Descubrí el problema que estaba teniendo, necesitaba poner la función de documento listo en mi archivo js personalizado, así que al final opté por el método json_script y esto es lo que tengo ahora:
travel.html (insertado en la parte html de la plantilla sobre el contenido del bloque final)
{{ google_api_key|json_script:"google_api_key" }}google_places.js
$( document ).ready(function() { // const google_api_key = document.getElementById('google_api_key'); const google_api_key = JSON.parse(document.getElementById("google_api_key").textContent); $.getScript("https://maps.googleapis.com/maps/api/js?key=" + google_api_key + "&libraries=places") .done(function( script, textStatus ) { google.maps.event.addDomListener(window, "load", initAutoComplete) }) let autocomplete; function initAutoComplete(){ autocomplete = new google.maps.places.Autocomplete( document.getElementById('autocomplete'), { types: ['country', 'locality'], }) } });