How to solve "You have included the Google Maps JavaScript API multiple times on this page. This may cause unexpected errors." issues

[WanderingBrooks]

The google maps section of our app started failing today. After some investigation we found that the offending code was contained in the component <LoadScript>. So we swapped to the hook useJsApiLoader and it solved our issue. It might fix the problem for you too.

LoadScript uses a custom function, not dependent on the google maps api, for loading and unloading the script.

react-google-maps-api/packages/react-google-maps-api/src/LoadScript.tsx

Line 4 in b768d0a

import { injectScript } from './utils/injectscript'

whereas in the useJsApiLoader hook, the official google maps packages method is used.

react-google-maps-api/packages/react-google-maps-api/src/useJsApiLoader.tsx

Lines 46 to 58 in b768d0a

	const loader = useMemo(() => {
	return new Loader({
	id,
	apiKey: googleMapsApiKey,
	version,
	libraries,
	language: language || 'en',
	region: region || 'US',
	mapIds: mapIds || [],
	nonce: nonce || '',
	authReferrerPolicy: authReferrerPolicy || 'origin',
	})
	}, [id, googleMapsApiKey, version, libraries, language, region, mapIds, nonce, authReferrerPolicy])

Hope this helps someone from: @jakeisnt and @WanderingBrooks.