Django template JS variable 'safe' method не передает данные в пользовательский js файл?

Я пытаюсь передать ключ google api в мой пользовательский js файл в Django, функция предназначена для автозаполнения поиска google places api, но на данный момент она не работает, если я помещаю фактический ключ непосредственно в функцию .getScript, например:

https://maps.googleapis.com/maps/api/js?key=XXX&libraries=places"

тогда функция поиска работает, но с текущей настройкой, также предназначенной для скрытия ключа api, она не работает, я явно что-то упускаю, оцените любые идеи?

настройки джанго: 

GOOGLE_API_KEY = "XXX"

base.html

<script src="{% static 'js/google_places.js' %}"></script>

views.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'],
       })
}

travel.html

<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 %}

также переменная google_api_key передается в travel.html, я проверил это и все работает нормально.

Попробуйте использовать тег json_script, как описано в документации Django https://docs.djangoproject.com/en/4.0/ref/templates/builtins/

в вашем шаблоне:

{{ google_api_key|json_script:"google_api_key" }}

затем в js перед тем, как вы хотите использовать google_api_key:

const google_api_key = JSON.parse(document.getElementById("google_api_key").textContent);

Я выяснил проблему, которая у меня была, мне нужно было поместить функцию готовности документа в мой пользовательский js файл, так что в итоге я выбрал метод json_script и вот что у меня получилось:

travel.html (вставляется в html часть шаблона над содержимым endblock)

{{ 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'],
        })
    }

});
Вернуться на верх