You have included the Google Maps JavaScript API multiple times on this page.

[anasmohana]

Hi
I am working on a new project that consists of two pages
Main: that show maps with some marker and use map
locations: that add locations to DB and use place library
My problem is when I move from the main page to location page the app work fine but if I go directly to locations I get error "google not define" when I load the script it works, but then when I navigate back and forward get the new error "You have included the Google Maps JavaScript API multiple times on this page." many people recommended to add the script to the index.html but really want to know if there is another solution

[JustFly1984]

Please provide minimal reproduction in code sandbox

[JustFly1984]

Try to use useLoadScript hook

[anasmohana]

Main.jsx:
import React from 'react';
import { GoogleMap, useJsApiLoader, Marker, MarkerClusterer, InfoWindow } from '@react-google-maps/api';
function Main() {
const [map, setMap] = useState(null);

const { isLoaded } = useJsApiLoader({
id: 'google-map-script',
googleMapsApiKey: process.env.REACT_APP_GOOGLE_API_KEY,
})
const onLoad = React.useCallback(function callback(map) {
console.log(window.google);
const bounds = new window.google.maps.LatLngBounds(markers[0].position);
markers.forEach(({ position }) => bounds.extend(position));
map.fitBounds(bounds);
setMap(map);
}, [])

const onUnmount = React.useCallback(function callback(map) {
  setMap(null)
}, [])

return isLoaded ? (
<GoogleMap
mapContainerStyle={containerStyle}
center={markers[0].position}
zoom={10}
onLoad={onLoad}
onUnmount={onUnmount}
onClick={() => setActiveMarker(null)}
>

    </GoogleMap>
    
) : <></>

}

export default React.memo(Main)

location.jsx:
import React from 'react';
import { StandaloneSearchBox, useLoadScript } from "@react-google-maps/api";

const libraries = ['places'];

function AddLocation(props) {
const {isLoaded} = useLoadScript({googleMapsApiKey:process.env.REACT_APP_GOOGLE_API_KEY},libraries)

const CustomInputComponent = (props) => (
    <StandaloneSearchBox
        onLoad={ref => inputRef.current[0] = ref}
        onPlacesChanged={()=>handlePlaceChanged(0)}
    >
        <input
            type="text"
            className="form-control"
            placeholder="Enter Location"
            {...props}
        />
    </StandaloneSearchBox>
);

return isLoaded ? (
<Formik
initialValues={{name: '',
current_address: '',
comment:'',
}}
validationSchema={locationSchema}
onSubmit={values => {
console.log(newSignUpData);
}}
innerRef={formRef}
>
{({ errors, touched }) => (

{errors.name && touched.name ? (

{errors.name}

) : null}

                    <div className='form-field'>
                        <Field as={CustomInputComponent} name="current_address" className='input'/>
                        {errors.current_address ? (
                            <div className='error'>{errors.current_address}</div>
                        ) : null}
                    </div>
                    
                                           
                    <button type="submit" className='submit' >Submit</button>
                </Form>
            )}
        </Formik> 
):<></>;

}

export default AddLocation;

[anasmohana]

I have tried to minimize the code there is some navigate hook between these two pages :)

[anasmohana]

plz give an example of how to use this hook useLoadScript :)