Google Places Autocomplete地址输入框无建议问题排查求助

我在表单的地址输入框中实现Google Places Autocomplete功能，但该功能无法正常工作——输入框不显示任何地址建议，且控制台无报错信息。

HTML结构 #

<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代码 #

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 selected 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.");
        }
    });
}

已排查情况 #

• 确认Google Maps JavaScript API密钥正确，且已启用Places API
• 检查过输入框ID拼写无误
• 尝试确保initMap函数正确执行
• 更换过不同API密钥，问题仍存在

技术环境 #

Tailwind CSS、Vite、JavaScript、jQuery

排查建议 #

1. 确保initMap函数被正确触发 #

Google Maps脚本加载完成后需要调用initMap初始化Autocomplete，当前代码未关联触发逻辑。修改脚本URL，添加callback=initMap参数，让Google脚本加载完成后自动调用该函数：

script.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places&callback=initMap`;

同时，initMap内的$(document).ready可以移除，因为callback触发时DOM已就绪。

2. 修复语法错误 #

代码中console.log的字符串拼接使用了.而非+或模板字符串，这会导致语法错误，中断代码执行：

// 错误写法
console.log("Selected ELement using querySelector:". searchInputElement);
// 正确写法
console.log(`Selected Element using querySelector:`, searchInputElement);

3. 检查输入框事件冲突 #

输入框绑定的onfocus/onblur内联事件可能干扰Google Autocomplete的事件监听。建议移除内联事件，改用原生JS或jQuery绑定：

// 替换内联事件
document.querySelector('#search_input').addEventListener('focus', function() {
  this.previousElementSibling.style.display = 'none';
});
document.querySelector('#search_input').addEventListener('blur', function() {
  if (!this.value) this.previousElementSibling.style.display = 'block';
});

4. 验证Vite环境变量 #

确认.env文件中VITE_GOOGLE_MAP_KEY配置正确，且变量值能被正常获取。可以在控制台打印验证：

console.log('API Key:', apiKey);

5. 修复样式冲突 #

Tailwind的样式可能导致Autocomplete下拉菜单被隐藏或层级过低。添加CSS确保下拉菜单正常显示：

.pac-container {
  z-index: 9999 !important;
  overflow: visible !important;
}

6. 确认jQuery依赖 #

确保jQuery已正确引入且加载顺序在Google Maps脚本之前，否则$(document).ready逻辑无法执行，导致Autocomplete未初始化。

内容的提问来源于stack exchange，提问作者doneil chapman