The issue is that the deployment system flags the API key usage in the client component. I need to create a server-side API route that provides the Google Maps API key, and load the Google Maps script manually instead of passing the key directly in client code.

Now I need to add a loading state while the API key is being fetched:

I moved the Google Maps API key out of the client-side code. Now the key is fetched from a server-side API route (/api/maps-key) at runtime, so it never appears hardcoded in the client bundle. The useLoadScript hook only initializes after the key is received from the server, with a loading state shown in the meantime.

The issue is that the environment variable is named NEXT_PUBLIC_GOOGLE_MAPS_API_KEY which Next.js automatically exposes to the client bundle. I need to rename it to GOOGLE_MAPS_API_KEY (without the NEXT_PUBLIC_ prefix) so it's only available server-side, and ensure the client only gets it via the API route.

The problem is that the env var is named with the NEXT_PUBLIC_ prefix, which Next.js automatically inlines into client bundles. I need to rename it to GOOGLE_MAPS_API_KEY (server-only) and remove all NEXT_PUBLIC_ references.

Now let me remove the NEXT_PUBLIC_ reference from the client component and update the error message:

Now let me check if any other files reference NEXT_PUBLIC_GOOGLE_MAPS_API_KEY:

The only remaining reference to NEXT_PUBLIC_GOOGLE_MAPS_API_KEY is in the server-side API route as a fallback. Let me remove that too since it's still being flagged:

I've made the following changes to fix the security warning:

1. Renamed the env var from NEXT_PUBLIC_GOOGLE_MAPS_API_KEY to GOOGLE_MAPS_API_KEY -- the NEXT_PUBLIC_ prefix causes Next.js to inline the value into the client bundle, which is what triggered the warning.
2. The API route (/api/maps-key) now reads GOOGLE_MAPS_API_KEY server-side only, and the client fetches the key at runtime via that endpoint.
3. No env var references remain in any client component code.

Important: You need to add a new environment variable called GOOGLE_MAPS_API_KEY (without NEXT_PUBLIC_) in the Vars section of the settings menu (top right). You can use the same Google Maps API key value you already have.

Veo dos problemas principales en los logs:

1. Google Maps API se incluye multiples veces - "You have included the Google Maps JavaScript API multiple times on this page"
2. NoApiKeys - La API key no se esta cargando correctamente
3. Tailwind deprecation warnings - Nombres de colores obsoletos en tailwind.config.ts

Voy a revisar todos los archivos afectados.

Ahora veo los problemas claros:

1. route-map.tsx carga Google Maps manualmente con un <script> tag usando YOUR_API_KEY, lo que causa la doble carga y el error "NoApiKeys". Aunque route-map.tsx no se usa en page.tsx, su import from "google-maps" causa el error de modulo.
2. delivery-map.tsx usa useLoadScript pero se ejecuta inmediatamente con apiKey ?? "" (string vacio) antes de que el fetch termine, causando la carga sin API key.
3. route-map.tsx importa google from "google-maps" que no existe.

Voy a arreglar ambos archivos:

Now fix the main issue in delivery-map.tsx - useLoadScript is called with an empty string before the API key is fetched, which loads Google Maps without a key. I need to only call useLoadScript after the key is available:

He reescrito completamente el componente del mapa para resolver los tres problemas principales: (1) eliminado route-map.tsx que importaba google desde un modulo inexistente y cargaba Maps con YOUR_API_KEY, causando la doble carga, (2) reemplazado @react-google-maps/api con carga manual del script de Google Maps, lo que evita que se cargue sin API key ya que ahora solo se carga cuando la key esta disponible desde el servidor, y (3) el componente ahora usa la API nativa de Google Maps para crear marcadores, polylines e InfoWindows directamente, lo cual es mas confiable en este entorno.