CODEWITHSUNDEEP
reactjstypescriptnext.jsgoogle-places-apireact-google-maps-api
kokeshidynamo
kokeshidynamo

Reputation: 1

Why do I keep getting the ApiNotActivatedMapError when I've checked that my API key is working and able to call the necessary maps APIs?

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.com/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. I've been stuck on this for a few hours now, so any help is appreciated!

Upvotes: 0

Views: 14

Answers (1)

Elippsis007
Elippsis007

Reputation: 13

I'm also experiencing this issue too. Not sure what is going on.

Upvotes: 0

Related Questions