Google Places API（新版）Autocomplete功能异常求助

版本问题拆解 #

• weekly版本：报错TypeError: google.maps.places.PlaceAutocompleteElement is not a constructor，原因是该版本属于开发预览版，API不稳定，PlaceAutocompleteElement可能未正式纳入导出或存在命名变更。
• beta版本：报错ApiNotActivatedMapError，需注意谷歌Places API包含多个子服务，要确保Places API (New)和Maps JavaScript API均已启用；另外权限设置生效存在1-5分钟延迟，取消密钥限制后需等待再测试。
• alpha版本：gmp-placeselect事件不触发，问题出在事件绑定时机与DOM挂载顺序，需确保自定义元素完全插入DOM后再绑定事件。

修复后的Vue3代码 #

import { Loader } from '@googlemaps/js-api-loader';
import { ref, onMounted } from 'vue';

const map = ref(null);
const loader = new Loader({
    apiKey: 'MY_API_KEY',
    version: 'beta', // 优先使用官方推荐的beta版本
    libraries: ['places']
});

async function initMap() {
    try {
        // 按依赖顺序加载库：先加载core，再加载其他子库
        await loader.importLibrary("core");
        const { Map } = await loader.importLibrary("maps");
        const { AdvancedMarkerElement } = await loader.importLibrary("marker");
        const { PlaceAutocompleteElement } = await loader.importLibrary("places");

        // 初始化地图
        map.value = new Map(document.getElementById("map"), {
            center: { lat: -34.397, lng: 150.644 },
            zoom: 9,
            mapId: "4504f8b37365c3d0",
            mapTypeControl: false,
        });

        // 创建地址自动完成组件并插入DOM
        const placeAutocomplete = new PlaceAutocompleteElement({
            componentRestrictions: { country: ['us'] },
        });
        placeAutocomplete.id = "pac-input";
        const card = document.getElementById("pac-map");
        card.appendChild(placeAutocomplete);

        // 绑定地址选择事件，同时添加标记逻辑
        placeAutocomplete.addEventListener('gmp-placeselect', (event) => {
            console.log(event.place);
            const marker = new AdvancedMarkerElement({
                map: map.value,
                position: event.place.geometry.location,
                title: event.place.name
            });
            map.value.panTo(event.place.geometry.location);
        });
    } catch (err) {
        console.error('初始化错误:', err);
    }
}

onMounted(async () => {
    // 确保DOM完全挂载后执行初始化
    await initMap();
});

关键修复点 #

1. 库加载顺序：先加载core核心库，再依次加载maps、marker、places子库，避免依赖缺失导致的API未定义问题。
2. beta版本权限排查：
   • 确认谷歌云控制台中Maps JavaScript API和**Places API (New)**均已启用；
   • 检查API密钥限制：即使取消IP限制，也要确保未设置错误的HTTP referrer规则；
   • 等待5分钟让权限设置生效后再测试。
3. 事件绑定时机：确保PlaceAutocompleteElement插入DOM后再绑定gmp-placeselect事件，保证元素完全初始化。
4. 错误捕获：添加try-catch块，便于快速定位初始化过程中的异常。

额外建议 #

• 优先使用官方推荐的beta版本，weekly/alpha属于预览版，存在功能不稳定问题；
• 检查谷歌云控制台的API配额，配额耗尽也会导致请求被拒绝；
• 测试时使用无痕模式，避免浏览器缓存的旧API版本干扰。

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