xertica-ui 2.2.1 → 2.4.0

package/components/ui/google-maps-loader/google-maps-loader.tsx

@@ -1,465 +1,465 @@
-'use client';
-
-import React, { createContext, useContext, ReactNode, useState, useEffect, useRef } from 'react';
-import { GOOGLE_MAPS_LIBRARIES, GOOGLE_MAPS_ID } from '../map-config';
-
-interface GoogleMapsContextType {
-  isLoaded: boolean;
-  loadError: Error | undefined;
-  load: (apiKey: string) => Promise<void>;
-}
-
-const GoogleMapsContext = createContext<GoogleMapsContextType>({
-  isLoaded: false,
-  loadError: undefined,
-  load: () => Promise.resolve(),
-});
-
-// Singleton global para prevenir múltiplos carregamentos
-declare global {
-  interface Window {
-    __XERTICA_GOOGLE_MAPS_LOADER__?: {
-      isLoaded: boolean;
-      loadError: Error | undefined;
-      listeners: Set<(state: GoogleMapsContextType) => void>;
-      scriptElement?: HTMLScriptElement;
-    };
-  }
-}
-
-/**
- * Helper that synchronously reads the Google Maps API key from the environment or localStorage
- */
-function getInitialApiKey(): string | undefined {
-  // 1. Check Environment Variable (Vite)
-  if (
-    typeof import.meta !== 'undefined' &&
-    import.meta.env &&
-    import.meta.env.VITE_GOOGLE_MAPS_API_KEY
-  ) {
-    return import.meta.env.VITE_GOOGLE_MAPS_API_KEY as string;
-  }
-
-  if (typeof window === 'undefined') return undefined;
-
-  const savedKey = window.localStorage?.getItem('xertica-googlemaps-api-key');
-
-  if (savedKey && savedKey.trim().length > 0) {
-    return savedKey;
-  }
-
-  return undefined;
-}
-
-/**
- * Removes the existing Google Maps script tag and clears the global Maps object
- */
-function removeExistingScript(): void {
-  if (typeof window === 'undefined') return;
-
-  // Remover callback global se existir
-  if ((window as any).__googleMapsCallback) {
-    delete (window as any).__googleMapsCallback;
-  }
-
-  // Remover script existente
-  const existingScript = document.querySelector(`script[src*="maps.googleapis.com/maps/api/js"]`);
-  if (existingScript) {
-    existingScript.remove();
-  }
-
-  // Limpar Google Maps do window
-  if ((window as any).google?.maps) {
-    delete (window as any).google.maps;
-  }
-
-  // Limpar singleton para permitir novo carregamento
-  if (window.__XERTICA_GOOGLE_MAPS_LOADER__) {
-    window.__XERTICA_GOOGLE_MAPS_LOADER__.isLoaded = false;
-    window.__XERTICA_GOOGLE_MAPS_LOADER__.loadError = undefined;
-    window.__XERTICA_GOOGLE_MAPS_LOADER__.scriptElement = undefined;
-  }
-}
-
-/**
- * Returns true if the Google Maps JS API has already been loaded
- */
-function isGoogleMapsAlreadyLoaded(): boolean {
-  if (typeof window === 'undefined') return false;
-  return window.google?.maps?.version !== undefined;
-}
-
-/**
- * Returns true if the AdvancedMarkerElement marker library is available
- */
-function isMarkerLibraryLoaded(): boolean {
-  if (typeof window === 'undefined') return false;
-  return window.google?.maps?.marker?.AdvancedMarkerElement !== undefined;
-}
-
-/**
- * Dynamically injects the Google Maps JS script tag and resolves when all libraries are loaded
- */
-function loadGoogleMapsScript(apiKey?: string): Promise<void> {
-  return new Promise((resolve, reject) => {
-    if (typeof window === 'undefined') {
-      reject(new Error('Window is undefined'));
-      return;
-    }
-
-    // Validar API key antes de carregar
-    if (!apiKey || apiKey.length < 10) {
-      reject(
-        new Error(
-          'Invalid or missing Google Maps API key. Please configure your API key in Settings.'
-        )
-      );
-      return;
-    }
-
-    // Se já está carregado com a mesma key, resolver imediatamente
-    if (isGoogleMapsAlreadyLoaded() && isMarkerLibraryLoaded()) {
-      // Verificar se a API key atual é a mesma
-      const existingScript = document.querySelector(
-        `script[src*="maps.googleapis.com/maps/api/js"]`
-      ) as HTMLScriptElement;
-      if (existingScript && existingScript.src.includes(`key=${apiKey}`)) {
-        resolve();
-        return;
-      }
-    }
-
-    // Verificar se o script já existe
-    const existing = document.querySelector(
-      `script[src*="maps.googleapis.com/maps/api/js"]`
-    ) as HTMLScriptElement;
-    if (existing) {
-      // Se existe mas com chave diferente, logar aviso. Não podemos recarregar com SPA se componentes já foram definidos.
-      if (!existing.src.includes(`key=${apiKey}`)) {
-        console.warn(
-          '[GoogleMapsLoader] API key changed, but Google Maps cannot be reloaded without a full page refresh because custom elements are already defined.'
-        );
-        // Don't reject, just resolve to keep the app working with the old key until refresh
-        resolve();
-        return;
-      }
-
-      // Aguardar o script carregar
-      if (isGoogleMapsAlreadyLoaded() && isMarkerLibraryLoaded()) {
-        resolve();
-      } else {
-        existing.addEventListener('load', () => {
-          setTimeout(() => {
-            if (isMarkerLibraryLoaded()) {
-              resolve();
-            } else {
-              reject(new Error('Marker library failed to load'));
-            }
-          }, 100);
-        });
-        existing.addEventListener('error', () => reject(new Error('Failed to load Google Maps')));
-      }
-      return;
-    }
-
-    // Prevenir reinjeção se customElements já tem gmp-map (garantia final)
-    if (typeof customElements !== 'undefined' && customElements.get('gmp-map')) {
-      console.warn(
-        '[GoogleMapsLoader] gmp-map is already defined in customElements. Skipping script injection.'
-      );
-      resolve();
-      return;
-    }
-
-    // Criar novo script
-    const script = document.createElement('script');
-    const params = new URLSearchParams({
-      key: apiKey, // SEMPRE incluir a API key
-      callback: '__googleMapsCallback',
-      libraries: GOOGLE_MAPS_LIBRARIES.join(','),
-      v: 'quarterly', // Usar 'quarterly' para versão estável ao invés de 'weekly'
-      loading: 'async',
-    });
-
-    script.src = `https://maps.googleapis.com/maps/api/js?${params.toString()}`;
-    script.async = true;
-    script.defer = true;
-    script.id = GOOGLE_MAPS_ID;
-
-    // Callback global
-    (window as any).__googleMapsCallback = () => {
-      delete (window as any).__googleMapsCallback;
-      // Aguardar um pouco para garantir que todas as bibliotecas foram carregadas
-      setTimeout(() => {
-        if (isMarkerLibraryLoaded()) {
-          resolve();
-        } else {
-          reject(new Error('Marker library failed to load'));
-        }
-      }, 100);
-    };
-
-    script.addEventListener('error', () => {
-      delete (window as any).__googleMapsCallback;
-      reject(
-        new Error(
-          'Failed to load Google Maps script. Please check your API key and ensure Maps JavaScript API is enabled.'
-        )
-      );
-    });
-
-    document.head.appendChild(script);
-
-    // Salvar referência ao script
-    const singleton = getOrCreateSingleton();
-    if (singleton) {
-      singleton.scriptElement = script;
-    }
-  });
-}
-
-/**
- * Inicializa o singleton global
- */
-function getOrCreateSingleton() {
-  if (typeof window === 'undefined') return null;
-
-  if (!window.__XERTICA_GOOGLE_MAPS_LOADER__) {
-    const isPreloaded = isGoogleMapsAlreadyLoaded();
-
-    window.__XERTICA_GOOGLE_MAPS_LOADER__ = {
-      isLoaded: isPreloaded,
-      loadError: undefined,
-      listeners: new Set(),
-      scriptElement: undefined,
-    };
-  }
-
-  return window.__XERTICA_GOOGLE_MAPS_LOADER__;
-}
-
-/**
- * Atualiza o estado do singleton e notifica listeners
- */
-function updateSingleton(state: Partial<GoogleMapsContextType>) {
-  const singleton = getOrCreateSingleton();
-  if (!singleton) return;
-
-  if (state.isLoaded !== undefined) singleton.isLoaded = state.isLoaded;
-  if (state.loadError !== undefined) singleton.loadError = state.loadError;
-
-  // Prepare safe state to notify
-  const newState: GoogleMapsContextType = {
-    isLoaded: singleton.isLoaded,
-    loadError: singleton.loadError,
-    load: async (apiKey: string) => {
-      // Allow manual loading call via stored function in context if needed,
-      // though typically we use the direct export or loadGoogleMapsScript
-      if (singleton.isLoaded) return;
-      try {
-        await loadGoogleMapsScript(apiKey);
-        updateSingleton({ isLoaded: true, loadError: undefined });
-      } catch (error: any) {
-        updateSingleton({ isLoaded: false, loadError: error });
-        throw error;
-      }
-    },
-  };
-
-  singleton.listeners.forEach(listener => listener(newState));
-}
-
-/**
- * Internal component that subscribes to the singleton loader state
- */
-const SingletonLoaderWrapper = ({ children }: { children: ReactNode }) => {
-  const [state, setState] = useState<GoogleMapsContextType>(() => {
-    const singleton = getOrCreateSingleton();
-
-    // Default load function that triggers the script load
-    const loadFn = async (apiKey: string) => {
-      if (singleton?.isLoaded) return;
-      try {
-        await loadGoogleMapsScript(apiKey);
-        updateSingleton({ isLoaded: true, loadError: undefined });
-      } catch (error: any) {
-        updateSingleton({ isLoaded: false, loadError: error });
-        throw error;
-      }
-    };
-
-    if (!singleton) return { isLoaded: false, loadError: undefined, load: loadFn };
-
-    return {
-      isLoaded: singleton.isLoaded,
-      loadError: singleton.loadError,
-      load: loadFn,
-    };
-  });
-
-  useEffect(() => {
-    const singleton = getOrCreateSingleton();
-    if (!singleton) return;
-
-    const listener = (newState: GoogleMapsContextType) => {
-      setState(newState);
-    };
-
-    singleton.listeners.add(listener);
-
-    // Sincronizar estado inicial e função de load
-    listener({
-      isLoaded: singleton.isLoaded,
-      loadError: singleton.loadError,
-      load: state.load,
-    });
-
-    return () => {
-      singleton.listeners.delete(listener);
-    };
-  }, []);
-
-  return <GoogleMapsContext.Provider value={state}>{children}</GoogleMapsContext.Provider>;
-};
-
-/**
- * Internal component that manually triggers the Google Maps script load
- */
-const LoaderInitializer = ({ apiKey }: { apiKey?: string }) => {
-  const hasInitializedRef = useRef(false);
-
-  useEffect(() => {
-    // Prevenir múltiplas execuções
-    if (hasInitializedRef.current) {
-      return;
-    }
-
-    const singleton = getOrCreateSingleton();
-    if (!singleton) return;
-
-    // Se já está carregado, atualizar estado
-    if (isGoogleMapsAlreadyLoaded() && isMarkerLibraryLoaded()) {
-      updateSingleton({ isLoaded: true, loadError: undefined });
-      hasInitializedRef.current = true;
-      return;
-    }
-
-    hasInitializedRef.current = true;
-
-    // Use prop key OR get from storage
-    const keyToUse = apiKey || getInitialApiKey();
-
-    // Se não houver API key, apenas marcar como não carregado (sem erro)
-    if (!keyToUse) {
-      updateSingleton({
-        isLoaded: false,
-        loadError: undefined, // Não definir erro quando não há API key
-      });
-      return;
-    }
-
-    loadGoogleMapsScript(keyToUse)
-      .then(() => {
-        updateSingleton({ isLoaded: true, loadError: undefined });
-      })
-      .catch(error => {
-        updateSingleton({ isLoaded: false, loadError: error });
-      });
-  }, [apiKey]);
-
-  return null;
-};
-
-interface GoogleMapsLoaderProviderProps {
-  children: ReactNode;
-  apiKey?: string;
-}
-
-/**
- * GoogleMapsLoaderProvider
- *
- * Provider global que gerencia o carregamento da API do Google Maps.
- * Usa carregamento manual do script para evitar conflitos com custom elements.
- */
-export const GoogleMapsLoaderProvider = ({ children, apiKey }: GoogleMapsLoaderProviderProps) => {
-  const [shouldInitialize] = useState(() => {
-    const singleton = getOrCreateSingleton();
-    if (!singleton) return false;
-
-    // Se já está carregado, não inicializar
-    if (singleton.isLoaded || isGoogleMapsAlreadyLoaded() || isMarkerLibraryLoaded()) {
-      singleton.isLoaded = true;
-      return false;
-    }
-
-    return true;
-  });
-
-  return (
-    <>
-      {shouldInitialize && <LoaderInitializer apiKey={apiKey} />}
-      <SingletonLoaderWrapper>{children}</SingletonLoaderWrapper>
-    </>
-  );
-};
-
-export const useGoogleMapsLoader = () => useContext(GoogleMapsContext);
-
-/**
- * Recarrega o Google Maps com uma nova API key
- */
-export function reloadGoogleMaps(newApiKey: string): Promise<void> {
-  return new Promise((resolve, reject) => {
-    if (typeof window === 'undefined') {
-      reject(new Error('Window is undefined'));
-      return;
-    }
-
-    // Validar API key
-    if (!newApiKey || newApiKey.length < 10) {
-      reject(new Error('Invalid or missing Google Maps API key'));
-      return;
-    }
-
-    // Verificar se a key atual é a mesma
-    const existingScript = document.querySelector(
-      `script[src*="maps.googleapis.com/maps/api/js"]`
-    ) as HTMLScriptElement;
-    if (existingScript && existingScript.src.includes(`key=${newApiKey}`)) {
-      // Mesma key, apenas resolver (ou esperar carregar)
-      resolve();
-      return;
-    }
-
-    // Se a chave for diferente, NÃO PODEMOS remover o script e adicionar outro
-    // se o Google Maps já definiu custom elements. Isso causa o erro:
-    // "Element with name 'gmp-...' already defined"
-    if (typeof customElements !== 'undefined' && customElements.get('gmp-map')) {
-      console.warn(
-        '[GoogleMapsLoader] Cannot reload map API dynamically because custom elements (gmp-map) are already registered. A full page reload is required to apply the new API key.'
-      );
-      resolve(); // Resolver para não quebrar a UI
-      return;
-    }
-
-    // Se chegou aqui e não tem custom elements, podemos tentar recarregar
-    removeExistingScript();
-
-    // Atualizar singleton
-    updateSingleton({ isLoaded: false, loadError: undefined });
-
-    // Carregar novo script
-    loadGoogleMapsScript(newApiKey)
-      .then(() => {
-        updateSingleton({ isLoaded: true, loadError: undefined });
-        resolve();
-      })
-      .catch(error => {
-        updateSingleton({ isLoaded: false, loadError: error });
-        reject(error);
-      });
-  });
-}
-
-// Alias for backwards compatibility
-export const GoogleMapsProvider = GoogleMapsLoaderProvider;
+'use client';
+
+import React, { createContext, useContext, ReactNode, useState, useEffect, useRef } from 'react';
+import { GOOGLE_MAPS_LIBRARIES, GOOGLE_MAPS_ID } from '../map-config';
+
+interface GoogleMapsContextType {
+  isLoaded: boolean;
+  loadError: Error | undefined;
+  load: (apiKey: string) => Promise<void>;
+}
+
+const GoogleMapsContext = createContext<GoogleMapsContextType>({
+  isLoaded: false,
+  loadError: undefined,
+  load: () => Promise.resolve(),
+});
+
+// Singleton global para prevenir múltiplos carregamentos
+declare global {
+  interface Window {
+    __XERTICA_GOOGLE_MAPS_LOADER__?: {
+      isLoaded: boolean;
+      loadError: Error | undefined;
+      listeners: Set<(state: GoogleMapsContextType) => void>;
+      scriptElement?: HTMLScriptElement;
+    };
+  }
+}
+
+/**
+ * Helper that synchronously reads the Google Maps API key from the environment or localStorage
+ */
+function getInitialApiKey(): string | undefined {
+  // 1. Check Environment Variable (Vite)
+  if (
+    typeof import.meta !== 'undefined' &&
+    import.meta.env &&
+    import.meta.env.VITE_GOOGLE_MAPS_API_KEY
+  ) {
+    return import.meta.env.VITE_GOOGLE_MAPS_API_KEY as string;
+  }
+
+  if (typeof window === 'undefined') return undefined;
+
+  const savedKey = window.localStorage?.getItem('xertica-googlemaps-api-key');
+
+  if (savedKey && savedKey.trim().length > 0) {
+    return savedKey;
+  }
+
+  return undefined;
+}
+
+/**
+ * Removes the existing Google Maps script tag and clears the global Maps object
+ */
+function removeExistingScript(): void {
+  if (typeof window === 'undefined') return;
+
+  // Remover callback global se existir
+  if ((window as any).__googleMapsCallback) {
+    delete (window as any).__googleMapsCallback;
+  }
+
+  // Remover script existente
+  const existingScript = document.querySelector(`script[src*="maps.googleapis.com/maps/api/js"]`);
+  if (existingScript) {
+    existingScript.remove();
+  }
+
+  // Limpar Google Maps do window
+  if ((window as any).google?.maps) {
+    delete (window as any).google.maps;
+  }
+
+  // Limpar singleton para permitir novo carregamento
+  if (window.__XERTICA_GOOGLE_MAPS_LOADER__) {
+    window.__XERTICA_GOOGLE_MAPS_LOADER__.isLoaded = false;
+    window.__XERTICA_GOOGLE_MAPS_LOADER__.loadError = undefined;
+    window.__XERTICA_GOOGLE_MAPS_LOADER__.scriptElement = undefined;
+  }
+}
+
+/**
+ * Returns true if the Google Maps JS API has already been loaded
+ */
+function isGoogleMapsAlreadyLoaded(): boolean {
+  if (typeof window === 'undefined') return false;
+  return window.google?.maps?.version !== undefined;
+}
+
+/**
+ * Returns true if the AdvancedMarkerElement marker library is available
+ */
+function isMarkerLibraryLoaded(): boolean {
+  if (typeof window === 'undefined') return false;
+  return window.google?.maps?.marker?.AdvancedMarkerElement !== undefined;
+}
+
+/**
+ * Dynamically injects the Google Maps JS script tag and resolves when all libraries are loaded
+ */
+function loadGoogleMapsScript(apiKey?: string): Promise<void> {
+  return new Promise((resolve, reject) => {
+    if (typeof window === 'undefined') {
+      reject(new Error('Window is undefined'));
+      return;
+    }
+
+    // Validar API key antes de carregar
+    if (!apiKey || apiKey.length < 10) {
+      reject(
+        new Error(
+          'Invalid or missing Google Maps API key. Please configure your API key in Settings.'
+        )
+      );
+      return;
+    }
+
+    // Se já está carregado com a mesma key, resolver imediatamente
+    if (isGoogleMapsAlreadyLoaded() && isMarkerLibraryLoaded()) {
+      // Verificar se a API key atual é a mesma
+      const existingScript = document.querySelector(
+        `script[src*="maps.googleapis.com/maps/api/js"]`
+      ) as HTMLScriptElement;
+      if (existingScript && existingScript.src.includes(`key=${apiKey}`)) {
+        resolve();
+        return;
+      }
+    }
+
+    // Verificar se o script já existe
+    const existing = document.querySelector(
+      `script[src*="maps.googleapis.com/maps/api/js"]`
+    ) as HTMLScriptElement;
+    if (existing) {
+      // Se existe mas com chave diferente, logar aviso. Não podemos recarregar com SPA se componentes já foram definidos.
+      if (!existing.src.includes(`key=${apiKey}`)) {
+        console.warn(
+          '[GoogleMapsLoader] API key changed, but Google Maps cannot be reloaded without a full page refresh because custom elements are already defined.'
+        );
+        // Don't reject, just resolve to keep the app working with the old key until refresh
+        resolve();
+        return;
+      }
+
+      // Aguardar o script carregar
+      if (isGoogleMapsAlreadyLoaded() && isMarkerLibraryLoaded()) {
+        resolve();
+      } else {
+        existing.addEventListener('load', () => {
+          setTimeout(() => {
+            if (isMarkerLibraryLoaded()) {
+              resolve();
+            } else {
+              reject(new Error('Marker library failed to load'));
+            }
+          }, 100);
+        });
+        existing.addEventListener('error', () => reject(new Error('Failed to load Google Maps')));
+      }
+      return;
+    }
+
+    // Prevenir reinjeção se customElements já tem gmp-map (garantia final)
+    if (typeof customElements !== 'undefined' && customElements.get('gmp-map')) {
+      console.warn(
+        '[GoogleMapsLoader] gmp-map is already defined in customElements. Skipping script injection.'
+      );
+      resolve();
+      return;
+    }
+
+    // Criar novo script
+    const script = document.createElement('script');
+    const params = new URLSearchParams({
+      key: apiKey, // SEMPRE incluir a API key
+      callback: '__googleMapsCallback',
+      libraries: GOOGLE_MAPS_LIBRARIES.join(','),
+      v: 'quarterly', // Usar 'quarterly' para versão estável ao invés de 'weekly'
+      loading: 'async',
+    });
+
+    script.src = `https://maps.googleapis.com/maps/api/js?${params.toString()}`;
+    script.async = true;
+    script.defer = true;
+    script.id = GOOGLE_MAPS_ID;
+
+    // Callback global
+    (window as any).__googleMapsCallback = () => {
+      delete (window as any).__googleMapsCallback;
+      // Aguardar um pouco para garantir que todas as bibliotecas foram carregadas
+      setTimeout(() => {
+        if (isMarkerLibraryLoaded()) {
+          resolve();
+        } else {
+          reject(new Error('Marker library failed to load'));
+        }
+      }, 100);
+    };
+
+    script.addEventListener('error', () => {
+      delete (window as any).__googleMapsCallback;
+      reject(
+        new Error(
+          'Failed to load Google Maps script. Please check your API key and ensure Maps JavaScript API is enabled.'
+        )
+      );
+    });
+
+    document.head.appendChild(script);
+
+    // Salvar referência ao script
+    const singleton = getOrCreateSingleton();
+    if (singleton) {
+      singleton.scriptElement = script;
+    }
+  });
+}
+
+/**
+ * Inicializa o singleton global
+ */
+function getOrCreateSingleton() {
+  if (typeof window === 'undefined') return null;
+
+  if (!window.__XERTICA_GOOGLE_MAPS_LOADER__) {
+    const isPreloaded = isGoogleMapsAlreadyLoaded();
+
+    window.__XERTICA_GOOGLE_MAPS_LOADER__ = {
+      isLoaded: isPreloaded,
+      loadError: undefined,
+      listeners: new Set(),
+      scriptElement: undefined,
+    };
+  }
+
+  return window.__XERTICA_GOOGLE_MAPS_LOADER__;
+}
+
+/**
+ * Atualiza o estado do singleton e notifica listeners
+ */
+function updateSingleton(state: Partial<GoogleMapsContextType>) {
+  const singleton = getOrCreateSingleton();
+  if (!singleton) return;
+
+  if (state.isLoaded !== undefined) singleton.isLoaded = state.isLoaded;
+  if (state.loadError !== undefined) singleton.loadError = state.loadError;
+
+  // Prepare safe state to notify
+  const newState: GoogleMapsContextType = {
+    isLoaded: singleton.isLoaded,
+    loadError: singleton.loadError,
+    load: async (apiKey: string) => {
+      // Allow manual loading call via stored function in context if needed,
+      // though typically we use the direct export or loadGoogleMapsScript
+      if (singleton.isLoaded) return;
+      try {
+        await loadGoogleMapsScript(apiKey);
+        updateSingleton({ isLoaded: true, loadError: undefined });
+      } catch (error: any) {
+        updateSingleton({ isLoaded: false, loadError: error });
+        throw error;
+      }
+    },
+  };
+
+  singleton.listeners.forEach(listener => listener(newState));
+}
+
+/**
+ * Internal component that subscribes to the singleton loader state
+ */
+const SingletonLoaderWrapper = ({ children }: { children: ReactNode }) => {
+  const [state, setState] = useState<GoogleMapsContextType>(() => {
+    const singleton = getOrCreateSingleton();
+
+    // Default load function that triggers the script load
+    const loadFn = async (apiKey: string) => {
+      if (singleton?.isLoaded) return;
+      try {
+        await loadGoogleMapsScript(apiKey);
+        updateSingleton({ isLoaded: true, loadError: undefined });
+      } catch (error: any) {
+        updateSingleton({ isLoaded: false, loadError: error });
+        throw error;
+      }
+    };
+
+    if (!singleton) return { isLoaded: false, loadError: undefined, load: loadFn };
+
+    return {
+      isLoaded: singleton.isLoaded,
+      loadError: singleton.loadError,
+      load: loadFn,
+    };
+  });
+
+  useEffect(() => {
+    const singleton = getOrCreateSingleton();
+    if (!singleton) return;
+
+    const listener = (newState: GoogleMapsContextType) => {
+      setState(newState);
+    };
+
+    singleton.listeners.add(listener);
+
+    // Sincronizar estado inicial e função de load
+    listener({
+      isLoaded: singleton.isLoaded,
+      loadError: singleton.loadError,
+      load: state.load,
+    });
+
+    return () => {
+      singleton.listeners.delete(listener);
+    };
+  }, []);
+
+  return <GoogleMapsContext.Provider value={state}>{children}</GoogleMapsContext.Provider>;
+};
+
+/**
+ * Internal component that manually triggers the Google Maps script load
+ */
+const LoaderInitializer = ({ apiKey }: { apiKey?: string }) => {
+  const hasInitializedRef = useRef(false);
+
+  useEffect(() => {
+    // Prevenir múltiplas execuções
+    if (hasInitializedRef.current) {
+      return;
+    }
+
+    const singleton = getOrCreateSingleton();
+    if (!singleton) return;
+
+    // Se já está carregado, atualizar estado
+    if (isGoogleMapsAlreadyLoaded() && isMarkerLibraryLoaded()) {
+      updateSingleton({ isLoaded: true, loadError: undefined });
+      hasInitializedRef.current = true;
+      return;
+    }
+
+    hasInitializedRef.current = true;
+
+    // Use prop key OR get from storage
+    const keyToUse = apiKey || getInitialApiKey();
+
+    // Se não houver API key, apenas marcar como não carregado (sem erro)
+    if (!keyToUse) {
+      updateSingleton({
+        isLoaded: false,
+        loadError: undefined, // Não definir erro quando não há API key
+      });
+      return;
+    }
+
+    loadGoogleMapsScript(keyToUse)
+      .then(() => {
+        updateSingleton({ isLoaded: true, loadError: undefined });
+      })
+      .catch(error => {
+        updateSingleton({ isLoaded: false, loadError: error });
+      });
+  }, [apiKey]);
+
+  return null;
+};
+
+interface GoogleMapsLoaderProviderProps {
+  children: ReactNode;
+  apiKey?: string;
+}
+
+/**
+ * GoogleMapsLoaderProvider
+ *
+ * Provider global que gerencia o carregamento da API do Google Maps.
+ * Usa carregamento manual do script para evitar conflitos com custom elements.
+ */
+export const GoogleMapsLoaderProvider = ({ children, apiKey }: GoogleMapsLoaderProviderProps) => {
+  const [shouldInitialize] = useState(() => {
+    const singleton = getOrCreateSingleton();
+    if (!singleton) return false;
+
+    // Se já está carregado, não inicializar
+    if (singleton.isLoaded || isGoogleMapsAlreadyLoaded() || isMarkerLibraryLoaded()) {
+      singleton.isLoaded = true;
+      return false;
+    }
+
+    return true;
+  });
+
+  return (
+    <>
+      {shouldInitialize && <LoaderInitializer apiKey={apiKey} />}
+      <SingletonLoaderWrapper>{children}</SingletonLoaderWrapper>
+    </>
+  );
+};
+
+export const useGoogleMapsLoader = () => useContext(GoogleMapsContext);
+
+/**
+ * Recarrega o Google Maps com uma nova API key
+ */
+export function reloadGoogleMaps(newApiKey: string): Promise<void> {
+  return new Promise((resolve, reject) => {
+    if (typeof window === 'undefined') {
+      reject(new Error('Window is undefined'));
+      return;
+    }
+
+    // Validar API key
+    if (!newApiKey || newApiKey.length < 10) {
+      reject(new Error('Invalid or missing Google Maps API key'));
+      return;
+    }
+
+    // Verificar se a key atual é a mesma
+    const existingScript = document.querySelector(
+      `script[src*="maps.googleapis.com/maps/api/js"]`
+    ) as HTMLScriptElement;
+    if (existingScript && existingScript.src.includes(`key=${newApiKey}`)) {
+      // Mesma key, apenas resolver (ou esperar carregar)
+      resolve();
+      return;
+    }
+
+    // Se a chave for diferente, NÃO PODEMOS remover o script e adicionar outro
+    // se o Google Maps já definiu custom elements. Isso causa o erro:
+    // "Element with name 'gmp-...' already defined"
+    if (typeof customElements !== 'undefined' && customElements.get('gmp-map')) {
+      console.warn(
+        '[GoogleMapsLoader] Cannot reload map API dynamically because custom elements (gmp-map) are already registered. A full page reload is required to apply the new API key.'
+      );
+      resolve(); // Resolver para não quebrar a UI
+      return;
+    }
+
+    // Se chegou aqui e não tem custom elements, podemos tentar recarregar
+    removeExistingScript();
+
+    // Atualizar singleton
+    updateSingleton({ isLoaded: false, loadError: undefined });
+
+    // Carregar novo script
+    loadGoogleMapsScript(newApiKey)
+      .then(() => {
+        updateSingleton({ isLoaded: true, loadError: undefined });
+        resolve();
+      })
+      .catch(error => {
+        updateSingleton({ isLoaded: false, loadError: error });
+        reject(error);
+      });
+  });
+}
+
+// Alias for backwards compatibility
+export const GoogleMapsProvider = GoogleMapsLoaderProvider;