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

Activity

1. SamLeatherdale commented on Mar 9, 2024

   

   SamLeatherdale

   on Mar 9, 2024

   More actions

   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.

   👍React with 👍1Reacted by Will Lanni
2. bruno-agileengine commented on Apr 23, 2024

   

   bruno-agileengine

   on Apr 23, 2024

   Last edited by bruno-agileengine

   More actions

   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)
3. malikk908 commented on May 31, 2024

   

   malikk908

   on May 31, 2024

   Last edited by malikk908

   More actions

   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.
4. lizhenew commented on Jun 5, 2024

   

   lizhenew

   on Jun 5, 2024

   Last edited by lizhenew

   More actions

   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. 😢
   
5. malikk908 commented on Jun 5, 2024

   

   malikk908

   on Jun 5, 2024

   Last edited by malikk908

   More actions

   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

   👀React with 👀1Reacted by lizhenew
6. lizhenew commented on Jun 5, 2024

   

   lizhenew

   on Jun 5, 2024

   Last edited by lizhenew

   More actions

   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. 😭
   
7. malikk908 commented on Jul 5, 2024

   

   malikk908

   on Jul 5, 2024

   More actions

   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. 😭

   sorry for late reply, however I have also noticed the same error in my app but my Autocomplete component works fine so I this isn't bothering me much.

   👎React with 👎3Reacted by Will Lanni, Kamlesh Paul and Kruusi
8. nseokaneJHB commented on May 29, 2025

   

   nseokaneJHB

   on May 29, 2025

   More actions

   &loading=async

   Used th

   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.

   This resolved the issue for me

   👍React with 👍1Reacted by Chamin Jayasooriya