Mit der Google Maps Platform und KI entwickeln

1. Einführung

Übersicht

Wo fängt die Entwicklung mit KI heute an? Alles beginnt mit einer Idee, die es wert ist, als Prototyp umgesetzt zu werden. Mit dem Build-Modus von Google AI Studio können Sie Ihre Ideen durch „Vibe Coding“ in die Realität umsetzen. Mit Gemini-Modellen können Sie Full-Stack-Webanwendungen vollständig durch die konversationelle Codegenerierung entwerfen, testen und bereitstellen.

In diesem Codelab erstellen Sie Block Explorer, ein interaktives georäumliches Spiel, das Kartendaten aus der realen Welt mit generativer KI kombiniert. Sie verwenden AI Studio, um die Anwendung zu generieren und in die Google Maps Platform und die Gemini API einzubinden. Anschließend erfahren Sie, wie Sie die fertige Anwendung direkt in Cloud Run bereitstellen, damit andere sie ausprobieren können.

Aufgaben

• Mit Google AI Studio können Sie einen Prototyp einer interaktiven Webanwendung für die räumliche Kartierung und Trivia erstellen.
• Einen Google Maps Platform-Demoschlüssel direkt im AI Studio-Arbeitsbereich aktivieren und automatisch bereitstellen.
• Implementieren Sie dynamische Adressengeocodierung, die Suche nach Orten und KI-generierte Quizfragen mit Prompts in natürlicher Sprache.
• Die Genauigkeit von Quizfragen lässt sich durch die Integration von Maps Grounding Lite verbessern.
• Testen Sie die Anwendung in der interaktiven Vorschau-Sandbox und iterieren Sie sie.
• Die Anwendung direkt über die Google AI Studio-Benutzeroberfläche in Cloud Run bereitstellen

Lerninhalte

• In diesem Video erfahren Sie, wie Sie mit dem Build-Modus von Google AI Studio schnell einen Full-Stack-Dienst in natürlicher Sprache prototypisieren können.
• Wie Sie mit Google Maps Platform APIs Anwendungen mit Geodaten erstellen
• Wie Sie LLM-Prompts mit realem raumbezogenen Kontext fundieren, um dynamische Quizze und lokale Statistiken zu generieren.
• So stellen Sie Ihre AI Studio-Anwendung als serverlosen Container in Cloud Run bereit.

Hier eine Vorschau:

2. Projekt einrichten

Prüfen Sie vor dem Start von AI Studio Ihren Kontostatus, die Voraussetzungen und den API-Zugriff.

Google-Konto- und Ebeneninformationen

1. Wenn Sie noch kein Google-Konto haben, erstellen Sie ein Google-Konto.
   • Tipp: Verwenden Sie für dieses Lab nach Möglichkeit ein privates Google-Konto. Bei Gruppen-, Unternehmens- oder Konten von Bildungseinrichtungen können Richtlinien erzwungen werden, die experimentelle Funktionen oder Cloud-Integrationen deaktivieren.
2. Abrechnungsdetails für Bereitstellungen ansehen:
   • Google Cloud-Starter-Stufe: Ermöglicht die kostenlose Veröffentlichung von bis zu zwei Full-Stack-Anwendungen in einer ausgewählten Region, ohne dass ein vollständiges Google Cloud-Rechnungskonto eingerichtet werden muss.
   • Standardbereitstellung: Stellt eine Verbindung zu einem vorhandenen kostenpflichtigen Google Cloud-Projekt her und erweitert Speicherlimits, CPU-Ressourcen und APIs.

Demoschlüssel für die Google Maps Platform

Um das Prototyping zu optimieren, ist Google AI Studio nativ in die Google Maps Platform eingebunden. So können Sie die wichtigsten Google Maps Platform APIs (z. B. die Maps JavaScript API, Geocoding API, Places API und Routes API) direkt in Ihrem Projekt testen und verwenden. AI Studio generiert automatisch einen Demoschlüssel für die Google Maps Platform für Sie.

Wichtigste Vorteile des Demo-Schlüssels:

• Keine Kreditkarte oder Abrechnungseinrichtung erforderlich: Sie können sofort Prototypen erstellen und die API testen, ohne ein Google Cloud-Rechnungskonto zu konfigurieren.
• Großzügiges Kontingent für Prototypen: Bis zu 100 kostenlose Anfragen pro Tag und API für Tests und Iterationen.
• Nahtlose integrierte Integration: Sie müssen nicht zu externen Portalen wechseln oder Anmeldedaten kopieren und einfügen. Google AI Studio erkennt automatisch, wann Ihre Anwendung in die Google Maps Platform eingebunden werden muss, und konfiguriert die entsprechenden Einstellungen für Sie.

3. Application Shell im Build-Modus von AI Studio erstellen

Zuerst erstellen Sie die Anwendungsshell mit Google AI Studio.

1. Rufen Sie das Google AI Studio Apps-Panel auf und klicken Sie auf Neue App oder wählen Sie den Tab Erstellen aus.
2. Geben Sie im Eingabefeld für den Prompt die erste Beschreibung für Ihre geospatiale Anwendung ein. Sie können auch unter den Aufforderungsvorschlägen auf den Chip Google Maps Platform klicken:

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. Klicken Sie auf Erstellen, um die App-Generierung zu starten.

AI Studio beginnt mit der Generierung des Anwendungscodes. Wenn Sie aufgefordert werden, ein Design auszuwählen, wählen Sie einen beliebigen Stil aus.

Google Maps Platform aktivieren und Demoschlüssel bereitstellen

Die Google Maps Platform bietet die Geocoding API, mit der visuell lesbare Adressanfragen (z. B. „Shibuya“ oder „Buenos Aires“) in geografische Koordinaten (Breiten- und Längengrad) umgewandelt werden, um Karten zu zentrieren und Markierungen anzuzeigen.

Wenn Sie einen Prompt mit geospatiellem Bezug senden (z. B. eine Anfrage an Google Maps, eine Standortsuche oder eine lokale Erkundung), erkennt AI Studio automatisch die geospatiale Anforderung und unterstützt Sie bei der Schlüsselbereitstellung:

1. Kontextbezogener Aktivierungsvorhang: In der Unterhaltung wird eine Inline-Karte mit dem Titel Google Maps Platform einrichten angezeigt.
2. Nutzungsbedingungen akzeptieren und aktivieren:
   • Lesen und akzeptieren Sie die Nutzungsbedingungen für das Maps-Demoprojekt (und die Zusatzbedingungen für die Starter-Stufe, falls Sie dazu aufgefordert werden).
   • Klicken Sie auf Google Maps aktivieren.
3. Automatisierte Schlüsselbereitstellung und Secret-Injection: AI Studio stellt automatisch einen Google Maps Platform-Demoschlüssel in der Google Hosted Project-Infrastruktur (GHP) bereit und fügt ihn direkt in die Secrets Ihres Projekts unter dem Namen GOOGLE_MAPS_PLATFORM_KEY ein.
4. Sofortige Live-Vorschau: Die Anwendungs-Sandbox für die Vorschau wird sofort mit einer interaktiven, voll funktionsfähigen Google-Karte aktualisiert.

> Sie können die Google Maps Platform auch proaktiv über Einstellungen (Zahnradsymbol) > Tab Integrationen > Google Maps Platform aktivieren oder unter Einstellungen > Secrets einen eigenen API-Schlüssel angeben, wenn Sie bereits ein aktives Google Cloud-Projekt haben. Alternativ kann der Kundenservicemitarbeiter Sie direkt im Chatfenster nach einem API-Schlüssel fragen.

Testen Sie die Anwendung in der Vorschau-Sandbox, indem Sie einen neuen Standort eingeben oder eine der voreingestellten Standortschaltflächen auswählen.

4. Lokale Statistiken mit der Gemini API hinzufügen

Als Nächstes binden Sie die Gemini API ein, um umfassende, lokalisierte Informationen zu Orten zu generieren, während Nutzer die Karte erkunden.

1. Senden Sie den folgenden Prompt an den KI‑Assistenten im Chatfenster:

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. Prüfen Sie im Vorschaubereich, ob durch Auswahl oder Suche nach einem Ort dynamische Fakten angezeigt werden, die von Gemini generiert wurden.

AI Studio sollte die Anwendung aktualisieren und unten auf dem Bildschirm den Bereich „Lokale Statistiken“ hinzufügen.

5. KI-generiertes Quiz erstellen

Nachdem Ihre Anwendung Standortkoordinaten und lokalisierte Informationen abruft, können Sie diese Funktionen kombinieren, um interaktive Quizfragen basierend auf dem ausgewählten Ziel zu generieren.

1. Senden Sie den Prompt zur Quizgenerierung an den KI-Agenten:

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. Spielen Sie das generierte Quiz im Vorschaufenster durch, um die Statusverwaltung, die Auswahl der Antworten und die Darstellung der Punktzahl zu testen.

6. Maps Grounding Lite einbinden

Standardmäßig generiert Gemini Fakten und Quizfragen auf Grundlage von Wissen aus den Trainingsdaten. Um die Genauigkeit zu verbessern und räumliche Echtzeitdaten zu nutzen, integrieren Sie Maps Grounding Lite. Dieser Dienst verbindet Gemini mit Live-Daten direkt von der Google Maps Platform.

1. Senden Sie den folgenden Prompt in 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. Testen Sie den Schalter Hyperlokaler Modus im Vorschaufenster, um die fundierte Quizgenerierung zu überprüfen.

LLMs können sich bestimmte Öffnungszeiten, aktuelle Neueröffnungen oder genaue Orts-IDs ausdenken. Bei Maps Grounding Lite werden Antworten mit echten Google Maps-Orten und ‑Attributen untermauert. So wird die faktische Richtigkeit bei Quizfragen deutlich verbessert.

7. In Cloud Run bereitstellen

Sobald Ihr Prototyp voll funktionsfähig ist, können Sie ihn direkt aus AI Studio als öffentlichen serverlosen Container in Cloud Run bereitstellen.

1. Klicken Sie rechts oben in Google AI Studio auf die Schaltfläche Veröffentlichen, um den Bereitstellungsassistenten zu starten.
2. Klicken Sie auf Jetzt starten, um Ihr Google Cloud-Projekt zu konfigurieren.
   • Prüfen Sie, ob das Drop-down-Menü Google Cloud-Projekt mit dem Projekt übereinstimmt, in dem Sie die Bereitstellung vornehmen möchten.
   • AI Studio generiert automatisch eine eindeutige Dienst-ID für die Cloud Run-Instanz.
3. Klicken Sie auf App veröffentlichen.
4. Das Erstellen des Containers, die Registrierung und die Bereitstellung des Dienstes werden im Hintergrund ausgeführt. Dieser Vorgang dauert normalerweise 2 bis 4 Minuten.
5. Wenn die Bereitstellung abgeschlossen ist, kopieren Sie die generierte App-URL und rufen Sie den Link der Live-Anwendung in einem Browsertab auf.

8. Best Practices für Sicherheit und Produktion

Wenn Sie diese App von einer Prototyp- in eine Produktionsumgebung übertragen, sollten Sie die folgenden Sicherheitsgrundsätze berücksichtigen:

1. Einschränkungen für Google Maps API-Schlüssel

Lassen Sie Google Maps API-Schlüssel für die Produktionsumgebung niemals uneingeschränkt. In der Google Cloud Console:

• API-Einschränkungen:Schränken Sie den Schlüssel so ein, dass damit nur bestimmte APIs aufgerufen werden können (Maps JavaScript API, Geocoding API, Places API).
• Anwendungseinschränkungen:Schränken Sie den Schlüssel mit HTTP-Verweis-URLs ein (z.B. https://yourgame.com/*), um eine unbefugte Nutzung auf Websites von Drittanbietern zu verhindern.

2. Gemini API-Schlüssel sichern

Der Gemini API-Schlüssel sollte niemals in clientseitigem JavaScript offengelegt werden.

• Produktionsarchitektur:Erstellen Sie einen einfachen Backend-Dienst (z.B. Cloud Run oder Cloud Functions), der als Proxy fungiert. Ihr Frontend ruft Ihr Backend auf (/api/get-fun-facts) und das Backend kommuniziert sicher mit Google AI Studio über eine Umgebungsvariable (GEMINI_API_KEY).

9. Ressourcen bereinigen

So vermeiden Sie unvorhergesehene Abrechnungsgebühren oder bereinigen Ihre Workspace-Ressourcen:

1. Rufen Sie in Google AI Studio die Seite „Apps“ auf.
2. Suchen Sie Ihre Anwendung im Raster oder in der Liste.
3. Klicken Sie auf das Papierkorbsymbol, um den App-Status zu löschen und die Veröffentlichung des Dienstes in Cloud Run aufzuheben.
4. Wenn Sie die Bereitstellung mit einem Standardprojekt vorgenommen haben und alle Ressourcen vollständig herunterfahren möchten, rufen Sie die Google Cloud Console-Projekteinstellungen auf und löschen Sie das zugrunde liegende Projekt.

10. Fazit

Glückwunsch! Sie haben eine KI-basierte geospatiale Webanwendung mit Google AI Studio entworfen, entwickelt und bereitgestellt. Sie haben Google Maps Platform APIs erfolgreich verwendet, um ein interaktives Spiel zu entwickeln, das auf Daten aus der realen Welt basiert.

Über diesen Link kannst du das Badge Builder Journey abgeschlossen erhalten.

goo.gle/builders ist der richtige Ort für Ihr nächstes Lab.

Weitere Informationen

• Google Maps Platform-Dokumentation
• Cloud Run-Dokumentation
• Apps in Google AI Studio entwickeln