How can it be ingerated with useScript Hook about use-places-autocomplete

[the-dream-machine]

google-map-react will not load its internal Google Maps script if there is already one that is loaded.

The error You have included the Google Maps JavaScript API multiple times on this page. This may cause unexpected errors_ occurs because useScript has not finished loading the Google Maps script when the first instance of google-map-react is used.

Simple solution✨
Wait for script to finish loading then render the <GoogleMapReact/> component

const App = () => {

 const { ... } = usePlacesAutocomplete({ callbackName: 'initMap' });  
 const status = useScript(
   'https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap'
 );

 return (
 // Make sure script is loaded before rendering <GoogleMapReact />
  {status === "ready" && (
       <GoogleMapReact
         options={createMapOptions}
         bootstrapURLKeys={{ key: YOUR_API_KEY}}                      
        />
   )}
)

//...
};

[wellyshen]

@EminQasimov For async script you need to set the callbackName option. For example:

const App = () => {
  const { ... } = usePlacesAutocomplete({ callbackName: 'initMap' });
  const [loaded, error] = useScript(
    'https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap'
  );

  // ...
};

[wellyshen]

@EminQasimov If you got a global function not found error. Make sure usePlaceAutocomplete is declared before the useScript.

[lanre-mark]

Hi, I'm using google-map-react for a map clustering component on my website and now using use-places-autocomplete for place search bar implementation.

Using the useScript to load the script after usePlaceAutocomplete's declaration, I have this error in my logs **You have included the Google Maps JavaScript API multiple times on this page. This may cause unexpected errors**. preventing the component using google-map-react from loading

Do you think there is something I can do. When I load the script tag manually from the index.html, I don't have this error. I don't also know if I should worry about google-map-react but what's your take?

[wellyshen]

@lanre-mark Did you try this?

[lanre-mark]

Thanks @wellyshen, yes that's what I eventually tried after a lot of attempts that worked but then I have this error in my logs on the browser You have included the Google Maps JavaScript API multiple times on this page. This may cause unexpected errors_

[wellyshen]

@lanre-mark The google-map-react loads the Google Maps script internally. I think you can ask them the solution of preventing loading script internally.

Here's the related issue.

[AnirudhaGohokar]

@EminQasimov For async script you need to set the callbackName option. For example:

const App = () => {
  const { ... } = usePlacesAutocomplete({ callbackName: 'initMap' });
  const [loaded, error] = useScript(
    'https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap'
  );

  // ...
};

Am getting error as Cannot read property getPlacePredictions of null. Followed exact same steps

[wellyshen]

@AnirudhaGohokar Can you give a reproduced repo for debugging?

[MiguelNiblock]

check out this approach #1120 (comment)