diff --git a/frontend/src/features/stations/utils/maps-loader.ts b/frontend/src/features/stations/utils/maps-loader.ts index 8ce86b1..09ab938 100644 --- a/frontend/src/features/stations/utils/maps-loader.ts +++ b/frontend/src/features/stations/utils/maps-loader.ts @@ -35,13 +35,9 @@ export function loadGoogleMaps(): Promise { return; } - // Create script tag - const script = document.createElement('script'); - script.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&loading=async&libraries=places`; - script.async = true; - script.defer = true; - - script.onload = () => { + // Create a global callback for Google Maps to call when ready + const callbackName = `gmapsCallback_${Date.now()}`; + (window as any)[callbackName] = () => { if ((window as any).google?.maps) { resolve(); } else { @@ -49,11 +45,20 @@ export function loadGoogleMaps(): Promise { new Error('Google Maps loaded but window.google.maps not available') ); } + // Clean up callback + delete (window as any)[callbackName]; }; + // Create script tag with callback + const script = document.createElement('script'); + script.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&loading=async&callback=${callbackName}&libraries=places`; + script.async = true; + script.defer = true; + script.onerror = () => { // Reset promise so retry is possible mapsPromise = null; + delete (window as any)[callbackName]; reject(new Error('Failed to load Google Maps script')); };