Console warning: "Google Maps JavaScript API has been loaded directly without loading=async"

[simka1911]

When using usePlacesWidget hook, a warning is shown in the console:

Google Maps JavaScript API has been loaded directly without loading=async. This can result in suboptimal performance.

Is it possible to add async attribute to script during loadGoogleMapScript execution?

[SamLeatherdale]

The recommendations in Google's docs on Loading the Maps JavaScript API don't even recommend a script tag anymore, they recommend using the @googlemaps/js-api-loader package.

[bruno-agileengine]

It seems this issue comes from googleMapsScriptUrl inside usePlacesAutocompleteService.ts

export default function usePlacesAutocompleteService({
  apiKey,
  libraries = "places",
  googleMapsScriptBaseUrl = GOOGLE_MAP_SCRIPT_BASE_URL,
  debounce = 300,
  options = {},
  sessionToken,
  language,
}) {
  const languageQueryParam = language ? `&language=${language}` : "";
  const googleMapsScriptUrl = `${googleMapsScriptBaseUrl}?key=${apiKey}&libraries=${libraries}${languageQueryParam}`;

I tried adding loading=async to googleMapsScriptUrl and the warning disappeared, but then I got this error

usePlacesAutocompleteService.js:110 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'AutocompleteService') at buildService (usePlacesAutocompleteService.js:110:66) at eval (usePlacesAutocompleteService.js:118:16)

[malikk908]

const {
        placePredictions,
        getPlacePredictions,
        isPlacePredictionsLoading,
    } = usePlacesService({
        apiKey: `${process.env.REACT_APP_MAPS_API_KEY}&loading=async` ,
        debounce: 500
    });

I am using usePlacesAutocompleteService but you may try on usePlacesWidget as well.

This solved the issue for me.

[lizhenew]

const {
        placePredictions,
        getPlacePredictions,
        isPlacePredictionsLoading,
    } = usePlacesService({
        apiKey: `${process.env.REACT_APP_MAPS_API_KEY}&loading=async` ,
        debounce: 500
    });

I am using usePlacesAutocompleteService but you may try on usePlacesWidget as well.
This solved the issue for me.

I tried this method:

apiKey: `${apiKey}&loading=async`, 

but it will cause other errors. 😢

[malikk908]

const {
        placePredictions,
        getPlacePredictions,
        isPlacePredictionsLoading,
    } = usePlacesService({
        apiKey: `${process.env.REACT_APP_MAPS_API_KEY}&loading=async` ,
        debounce: 500
    });

I am using usePlacesAutocompleteService but you may try on usePlacesWidget as well.
This solved the issue for me.

I tried this method:

apiKey: `${apiKey}&loading=async`, 

but it will cause other errors. 😢

are you trying to display multiple instances of usePlaceService in the same page/component ? because thats the same error I got, I created an issue and the possible workaround, please go through it #236

[lizhenew]

I tried this method:

apiKey: `${apiKey}&loading=async`, 

but it will cause other errors. 😢

are you trying to display multiple instances of usePlaceService in the same page/component ? because thats the same error I got, I created an issue and the possible workaround, please go through it #236

Maybe it's different from your situation, I still encounter this issue when only use one AutoComplete component in page.
Then I used the method you provided in #236. Indeed, the previous undefined (reading 'AutocompleteService') issue have been resolved, but the component will encounter another new issue. 😭