[Bug] Invalid/Expired API key crashes the page

[iqbalio]

Description

If the API key is expired/wrong. Then the page crashes once we move away from the map page. It throws the following error

Cannot read properties of undefined (reading 'remove')

Steps to Reproduce

https://codesandbox.io/p/sandbox/gracious-rain-slhtvx

1. Open the above sandbox and click on "Map" link
2. Map page will open and It will show "Oops! Something went wrong." as the API key is wrong.
3. Click on Home link to go back to home page
4. Click on Map again

Now after this If you move again to home page or any other route, It'll crash the page.

Environment

• Library version: 0.4.1
• Google maps version: weekly
• Browser and Version: Chrome 120
• OS: Windows 11

Logs

No response

[usefulthink]

This seems to be coming from the effect-cleanup for the useMapsEvents hook.
Needs some further investigation.

We should also implement the window.gm_authFailure callback in the API-loader so we can properly react to problems with the API-key.

[usefulthink]

Interesting:

react-google-maps/src/components/map/use-map-events.ts

Lines 62 to 77 in 69bade0

	useEffect(() => {
	if (!map) return;
	if (!handler) return;
	const listener = map.addListener(
	eventType,
	(ev?: google.maps.MapMouseEvent | google.maps.IconMouseEvent) => {
	const mapEvent = createMapEvent(eventType, map, ev);
	trackDispatchedEvent(mapEvent, cameraStateRef);
	handler(mapEvent);
	}
	);
	return () => listener.remove();
	}, [map, cameraStateRef, eventType, handler]);

For the error to happen, listener has to be undefined in line 76, which - at least according to the google maps docs can't happen. I verified that in the debugger and indeed there seems to be a situation where the google.maps.Map instance has an empty function instead of addListener which isn't documented anywhere. i'll try to replace that with google.maps.events.addListener to see if that is more reliable.

[usefulthink]

So the main issue should be adressed with #158. Unfortunately the maps API doesn't provide a reasonable way to react to an invalid API key in any other way. The "official" way to handle this would be the window.gm_authFailure callback, but that would only be useful for informational purpose, since it is called a long time after the "maps api ready" callback.

[usefulthink]

With #158 and #165 this should be taken care of. Will release a new Version later today.