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>
This commit is contained in:
@@ -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'));
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user