Compila con Google Maps Platform y la IA

1. Introducción

Descripción general

¿Dónde comienza la creación con IA hoy en día? Todo comienza con una chispa: una idea que vale la pena prototipar. El modo de compilación de Google AI Studio convierte esa chispa en realidad a través del "vibe coding". Aprovechando los modelos de Gemini, puedes diseñar, probar y, luego, implementar aplicaciones web de pila completa por completo a través de la generación de código conversacional.

En este codelab, compilarás Block Explorer, un juego geoespacial interactivo que combina datos de mapas del mundo real con IA generativa. Usarás AI Studio para generar la aplicación y, luego, integrarla en Google Maps Platform y la API de Gemini. Luego, aprenderás a implementar la aplicación terminada directamente en Cloud Run para que otras personas puedan probarla.

Actividades

• Usa Google AI Studio para crear un prototipo de una aplicación web interactiva de trivia y mapas geoespaciales.
• Habilita y aprovisiona automáticamente una clave de demostración de Google Maps Platform directamente en el espacio de trabajo de AI Studio.
• Implementa la geocodificación de direcciones dinámicas, el descubrimiento de lugares y los cuestionarios de trivia generados por IA con instrucciones en lenguaje natural.
• Se mejoró la precisión del cuestionario de trivia con la integración de Maps Grounding Lite.
• Prueba la aplicación y realiza iteraciones en ella en la zona de pruebas de la vista previa interactiva.
• Implementa la aplicación en Cloud Run directamente desde la IU de Google AI Studio.

Qué aprenderás

• Cómo usar el modo de compilación de Google AI Studio para crear rápidamente un prototipo de servicio de pila completa con lenguaje natural
• Cómo usar las APIs de Google Maps Platform para crear aplicaciones con datos geoespaciales
• Cómo fundamentar las instrucciones de LLM con contexto geoespacial del mundo real para generar cuestionarios dinámicos y estadísticas locales
• Cómo implementar tu aplicación de AI Studio como un contenedor sin servidores en Cloud Run

Aquí tienes una vista previa de la página:

2. Configura tu proyecto

Antes de lanzar AI Studio, verifica el estado de tu cuenta, los requisitos previos y el acceso a la API.

Información de la Cuenta de Google y el nivel

1. Si aún no tienes una Cuenta de Google, créala.
   • Nota: Si es posible, usa una Cuenta de Google personal para este lab. Las cuentas de grupo, corporativas o educativas pueden aplicar políticas que inhabiliten las funciones experimentales o las integraciones en la nube.
2. Revisa los detalles de facturación de las implementaciones:
   • Nivel inicial de Google Cloud: Permite publicar hasta dos aplicaciones de pila completa en una región seleccionada sin costo, sin establecer una cuenta de facturación de Google Cloud completa.
   • Implementación estándar: Se conecta a un proyecto pagado existente de Google Cloud y expande los límites de almacenamiento, los recursos de CPU y las APIs.

Clave de demostración de Google Maps Platform

Para optimizar la creación de prototipos, Google AI Studio se integra de forma nativa con Google Maps Platform. Esto proporciona una forma sencilla de probar y compilar con las APIs principales de Google Maps Platform (como la API de Maps JavaScript, la API de Geocoding, la API de Places y la API de Routes) directamente en tu proyecto. AI Studio generará automáticamente una clave de demostración de Google Maps Platform para ti.

Estos son los beneficios clave de la clave de demostración:

• No se requiere tarjeta de crédito ni configuración de facturación: Puedes crear prototipos y realizar evaluaciones de inmediato sin configurar una cuenta de facturación de Google Cloud.
• Cuota de creación de prototipos generosa: Incluye hasta 100 solicitudes gratuitas por día por API para pruebas y procesos iterativos.
• Integración integrada sin interrupciones: No es necesario que navegues a portales externos ni que copies y pegues credenciales. Google AI Studio detecta automáticamente cuándo tu aplicación necesita integrarse con Google Maps Platform y configura todo por ti.

3. Crea el shell de la aplicación en el modo de compilación de AI Studio

Comenzarás por crear el shell de la aplicación con Google AI Studio.

1. Navega al panel de apps de Google AI Studio y haz clic en Nueva app (o selecciona la pestaña Compilar).
2. En el cuadro de entrada de instrucciones, ingresa la descripción inicial de tu aplicación geoespacial. También puedes hacer clic en el chip de descubrimiento de Google Maps Platform que aparece debajo de las sugerencias de instrucciones:

Build a highly polished, responsive, split-screen application. This application should be called "Block Explorer". It is meant to be a geospatial exploration app. It will use Google Maps Platform.

Key Features & Functionality:

-   Split-Screen Layout: On desktop, a 1/3-width left-side editorial control panel and a 2/3-width right-side full-height map.
-   Include a search bar where users can type a location such as a city or neighborhood. Submitting should issue a Geocoding request to the Google Geocoding V4 API REST endpoint (https://geocode.googleapis.com/v4/geocode/address/). Then pan the map to the geocoded location.
-   Interactive Google Map: Render the Map inside an interactive container allowing users to pan, drag, and zoom freely. Place customized markers representing the currently selected/geocoded location.
-   Also include five buttons for presets the users can click on: Buenos Aires, Shibuya, Copacabana, Cologne, and Lima. Clicking on this should geocode the location and pan the map there.
-   Make sure to also include a mechanism to clearly show error messages when they occur so users can easily troubleshoot.

3. Haz clic en Compilar para iniciar el proceso de generación de la aplicación.

AI Studio comenzará a generar el código de la aplicación. Si se te solicita que elijas un tema de diseño, selecciona el estilo que prefieras.

Habilita Google Maps Platform y aprovisiona la clave de demostración

Google Maps Platform proporciona la API de Geocoding, que convierte las búsquedas de direcciones legibles por humanos (como "Shibuya" o "Buenos Aires") en coordenadas geográficas (latitud y longitud) para centrar los mapas y mostrar marcadores.

Cuando envías una instrucción con intención geoespacial (por ejemplo, cuando solicitas Google Maps, un buscador de tiendas o la exploración local), AI Studio detecta automáticamente el requisito geoespacial y te ayuda con el aprovisionamiento de claves:

1. Cortina de activación en contexto: En el turno de conversación, aparece una tarjeta intercalada titulada "Configura Google Maps Platform".
2. Aceptar condiciones y habilitar:
   • Revisa y acepta las Condiciones del Servicio del Proyecto de demostración de Maps (y las Condiciones del Servicio Adicionales del nivel Inicial si se te solicita).
   • Haz clic en Habilitar Google Maps.
3. Aprovisionamiento automático de claves y de inserción de secretos: AI Studio aprovisiona automáticamente una clave de demostración de Google Maps Platform en la infraestructura del proyecto alojado en Google (GHP) y la inserta directamente en los secretos de tu proyecto con el nombre GOOGLE_MAPS_PLATFORM_KEY.
4. Vista previa instantánea en vivo: El entorno de pruebas de vista previa de la aplicación se actualiza de inmediato con un mapa interactivo de Google en vivo y completamente funcional.

> También puedes habilitar Google Maps Platform de forma proactiva en Configuración (ícono de ajustes) > pestaña Integraciones > Google Maps Platform, o bien proporcionar tu propia clave de API en Configuración > Secretos si ya tienes un proyecto de Google Cloud activo. Como alternativa, el agente puede pedirte una clave de API directamente en la ventana de chat.

Para probar la aplicación en el entorno de pruebas de vista previa, ingresa una ubicación nueva o selecciona uno de los botones de ubicación predeterminados.

4. Agrega estadísticas locales con la API de Gemini

A continuación, integrarás la API de Gemini para generar estadísticas enriquecidas y localizadas sobre los lugares a medida que los usuarios exploran el mapa.

1. Envía la siguiente instrucción al asistente de IA en la ventana de chat:

Now, let's bring in the AI using the Gemini API.
1.  Once geocoding successfully identifies the City and State (e.g., "Miami, Florida"), trigger a call to the Gemini API (using the gemini-3.8-flash model).
2.  Use the following prompt template for the AI:
   "You are a local tour guide for [City, State]. Give me exactly 3 short, highly engaging, and unusual or surprising fun facts about this place. Keep each fact under 2 sentences. Format the response as a clean HTML unordered list (<ul>) so I can inject it directly."
3.  Display these fun facts in a beautiful "Local Insights" banner on the bottom portion of the map screen. Add a subtle loading spinner while the AI is thinking.
4.  Make sure to make this handling robust. If an API request fails, display a user-friendly error notification in the UI.

2. Verifica en el panel de vista previa que, cuando selecciones o busques una ubicación, se muestren datos curiosos dinámicos generados por Gemini.

Deberías ver que AI Studio actualiza la aplicación, lo que genera que se agregue la sección "Local Insights" en la parte inferior de la pantalla.

5. Crea el cuestionario de trivia generado por IA

Ahora que tu aplicación recupera coordenadas de ubicación y estadísticas localizadas, combina estas capacidades para generar cuestionarios interactivos de preguntas y respuestas basados en el destino seleccionado.

1. Envía la instrucción de generación de cuestionarios al agente:

Now let's build the actual game! We will have Gemini generate a 3-question quiz based on the real places we just got information about.

After the local insights are generated, show the user a button to "Test their local knowledge". Once clicked, offer them 3 options to choose from:
-   Local cuisine
-   Art and culture
-   Local history

Once selected, generate a 3-question quiz based on the category and the place. The quiz should be multiple choice. Once the user submits the quiz show them their score and the correct answer.

2. Reproduce el cuestionario generado en la ventana de vista previa para probar la administración del estado, la selección de respuestas y la renderización de la puntuación.

6. Integra Maps Grounding Lite

De forma predeterminada, Gemini genera hechos y cuestionarios usando el conocimiento de sus datos de entrenamiento. Para mejorar la precisión y aprovechar los datos espaciales en tiempo real, integra Maps Grounding Lite. Este servicio conecta Gemini con datos en tiempo real directamente desde Google Maps Platform.

1. Envía la siguiente instrucción en AI Studio:

Add a toggle to make the quiz more difficult. Call this "Hyperlocal mode". When enabled, use the Google Maps Grounding Lite service with the Gemini API to fetch more local data, making the quiz more difficult.

Add information for the user so they know that Hyperlocal Mode is more difficult and how it works.

2. Prueba el botón de activación del modo hiperlocal en la ventana de vista previa para verificar la generación de cuestionarios fundamentados.

Los LLM pueden alucinar horarios de atención específicos, aperturas recientes o IDs de lugar exactos. Maps Grounding Lite fundamenta las respuestas con entidades y atribuciones reales de Google Maps Places, lo que mejora significativamente la precisión fáctica de las preguntas de trivia.

7. Implementa en Cloud Run

Una vez que tu prototipo sea completamente funcional, impleméntalo como un contenedor público sin servidores en Cloud Run directamente desde AI Studio.

1. En la esquina superior derecha de Google AI Studio, haz clic en el botón Publicar para iniciar el asistente de implementación.
2. Haz clic en Comenzar para configurar tu proyecto de Google Cloud.
   • Verifica que el menú desplegable del proyecto de Google Cloud de destino coincida con el proyecto de implementación previsto.
   • AI Studio generará automáticamente un identificador de servicio único para la instancia de Cloud Run.
3. Haz clic en Publicar app.
4. La compilación, el registro y la implementación del servicio del contenedor se ejecutarán en segundo plano. Este proceso suele completarse en un plazo de 2 a 4 minutos.
5. Cuando finalice la implementación, copia la URL de la app generada y visita el vínculo de la aplicación en vivo en una pestaña del navegador.

8. Revisa las prácticas recomendadas de seguridad y producción

Cuando realices la transición de esta app de un prototipo a un entorno de producción, ten en cuenta estos pilares de seguridad:

1. Restricciones de la clave de API de Google Maps

Nunca dejes sin restricciones las claves de API de Google Maps de producción. En la consola de Google Cloud, haz lo siguiente:

• Restricciones de la API: Restringe la clave para que solo pueda llamar a APIs específicas (API de Maps JavaScript, API de Geocoding y API de Places).
• Restricciones de aplicaciones: Restringe la clave con URL de referencia HTTP (p.ej., https://yourgame.com/*) para evitar el uso no autorizado en sitios de terceros.

2. Cómo proteger la clave de la API de Gemini

La clave de la API de Gemini nunca debe exponerse en JavaScript del cliente.

• Arquitectura de producción: Compila un servicio de backend ligero (p.ej., Cloud Run o Cloud Functions) para que actúe como proxy. Tu frontend llama a tu backend (/api/get-fun-facts), y el backend se comunica de forma segura con Google AI Studio a través de una variable de entorno (GEMINI_API_KEY).

9. Limpia los recursos

Para evitar cargos de facturación imprevistos o liberar espacio en los recursos de tu espacio de trabajo, haz lo siguiente:

1. En Google AI Studio, ve a la página Apps.
2. Busca tu aplicación en la cuadrícula o la lista.
3. Haz clic en el ícono de papelera para borrar el estado de la app y anular la publicación del servicio de Cloud Run.
4. Si realizaste la implementación con un proyecto estándar y quieres apagar todos los recursos por completo, ve a la configuración del proyecto de la consola de Google Cloud y borra el proyecto subyacente.

10. Conclusión

¡Felicitaciones! Diseñaste, desarrollaste e implementaste una aplicación web geoespacial potenciada por IA desde Google AI Studio. Usaste correctamente las APIs de Google Maps Platform para compilar un juego interactivo basado en datos del mundo real.

Visita este vínculo para reclamar la insignia de Completed Builder Journey.

Para continuar tu recorrido, ve a goo.gle/builders para realizar el siguiente lab.

Más información

• Documentación de Google Maps Platform
• Documentación de Cloud Run
• Crea apps en Google AI Studio