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

[BariqDev]

any updates about this issue ?

[haris-aqeel]

@BariqDev No updates yet!

[JustFly1984]

if somebody provides a PR with new component, I would merge it and release new version.

[svey]

No updates? This is important for us too due to costs.

Updates: New API Keys no longer receive access to the Legacy API

[JustFly1984]

Your PR is welcome

[WRTeamYash]

There is no option for the old Places API in the Google Cloud Console anymore. Only the Places API (New) is available, and it's causing a MapActivation failed error.

Please resolve this issue urgently!

[JustFly1984]

@WRTeamYash If you need this urgently, you can hire me for hourly rate, and I will do my best and help you with integration. send me a message in telegram @alex_js if it is urgent.

[WRTeamYash]

@WRTeamYash If you need this urgently, you can hire me for hourly rate, and I will do my best and help you with integration. send me a message in telegram @alex_js if it is urgent.

Thank you for your response.
Could you please let us know when this issue will be resolved and if it will be included in an upcoming package update?

[JustFly1984]

@WRTeamYash I'm currently very busy on other projects. I'm maintaining this repo by merging PR's from other contributors, or if somebody pays me hourly rate. I'm currently building a marketplace to sell commercial licenses, and planning to release 3.0 with commercial license https://github.com/ospm-app/cossm-license/blob/main/LICENSE
For 3.0 I will make a major refactoring and add all new features. Meanwhile you can make a PR yourself, hire somebody or hire me. or wait till somebody else will make a PR for everybody. This library is downloaded 750k per week. I guess many people has the same issue.