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)