From 8e52f3fb0e442b618c6c44139aecc98674f6e2b7 Mon Sep 17 00:00:00 2001
From: Eric Gullickson <16152721+ericgullickson@users.noreply.github.com>
Date: Tue, 4 Nov 2025 19:36:03 -0600
Subject: [PATCH] Fix Google Maps API callback for async loading
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The loading=async parameter requires a callback to notify when the API
is ready. Without a callback, google.maps is not properly initialized.

Use a global callback function with a timestamp suffix to handle the
async initialization properly, ensuring google.maps.Map constructor
is available when the component tries to initialize the map.

🤖 Generated with Claude Code

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../features/stations/utils/maps-loader.ts    | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

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<void> {
       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<void> {
           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'));
     };