Google Places Autocomplete Not Working for Address Input Field

I’m implementing Google Places Autocomplete on an address input field in my form. Despite setting up the autocomplete functionality, it does not seem to be working as expected. The input field does not display any address suggestions.

I have set up Google Places Autocomplete for my address input field, but it does not provide suggestions or complete addresses. The functionality seems to be missing, and I’m not seeing any errors in the console related to this.

HTML STRUCTURE

 <section
        class="hero min-h-[640px] xl:min-h-[840px] bg-hero bg-center lg:bg-cover bg-no-repeat bg-fixed xl:rounded-bl-[290px] relative z-20" id="Home"
      >
        <div class="container mx-auto">
          <!-- text -->
          <div
            class="hero__text md:w-[567px] flex flex-col items-center text-center xl:text-left lg:items-start"
          >
          <div>
            <h1 class="h1 custom-gradient mb-8 break-words">
              Instant Cash Offer for Your Home
            </h1>
            <p class="mb-8 text-first-onPrimary">
              Sell Fast, No Fees or Commissions. We Buy in Any Condition!
            </p>
          </div>
            <form
              action="/submit"
              method="POST"
              class="flex flex-col lg:flex-row gap-4 min-w-[200px]"
            >
              <!-- Property Address Input -->
              <div class="mb-8 mx-auto xl:mx-0 inline-flex items-center">
                <div class="relative">
                  <label for="search_input" class="sr-only" 
                    >Enter Property Address</label
                  >
                  <i
                    class="ri-home-line absolute left-2 top-1/2 transform -translate-y-1/2 text-gray-400"
                  ></i>
                  <input
                    type="text"
                    id="search_input"
                    name="Property Address"
                    placeholder="Enter Property Address"
                    class="btn btn-secondary ring-1 ring-gray-200 outline-none focus:ring-8 focus:ring-first-onPrimary focus:text-second-secondary"
                    onfocus="this.previousElementSibling.style.display='none';"
                    onblur="if(this.value===''){this.previousElementSibling.style.display='block';}"
                  />
                </div>
              </div>

              <!-- Phone Input -->
              <div class="mb-8 mx-auto xl:mx-0 inline-flex items-center">
                <div class="relative">
                  <label for="phone" class="sr-only">Phone</label>
                  <i
                    class="ri-smartphone-line absolute left-2 top-1/2 transform -translate-y-1/2 text-gray-400"
                  ></i>
                  <input
                    type="number"
                    id="phone"
                    name="Phone Number"
                    placeholder="Phone"
                    autocomplete="street-address"
                    class="btn btn-secondary ring-gray-200 outline-none focus:ring-8 focus:ring-first-onPrimary focus:text-second-secondary"
                    onfocus="this.previousElementSibling.style.display='none';"
                    onblur="if(this.value===''){this.previousElementSibling.style.display='block';}"
                  />
                </div>
              </div>

              <!-- Submit Button -->
              <button
                type="submit"
                class="btn btn-primary inline-flex mx-auto xl:mx-0 items-center"
              >
                GET FREE OFFER
                <i class="ri-arrow-right-line text-first-onPrimary"></i>
              </button>
            </form>
          </div>
        </div>
      </section>

JAVASCRIPT FILE

document.addEventListener('DOMContentLoaded', () => {


const apiKey = import.meta.env.VITE_GOOGLE_MAP_KEY


// API key in Google Maps script
const script = document.createElement('script');
// Template Literals
script.src =  `https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places`;
script.async = true;
script.defer = true;
document.head.appendChild(script);

})





function initMap() {
    var searchInput = 'search_input';

    // Executes only after the DOM is fully loaded
    $(document).ready(function () {
        // Ensure that the element exists before proceeding
        var searchInputElement = document.querySelector('#' + searchInput);

        // Log the selcted element to the console
        console.log("Selected ELement using querySelector:". searchInputElement);

        if (searchInputElement) {
            // Initialize autocomplete only if the element exists
            var autocomplete = new google.maps.places.Autocomplete(searchInputElement, {
                types: ['geocode'] // Filters to include only geocoded locations
            });

            // Place Changed Event Listener
            google.maps.event.addListener(autocomplete, 'place_changed', function () {
                var near_place = autocomplete.getPlace();
                console.log(near_place);
            });
        } else {
            console.error("Element with ID '" + searchInput + "' not found.");
        }
    });
}

I do not see any specific error messages related to the Google Places Autocomplete functionality. However, I have checked the console for errors and verified that the Google Maps API is loading correctly.

I have tried:

• Verifying that the Google Maps JavaScript API key is correct and has the Places API enabled.
• Checking for typos in the id and for attributes.
• Ensuring that the initMap function is correctly loaded and executed.
• Trying different Google Maps API keys.

Additional Information:

1. I am using tailwind css for styling

2. Vite as my build tool

3. Javascript and Jquery for functionality and interactivity

Can anyone help me troubleshoot why the Google Places Autocomplete is not working for my address input field? Are there specific issues or common mistakes in the setup that I should be aware of?

Thank you for your assistance. I appreciate any help or suggestions you can provide to resolve this issue.