google API is already presented in react app

Question

"google API is already presented"

1.

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=GOOGLE API KEY0&libraries=places"></script>
    <script>
        function init() {

            var options = {
              types: ['(cities)'],
              componentRestrictions: {country: "au"}
            };

            var input = document.getElementById('citySearch');
            var autocomplete = new google.maps.places.Autocomplete(input,options);
        }

        google.maps.event.addDomListener(window, 'load', init);
    </script>

2

  return (
    <div className="googleMapContainer">
      {console.log(window.google)}
      <LoadScript googleMapsApiKey={googleApiKey}>
        <div className="googleMap">
          <GoogleMap

How to handle this? One API key is in index.html and other one is trying to use API key as props for component react-google-maps

Answer 1

In case anyone else finds this google offers another API for loading the scripts rather than using <LoadScript>.

  const { isLoaded } = useJsApiLoader({
    id: 'google-map-script',
    googleMapsApiKey: 'YOUR API KEY HERE',
    libraries: ['geometry', 'drawing'],
  });

Then you can just use isLoaded later on:

{isLoaded && <GoogleMap
  onLoad={saveMap}
  mapContainerClassName={classes.mapContainer}
  mapContainerStyle={containerSize}
  center={DefaultCenterPoint}
  options={options}
>
  {mapItems}
</GoogleMap>}

This automatically handles if the maps API has already been loaded :)

Answer 2

Try <GoogleMap /> without <LoadScript /> in the code 2. Check more here

Alternatively you can move the LoadScript to a parent component that doesn't render much, preferably close to the root of your tree.