Интеграция нового API автозаполнения Google Maps в проект Django

Я использую новую функцию Google PlaceAutocompleteElement() API (а не устаревшую google.maps.places.Autocomplete) и хотел бы получить помощь в ее интеграции в мой проект на Django.

В частности, я хочу добавить строку адресного поиска в свой шаблон application.html.

Я пробовал подключить функцию JavaScript initMap() к форме несколькими способами, обновив все соответствующие файлы, указанные ниже, но отправка формы всегда завершается ошибкой, и данные никогда не попадают в базу данных.

Вот дополнительная информация об этом Google API: Поместить элемент автозаполнения

Взгляните на мою попытку перед реализацией адреса:

models.py

class Applicant(models.Model):
    Name = models.CharField(max_length=101)
    DOB = models.DateField()
    High_School = models.CharField(max_length=100)
    Major = models.CharField(max_length=100)
    SSN = models.CharField(max_length=11)
    Phone = models.CharField(max_length=15)
    
    def __str__(self):
        return self.Name

views.py

def application_page(request):
    form = ApplicationForm()
    return render(request, "DunesApp/application.html", {
        'form': form,
        'google_maps_key': settings.GOOGLE_MAPS_API_KEY
    })

def submit_application(request):
    if request.method == "POST":
        form = ApplicationForm(request.POST)
        if form.is_valid():
            form.save()
            return JsonResponse({"status": "success"})
    return JsonResponse({"status": "error"})

forms.py

class ApplicationForm(forms.ModelForm):
    class Meta:
        model = Applicant
        fields = "__all__"

script.js (вызывается внутри layout.html)

function submitApplication() {
    const form = document.getElementById('application-form');
    const formData = new FormData(form);

    fetch('/submit_application/', {
        method: 'POST',
        body: formData,
        headers: {
            'X-CSRFToken': formData.get('csrfmiddlewaretoken')
        }
    })
    .then(response => response.json())
    .then(data => {
        const messageBox = document.getElementById('application-message');

        if (data.status === 'success') {
            messageBox.className = 'alert alert-success mt-3';
            messageBox.innerText = 'Application submitted successfully!';
            messageBox.classList.remove('d-none');
            form.reset();
        } else {
            messageBox.className = 'alert alert-danger mt-3';
            messageBox.innerText = 'Submission failed. Please try again.';
            messageBox.classList.remove('d-none');
        }
    })
    .catch(error => {
        const messageBox = document.getElementById('application-message');
        messageBox.className = 'alert alert-danger mt-3';
        messageBox.innerText = 'An error occurred. Please try again.';
        messageBox.classList.remove('d-none');
        console.error('Error:', error);
    });
}

application.html

{% extends 'DunesApp/layout.html' %}
{% load form_tags %}
{% block content %}
  <h2 class="mb-4">Student Application Form</h2>

  <div class="card p-4 shadow-sm">
    <form id="application-form">
      {% csrf_token %}

      <div class="mb-3">
        <label for="id_name" class="form-label">Full Name:</label>
        {{ form.Name|add_class:'form-control' }}
      </div>

      <div class="mb-3">
        <label for="id_dob" class="form-label">Date of Birth:</label>
        {{ form.DOB|add_class:'form-control' }}
      </div>

      <div class="mb-3">
        <label for="id_ssn" class="form-label">Social Security Number:</label>
        {{ form.SSN|add_class:'form-control' }}
      </div>

      <!-- Google Address Autocomplete will be here -->

      <div class="mb-3">
        <label for="id_phone" class="form-label">Phone Number:</label>
        {{ form.Phone|add_class:'form-control' }}
      </div>

      <div class="mb-3">
        <label for="id_high_school" class="form-label">High School:</label>
        {{ form.High_School|add_class:'form-control' }}
      </div>

      <div class="mb-3">
        <label for="id_major" class="form-label">Intended Major:</label>
        {{ form.Major|add_class:'form-select' }}
      </div>

      <button type="button" class="btn btn-primary" onclick="submitApplication()">Submit Application</button>
    </form>
    <div id="application-message" class="alert mt-3 d-none"></div>
  </div>

Желаемый дизайн

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