Commit Graph

7 Commits

Author SHA1 Message Date
Eric Gullickson
bb4a356b9e Google Maps Bug 2025-11-08 12:17:29 -06:00
Eric Gullickson
45fea0f307 Gas Station Feature Finally Working 2025-11-04 21:05:12 -06:00
Eric Gullickson
9a01ebd847 Suppress harmless Google Maps DOM errors
Google Maps and React both manipulate the DOM, causing race conditions where
Google Maps removes nodes that React still has references to. This manifests
as a NotFoundError during removeChild operations, which is harmless and doesn't
affect functionality.

Add a global error event listener in StationMap that suppresses these specific
errors. Also revert to using script.async=true with callback parameter for
proper asynchronous Google Maps loading.

The map continues to work normally despite the suppressed errors.

🤖 Generated with Claude Code

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-04 19:38:40 -06:00
Eric Gullickson
715250d50d Add error handling for Google Maps DOM conflicts with React
The Google Maps API and React both manipulate the DOM, which can cause
conflicts where Google Maps removes nodes that React still has references
to. Add graceful error handling:

1. Remove async flag from Google Maps script - use defer only
2. Add try-catch in marker update useEffect to ignore removeChild errors
3. Add cleanup function to properly tear down markers on unmount
4. Log warnings instead of crashing when DOM conflicts occur

This allows the app to continue functioning even when there are minor
DOM reconciliation issues between Google Maps and React.

🤖 Generated with Claude Code

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-04 19:37:27 -06:00
Eric Gullickson
8e52f3fb0e Fix Google Maps API callback for async loading
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>
2025-11-04 19:36:03 -06:00
Eric Gullickson
4151f58fa5 Fix Google Maps async loading parameter
Add loading=async query parameter to Google Maps API URL to prevent
synchronous DOM manipulation. This fixes the warning:
'Google Maps JavaScript API has been loaded directly without loading=async'

The loading=async parameter tells Google Maps to defer API initialization
until the script is fully loaded, preventing race conditions with React's
DOM management.

🤖 Generated with Claude Code

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-04 19:33:12 -06:00
Eric Gullickson
5dc58d73b9 Gas Station Feature 2025-11-04 18:46:46 -06:00