CODEWITHSUNDEEP
reactjsgoogle-mapskey
Bournee
Bournee

Reputation: 61

google API is already presented in react app

"google API is already presented"

Screen shoot error explanation

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

Upvotes: 6

Views: 12018

Answers (7)

Naveed Shaik
Naveed Shaik

Reputation: 1

I resolved these issues by:

1.Replacing LoadScript with useLoadScript hook 2.Implementing proper cleanup for intervals 3.Adding better error handling 4.Managing state more effectively

const DeviceLocationMap = () => {
  const { isLoaded, loadError } = useLoadScript({
    googleMapsApiKey: config.googleMapsApiKey,
    libraries: ["places", "directions"],
  });

  // ... other state and effect hooks

  if (loadError) {
    return <div>Error loading maps</div>;
  }

  if (!isLoaded || !position) {
    return <LoadingComponent />;
  }

  return (
    <GoogleMap
      mapContainerStyle={mapContainerStyle}
      center={position}
      zoom={10}
      onLoad={onLoad}
      onUnmount={onUnmount}
    >
      {/* Map content */}
    </GoogleMap>
  );
};

Upvotes: 0

Bobur
Bobur

Reputation: 1

I also used some thing in that line and to solve it try instead and it helped <LoadScriptNext googleMapsApiKey={process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY!} libraries={libs} >

Upvotes: 0

Eric Ferrier
Eric Ferrier

Reputation: 21

I also used some thing in that line of thought with reactJs 18 (the map component is wrap into a Memo i.e. "export default memo(Map);" so it is render only when its props changes The <loadScript ..> takes the key as argument.

   <div>
       (
        typeof window !== 'undefined' && window.google ? (
          <Map/>
        ) : (
          <LoadScript ..><Map/> </LoadScript>
        )
      )}
    </div>

Upvotes: 0

Chris Heathwood
Chris Heathwood

Reputation: 341

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 :)

Upvotes: 12

Ajay
Ajay

Reputation: 1281

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.

Upvotes: 3

Joseph Owigo
Joseph Owigo

Reputation: 574

you must use the first check if the script is laoded before loading it again here is the sample code on react.js {window.google === undefined ? <LoadScript><GoogleMap /></LoadScript> : <GoogleMap />}

Upvotes: 2

Victor Karangwa
Victor Karangwa

Reputation: 2216

You get an error message google API is already presented in react app when you try to load google maps API more than once. For your case, you loaded google API script <script ... /> from your first snippet. You also used <LoadScript .../> in your second snippet, which does the same.

So, to get rid of that error you have to load Google Maps API once.

Upvotes: 1

Related Questions