启用相关API后，React中Google Maps autocomplete仍报ApiNotActivatedMapError

我正在尝试用Google Maps API的自动补全功能创建React文本输入组件，代码如下：

"use client"

import React, { useRef } from "react";
import { useJsApiLoader, StandaloneSearchBox } from "@react-google-maps/api";

export default function LocationSearch() {
    const inputRef = useRef<google.maps.places.SearchBox | null>(null);
    const { isLoaded } = useJsApiLoader({
        id: 'google-map-script',
        googleMapsApiKey: process.env.NEXT_PUBLIC_MAPS_API_KEY as string,
        libraries: ["places"]
    })

    const handleOnPlacesChanged = () => {
        let address = inputRef.current?.getPlaces();
    }

    return (
        <>
            { isLoaded &&
                <StandaloneSearchBox 
                    onLoad={(ref) => inputRef.current = ref}
                    onPlacesChanged={handleOnPlacesChanged}>
                    <input
                        type="text"
                        placeholder="Enter location"/>
                </StandaloneSearchBox>
            }
        </>
    );
}

运行应用后，在输入框输入内容时，下拉框显示“This Page Can’t Load Google Maps Correctly”，同时控制台报错：

main.js:146 This API project is not authorized to use this API.
Places API error: ApiNotActivatedMapError

我已经启用了Maps JavaScript API和新版Places API，API密钥能正常显示地图，但生成新密钥、清除密钥限制后，自动补全还是无法使用。

• 确认启用正确的API
  StandaloneSearchBox依赖的是旧版Places Library（属于Maps JavaScript API的一部分），而非新版独立的Places API。前往Google Cloud控制台，检查是否启用了Places Library（Maps JavaScript API内嵌库），不能只启用新版Places API。

• 检查API密钥权限绑定
  在Google Cloud控制台的API密钥管理页面，确认该密钥的API限制列表中同时包含：

  • Maps JavaScript API
  • Places Library（注意区分独立的Places API）

• 验证libraries加载配置
  确保useJsApiLoader中的libraries: ["places"]配置正确，这是加载旧版Places Library的必要参数，缺失会导致StandaloneSearchBox无法调用相关接口。

• 检查项目结算状态
  Google Maps部分服务要求项目绑定有效结算账户，即使API已启用，若结算账户异常（如欠费、未激活）也会触发权限限制。确认你的Google Cloud项目已绑定正常的结算账户。

• 清除浏览器缓存
  浏览器可能缓存了旧的API加载状态，清除缓存后重新加载页面，确保新的API配置生效。

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