InputGoogleLoadScript
El componente InputGoogleLoadScript se encarga de cargar el script de Google Maps y proporciona validación de la clave API de Google.
Ejemplo
Importación
Para importar el componente InputGoogleLoadScript, se puede hacer desde fenextjs
import { InputGoogleLoadScript } from "fenextjs";Parámetros
| Parámetro | Tipo | Requerido | Default | Descripcion |
|---|---|---|---|---|
| googleMapsApiKey | string | no | process.env['NEXT_PUBLIC_GOOGLE_KEY'] | Clave API de Google Maps. Si no se proporciona, se usará la clave API predeterminada en las variables de entorno. |
| children | ReactNode | no | undefined | Los elementos hijos que se renderizarán dentro del componente una vez que el script de Google Maps haya sido cargado correctamente. |
| className | string | no | '' | Clase CSS para personalizar el contenedor del componente. |
| _t | unknown | no | undefined | Propiedades de traducción para mensajes de error u otros textos. |
| useT | unknown | no | undefined | Hook de traducción para manejar cadenas traducibles dentro del componente. |
Storybook
Para ver el storybook del componente lo puede hacer con este link (opens in a new tab)
Usos
- InputGoogleLoadScript básico
<InputGoogleLoadScript googleMapsApiKey="YOUR_GOOGLE_MAPS_API_KEY">
<YourGoogleMapsComponent />
</InputGoogleLoadScript>- InputGoogleLoadScript con validación
<InputGoogleLoadScript>
<YourGoogleMapsComponent />
</InputGoogleLoadScript>- InputGoogleLoadScript con manejo de errores
<InputGoogleLoadScript googleMapsApiKey="INVALID_KEY">
<YourGoogleMapsComponent />
</InputGoogleLoadScript>