Créer avec Google Maps Platform et l'IA

1. Introduction

Présentation

Où commence le développement avec l'IA aujourd'hui ? Tout commence par une étincelle : une idée qui mérite d'être prototypée. Le mode Créer de Google AI Studio transforme cette étincelle en réalité grâce au "vibe coding". En exploitant les modèles Gemini, vous pouvez concevoir, tester et déployer des applications Web full stack entièrement grâce à la génération de code conversationnel.

Dans cet atelier de programmation, vous allez créer Block Explorer, un jeu géospatial interactif qui combine des données cartographiques réelles avec l'IA générative. Vous utiliserez AI Studio pour générer l'application et l'intégrer à Google Maps Platform et à l'API Gemini. Vous apprendrez ensuite à déployer l'application terminée directement sur Cloud Run, ce qui permettra à d'autres utilisateurs de la tester.

Objectifs de l'atelier

• Utilisez Google AI Studio pour prototyper une application Web interactive de cartographie géospatiale et de quiz.
• Activez et provisionnez automatiquement une clé de démonstration Google Maps Platform directement dans l'espace de travail AI Studio.
• Implémentez le géocodage dynamique d'adresses, la découverte de lieux et des quiz de culture générale générés par l'IA à l'aide de requêtes en langage naturel.
• Améliorez la précision des quiz de culture générale en intégrant Maps Grounding Lite.
• Testez l'application et itérez dessus dans le bac à sable de l'aperçu interactif.
• Déployez l'application sur Cloud Run directement depuis l'interface utilisateur de Google AI Studio.

Points abordés

• Découvrez comment utiliser le mode "Créer" de Google AI Studio pour prototyper rapidement un service complet à l'aide du langage naturel.
• Découvrez comment utiliser les API Google Maps Platform pour créer des applications avec des données géospatiales.
• Découvrez comment ancrer les requêtes LLM dans un contexte géospatial réel pour générer des quiz dynamiques et des insights locaux.
• Découvrez comment déployer votre application AI Studio en tant que conteneur sans serveur sur Cloud Run.

Voici un aperçu du règlement :

2. Configurer votre projet

Avant de lancer AI Studio, vérifiez l'état de votre compte, les conditions préalables et l'accès à l'API.

Compte Google et informations sur le niveau

1. Si vous ne possédez pas encore de compte Google, créez-en un.
   • Conseil : Si possible, utilisez un compte Google personnel pour cet atelier. Les comptes de groupe, d'entreprise ou d'établissement scolaire peuvent appliquer des règles qui désactivent les fonctionnalités expérimentales ou les intégrations cloud.
2. Examinez les informations de facturation pour les déploiements :
   • Niveau Google Cloud Starter : permet de publier jusqu'à deux applications full stack dans une région sélectionnée, sans frais et sans avoir à créer un compte de facturation Google Cloud complet.
   • Déploiement standard : se connecte à un projet Google Cloud payant existant et augmente les limites de stockage, les ressources de processeur et les API.

Clé de démonstration Google Maps Platform

Pour simplifier le prototypage, Google AI Studio s'intègre de manière native à Google Maps Platform. Cela vous permet de tester et de créer des applications avec les principales API Google Maps Platform (comme les API Maps JavaScript, Geocoding, Places et Routes) directement dans votre projet, sans aucune friction. AI Studio générera automatiquement une clé de démonstration Google Maps Platform pour vous.

Principaux avantages de la clé de démonstration :

• Aucune carte de crédit ni configuration de la facturation requises : vous pouvez immédiatement prototyper et évaluer sans configurer de compte de facturation Google Cloud.
• Quota de prototypage généreux : inclut jusqu'à 100 requêtes sans frais par jour et par API pour les tests et l'itération.
• Intégration fluide : vous n'avez pas besoin d'accéder à des portails externes ni de copier-coller des identifiants. Google AI Studio détecte automatiquement quand votre application doit s'intégrer à Google Maps Platform et configure les éléments nécessaires pour vous.

3. Créer l'application shell en mode Build d'AI Studio

Vous allez commencer par créer le shell de l'application à l'aide de Google AI Studio.

1. Accédez au panneau des applications Google AI Studio, puis cliquez sur Nouvelle application (ou sélectionnez l'onglet Créer).
2. Dans la zone de saisie du prompt, saisissez la description initiale de votre application géospatiale. Vous pouvez également cliquer sur le chip de découverte Google Maps Platform sous les suggestions de requêtes :

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. Cliquez sur Build (Compiler) pour lancer le processus de génération de l'application.

AI Studio commence à générer le code de l'application. Si vous êtes invité à choisir un thème, sélectionnez le style de votre choix.

Activer Google Maps Platform et provisionner une clé de démonstration

Google Maps Platform fournit l'API Geocoding, qui convertit les requêtes d'adresses lisibles (comme "Shibuya" ou "Buenos Aires") en coordonnées géographiques (latitude et longitude) pour centrer les cartes et afficher des repères.

Lorsque vous envoyez une requête avec une intention géospatiale (par exemple, en demandant Google Maps, un localisateur de magasins ou une exploration locale), AI Studio détecte automatiquement l'exigence géospatiale et vous aide à provisionner les clés :

1. Volet d'activation contextuelle : une fiche intégrée intitulée "Configurer Google Maps Platform" s'affiche dans le tour de conversation.
2. Accepter les conditions d'utilisation et activer :
   • Lisez et acceptez les Conditions d'utilisation du projet de démonstration Maps (et les Conditions d'utilisation supplémentaires du niveau Starter si vous y êtes invité).
   • Cliquez sur Activer Google Maps.
3. Provisionnement automatique de clés et injection de secrets : AI Studio provisionne automatiquement une clé de démonstration Google Maps Platform sur l'infrastructure Google Hosted Project (GHP) et l'injecte directement dans les secrets de votre projet sous le nom GOOGLE_MAPS_PLATFORM_KEY.
4. Aperçu instantané en direct : le bac à sable d'aperçu de l'application s'actualise immédiatement avec une carte Google interactive, en direct et entièrement fonctionnelle.

> Vous pouvez également activer de manière proactive Google Maps Platform en accédant à Paramètres (icône en forme de roue dentée) > onglet Intégrations > Google Maps Platform, ou fournir votre propre clé API sous Paramètres > Secrets si vous disposez déjà d'un projet Google Cloud actif. L'agent peut également vous demander une clé API directement dans la fenêtre de discussion.

Testez l'application dans le bac à sable d'aperçu en saisissant un nouvel emplacement ou en sélectionnant l'un des boutons d'emplacement prédéfinis.

4. Ajouter des insights locaux avec l'API Gemini

Vous allez ensuite intégrer l'API Gemini pour générer des insights riches et localisés sur les lieux à mesure que les utilisateurs explorent la carte.

1. Envoyez le prompt suivant à l'assistant IA dans la fenêtre 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. Dans le volet d'aperçu, vérifiez que la sélection ou la recherche d'un lieu affiche des informations amusantes dynamiques générées par Gemini.

AI Studio devrait mettre à jour l'application et ajouter la section "Insights locaux" en bas de l'écran.

5. Créer un quiz de culture générale généré par IA

Maintenant que votre application récupère les coordonnées géographiques et les insights localisés, combinez ces fonctionnalités pour générer des quiz interactifs basés sur la destination sélectionnée.

1. Envoyez le prompt de génération de quiz à l'agent :

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. Lisez le quiz généré dans la fenêtre d'aperçu pour tester la gestion de l'état, la sélection des réponses et l'affichage du score.

6. Intégrer Maps Grounding Lite

Par défaut, Gemini génère des faits et des quiz à partir des connaissances issues de ses données d'entraînement. Pour améliorer la précision et exploiter les données spatiales en temps réel, intégrez Maps Grounding Lite. Ce service connecte Gemini aux données en direct de Google Maps Platform.

1. Envoyez le prompt suivant dans 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. Testez le bouton bascule du mode hyperlocal dans la fenêtre d'aperçu pour vérifier la génération de quiz ancrés.

Les LLM peuvent halluciner des horaires d'ouverture spécifiques, des ouvertures récentes ou des ID de lieu exacts. Maps Grounding Lite ancre les réponses avec des entités et des attributions Google Maps Places réelles, ce qui améliore considérablement la précision factuelle des questions de culture générale.

7. Déployer dans Cloud Run

Une fois votre prototype entièrement fonctionnel, déployez-le en tant que conteneur public sans serveur sur Cloud Run directement depuis AI Studio.

1. En haut à droite de Google AI Studio, cliquez sur le bouton Publier pour lancer l'assistant de déploiement.
2. Cliquez sur Commencer pour configurer votre projet Google Cloud.
   • Vérifiez que le menu déroulant Projet Google Cloud cible le projet de déploiement souhaité.
   • AI Studio génère automatiquement un identifiant de service unique pour l'instance Cloud Run.
3. Cliquez sur Publier l'application.
4. La création, l'enregistrement et le déploiement du service de conteneur s'exécutent en arrière-plan. Ce processus prend généralement entre deux et quatre minutes.
5. Une fois le déploiement terminé, copiez l'URL de l'application générée et accédez au lien de l'application en direct dans un onglet de navigateur.

8. Consulter les bonnes pratiques de sécurité et de production

Lorsque vous passez cette application d'un prototype à un environnement de production, gardez à l'esprit les piliers de sécurité suivants :

1. Restrictions de clé API Google Maps

Ne laissez jamais de clés API Google Maps de production sans restriction. Dans la console Google Cloud :

• Restrictions d'API : limitez la clé pour qu'elle ne puisse appeler que des API spécifiques (API Maps JavaScript, API Geocoding, API Places).
• Restrictions liées aux applications : limitez la clé à l'aide de URL de provenance HTTP (par exemple, https://yourgame.com/*) pour éviter toute utilisation non autorisée sur des sites tiers.

2. Sécuriser la clé API Gemini

La clé API Gemini ne doit jamais être exposée dans JavaScript côté client.

• Architecture de production : créez un service de backend léger (par exemple, Cloud Run ou Cloud Functions) pour faire office de proxy. Votre frontend appelle votre backend (/api/get-fun-facts), et le backend communique de manière sécurisée avec Google AI Studio à l'aide d'une variable d'environnement (GEMINI_API_KEY).

9. Effectuer un nettoyage des ressources

Pour éviter toute facturation imprévue ou nettoyer les ressources de votre espace de travail :

1. Dans Google AI Studio, accédez à la page Applications.
2. Recherchez votre application dans la grille ou la liste.
3. Cliquez sur l'icône de la corbeille pour supprimer l'état de l'application et annuler la publication du service depuis Cloud Run.
4. Si vous avez effectué le déploiement à l'aide d'un projet standard et que vous souhaitez arrêter complètement toutes les ressources, accédez aux paramètres du projet Google Cloud Console et supprimez le projet sous-jacent.

10. Conclusion

Félicitations ! Vous avez conçu, développé et déployé une application Web géospatiale optimisée par l'IA à partir de Google AI Studio. Vous avez utilisé les API Google Maps Platform pour créer un jeu interactif basé sur des données réelles.

Cliquez ici pour obtenir le badge Parcours Builder terminé.

Pour poursuivre votre parcours, rendez-vous sur goo.gle/builders pour accéder à votre prochain atelier.

En savoir plus

• Documentation Google Maps Platform
• Documentation Cloud Run
• Créer des applications dans Google AI Studio