Issue: Google Places New API Compatibility with @react-google-maps/api

[haris-aqeel]

Please provide an explanation of the issue

The current Autocomplete component provided by @react-google-maps/api appears to be using the old Places API behind the scenes. Google has recently introduced a new Places API and an updated Autocomplete widget as described in Google's documentation. However, the new implementation does not seem to be supported in the library.

To confirm this issue, I:

Enabled the old Places API and tested the Autocomplete component, which worked as expected.

Disabled the old Places API and enabled only the new Places API (as per the migration guide linked above). Upon doing this, the Autocomplete component failed with an error indicating that the Places API is disabled and encountered a MapActivation failed error.

The API key used for these tests was the same throughout, ensuring that this is not an API key-related issue. This is essential since we only want to enable our API key to use the new Places API for structured costing and not enable the old Places API. This is essential since we only want to enable our API key to use the new Places API, not the old one. This suggests that @react-google-maps/api is still reliant on the old Places API and has not yet adopted the new API.

My Environment

OS: Windows

Node version: 22.8.0

React version: 18.2.0

Webpack version: N/A (using Next.js)

@babel version: N/A

@react-google-maps/api version: 2.20.3

How does it behave?

When the old Places API is disabled and only the new Places API is enabled, the Autocomplete component fails to work and throws an error indicating that the Places API is disabled. The error message also mentions MapActivation failed.

How should it behave correctly?

The Autocomplete component should function correctly with the new Places API enabled and without requiring the old Places API. It should support the updated Autocomplete widget as described in Google's migration documentation.

Basic implementation of incorrect behavior as a sample:

Here is a basic implementation of the issue:

`

import {
    GoogleMap,
    Autocomplete
} from "@react-google-maps/api";

const libraries = ["places"];
const MapComponent = () => {
    const { isLoaded: isMapLoaded, loadError: mapLoadError } = useJsApiLoader({
        googleMapsApiKey: process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY || '',
        libraries,
    });

    const onLoadAutocomplete = (autocomplete) => {
        console.log("Autocomplete loaded:", autocomplete);
    };

    const onPlaceChanged = () => {
        console.log("Place changed");
    };

    if (mapLoadError) return <div>Error loading map</div>;
    if (!isMapLoaded) return <div>Loading...</div>;

    return (
        <div>
            <GoogleMap
                center={{ lat: -34.397, lng: 150.644 }}
                zoom={8}
                mapContainerStyle={{ height: "400px", width: "800px" }}
            >
                <Autocomplete
                    onLoad={onLoadAutocomplete}
                    onPlaceChanged={onPlaceChanged}
                >
                    <input
                        type="text"
                        placeholder="Search for a place..."
                        className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                    />
                </Autocomplete>
            </GoogleMap>
        </div>
    );
};

export default MapComponent;

`
Steps to Reproduce:

Enable the old Places API in your Google Cloud console and test the component. It works fine.

Disable the old Places API and enable only the new Places API (as per Google's documentation).

The Autocomplete component fails with an error indicating that the Places API is disabled and shows a MapActivation failed error.

Additional Notes

Google's new Places API and Autocomplete widget introduce improved functionality and are part of their recent migration updates. Support for the new API in @react-google-maps/api is crucial for developers to stay up-to-date and use the latest features provided by Google Maps.

[haris-aqeel]

@FallOutChonny @joshuapaling @forki @gregoryfm

Please look into this. This is urgent