reactjs - Why do I keep getting the ApiNotActivatedMapError when I've checked that my API key is working and able to cal

I'm trying to create a React component for a text input field using the Google Maps API autocomplete feature. This is the code I have so far:

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

    }

When I run my web app and try to type in the textbox, the dropdown displays a "This Page Can’t Load Google Maps Correctly" message.

I've enabled access to both the Maps JavaScript API and Places API (new), and ensured that my API key is able to call these APIs, but I still get this error when trying to input text into my autocomplete textbox:

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

I know my Google Maps API key works for displaying a map, as I was able to get that working earlier, but I've tried generating new API keys, clearing and resetting the key restrictions, and nothing seems to allow me to use the autocomplete feature.

I'm trying to create a React component for a text input field using the Google Maps API autocomplete feature. This is the code I have so far:

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

    }

When I run my web app and try to type in the textbox, the dropdown displays a "This Page Can’t Load Google Maps Correctly" message.

I've enabled access to both the Maps JavaScript API and Places API (new), and ensured that my API key is able to call these APIs, but I still get this error when trying to input text into my autocomplete textbox:

main.js:146 This API project is not authorized to use this API.
Places API error: ApiNotActivatedMapError
https://developers.google/maps/documentation/javascript/error-messages#api-not-activated-map-error

I know my Google Maps API key works for displaying a map, as I was able to get that working earlier, but I've tried generating new API keys, clearing and resetting the key restrictions, and nothing seems to allow me to use the autocomplete feature.

• reactjs
• typescript
• next.js
• google-places-api
• react-google-maps-api

Share Improve this question Follow edited Mar 6 at 0:37 halfer 20.4k1919 gold badges109109 silver badges202202 bronze badges asked Mar 3 at 2:03 kokeshidynamokokeshidynamo 3111 bronze badge 4

• I have exactly the same setup with "@react-google-maps/api" and the "AutoComplete" component and I get exactly the same error. – 0x00F Commented Mar 4 at 14:39
• Not working with Vue3 @googlemaps/js-api-loader either. stackoverflow/questions/79482008/… – Nathan Commented Mar 7 at 1:42
• The autocomplete API is broken on Google side for now stackoverflow/a/79494255/3479125 – Ivan Borshchov Commented Mar 8 at 10:48
• Google helped me to understand how make legacy API work, I updated my answer – Ivan Borshchov Commented Mar 12 at 10:32

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 3

Probably your API key only enable Places API (New), while the library your using uses Places API (Legacy) endpoints.

https://developers.google/maps/documentation/places/web-service/place-autocomplete

i am experiencing this too. I enabled/disabled the APIs, then I created a new API, which initially gave a different error (possible because it takes up to 5 minutes to load), but after I got the same ApiNotActivatedMapError.

The autocomplete API is broken on Google side for now. I created a Google support case for Google with minimal jsfiddle examples, both are not working

Old API: https://jsfiddle/05t4dbrh/2/

New API (beta): https://jsfiddle/05t4dbrh/1/

I have shown them these fiddles, waiting for response.

Also please consider clicking on "+1" in google issue tracker https://issuetracker.google/issues/401460263?pli=1 To prioritize issue in Google Queue

---

update 12 Mar 2025:

Support sent me a link which allows to activate legacy "Places API" it is here:

https://console.cloud.google/apis/library/places-backend.googleapis?&project=

I did this and also added "Places API" to API Restrictions on my API Key. So now I have in restrictions:

Selected APIs:
Places API (New)
Maps JavaScript API
Places API

My fiddle for Old API is working now! Old API: https://jsfiddle/05t4dbrh/2/

Also Google Support said me next:

The short version is that Legacy APIs are is still usable, maintained, supported, and under SLA for the foreseeable future, but will eventually become deprecated https://developers.google/maps/launch-stages#deprecated) ([2]).

Same here, all set correctly on my Google Console ; but the npm package I was using '@react-google-maps/api' was pointing to the legacy Api Places end point.

I did a test fetching from the new end point and got the auto complete prediction results.

   const response = await fetch('https://places.googleapis/v1/places:autocomplete', requestOptions);