Bringing Google Maps to Friendly Meals with Firebase AI Logic: Web Architecture & Implementation Guide

Original: https://codingcat.dev/post/firebase-2026-07-bringing-google-maps-friendly-meals

Bringing Google Maps to Friendly Meals with Firebase AI Logicmarks an important milestone for full-stack web and AI engineers building on Firebase and Google Cloud. Following the official announcement by Marina Coelho on theFirebase Blog(2026-07-28), this hands-on CodingCat.dev implementation guide breaks down how to adopt these capabilities in modern TypeScript, Next.js, SvelteKit, React, and Angular applications. A couple of months ago, I shared how I used Firebase AI Logic to build a hands-free, real-time cooking assistant for the Friendly Meals Android app. It was great for answering my cooking questions while I had my hands covered in flour, and for adding ingredients to my shopping list in a conversational style. But then s

Why Bringing Google Maps to Friendly Meals with Firebase AI Logic Matters for Full-Stack Web Developers

When evaluating every new Firebase release for our production web apps and Google Developer Expert (GDE) architecture reviews, the first question is always how it improves developer velocity, runtime security, and end-user latency in the browser and on the server.A couple of months ago, I shared how I used Firebase AI Logic to build a hands-free, real-time cooking assistant for the Friendly Meals Android app. It was great for answering my cooking questions while I had my hands covered in flour, and for adding ingredients to my shopping list in a conversational style. But then something happened the other night as I was cooking dinner: I didn’t have most of the ingredients I needed for a recipe, and my shopping list was huge.

So I wondered: what if I could tap a button to find nearby stores with these ingredients? Checking closing times, distance, and parking inside the app is far more convenient than filtering through Google Maps manually. Read through to learn how I added spatial intelligence to Friendly Meals using*Grounding with Google Maps via Firebase AI Logic.*

The power of location-aware AI

Firebase AI Logicprovides secure, client-side SDKs that let mobile and web apps talk directly to Google’s generative models without setting up complicated server-side architecture. With the addition of*grounding with Google Maps*, you can now link Gemini’s intelligence directly to Google’s massive database of over 250 million real-world places.

By grounding Gemini’s responses with Google Maps data, the cooking assistant achieves two things:

• Real-time data access:Recommendations for stores, markets, or restaurants are anchored to actual, existing businesses. The model knows current operational statuses, business hours, and location specifics (like address and parking information).
• Geographic personalization:By biasing the request with the user’s current latitude and longitude, the assistant’s advice becomes highly localized, which is great when you want to display the results ordered by how near a store is to the user.

How Friendly Meals implements Maps grounding

Let’s dive into the code for the Friendly Meals Android app, written in Kotlin, and look at the key changes required to create the Store Finder feature.

Just like other features in this app, I want to keep the Store Finder feature flexible without forcing users to update the app when I want to try a new AI model, or a new prompt. I can achieve that by storing these pieces of information in aprompt template, in the Firebase console:

By using prompt templates, I’m storing my prompt, input schema, model configurations and tools server-side. This way, I’m not only able to update my prompt and configuration without releasing a new app version, but I’m also protecting my intellectual property by not exposing it client-side.

To use the prompt template in my Android app, I only need to reference the template ID when making the API call, and pass in the parameters defined in the template configuration. The Firebase AI Logic API takes care of executing the call to the chosen Gemini model and returning the response to my app. This is done in thefindStoresfunction:

suspend
  ingredients: 
  latitude: 
  longitude: 
  currentTime: 
  dayOfWeek: 
): 
  // Initialize the AI model with the Google Maps tool
  val
    tools 
    toolConfig 
      retrievalConfig 
        latLng 
        languageCode 
      }
    )
  )

  return
    // Call the generative model and get the response text
    val
      templateId 
      inputs 
        INGREDIENTS_FIELD to ingredients.
        DAY_FIELD to dayOfWeek,
        TIME_FIELD to currentTime
      )
    )

    val

    // Make sure the JSON is clean by replacing potential JSON headers
    val
      .
      .
      .

    // Convert JSON object to an object of the type StoreFinderResult
    json.
  } 
    Log.
    emptyList
  }
}

companion
  //Remote Config Keys
  private

  //Template input fields
  private
  private
  private
}

To give Gemini access to real-time maps data, I provideTemplateTool.googleMaps()to the model initialization blocks. That involves retrieving the user’s latitude and longitude, which enables the app to return a highly localized list of stores. I’ll dive into how you can extract latitude and longitude data on Android apps in the next section of this blog.

Once the model is initialized, I call thegenerateContentfunction passing in the template ID and the input parameters: the list of ingredients in the shopping list, retrieved fromFirestore, and the current day and time, retrieved using theLocalDateTimeJava library.

When I get a response from Gemini, I extract the text from this response (which should be in JSON format), and make sure the JSON is clean by replacing potential JSON headers. I then convert this “clean” JSON to an object that my codebase can understand:StoreFinderResult. This is the object that I use to populate theCompose UIthat you saw at the beginning of this blog, which is built with abottom sheetcomponent.

Tobuild location-aware Android appsthat can extract latitude and longitude data, first I need toadd the playServicesLocation dependency, then add some permissions to theAndroidManifest.xmlfile:

Then, when the user taps on the Store Finder button, I call theRequestMultiplePermissionsfunction, which handles the flow of requesting the user to grant permissions if they haven’t done so yet. Once the permission is granted, I extract the current location with thegetCurrentLocationfunction:

// This is the primary entry point in Google Play services for accessing device location on Android
val
  LocationServices.
}

// Launcher to request multiple runtime permissions and handle the result
val
  contract 
) { permissions 
  // Check permission results and default to false if not present
  val
  val

  // Fetch location if at least one permission level is granted
  if
    coroutineScope.
      val
      val

      // Asynchronously request the most recent current location
      val
        .
        .

      if
        // Triggers the call to the AI model to find stores
        onSuccess
      } 
        // Triggers UI message if location services are disabled
        showError
      }
    }
  }
}

// Triggers the system permission dialog for both fine and coarse location
permissionLauncher.
  arrayOf
)

And that’s all you need to do to perform a successful call to Gemini, grounding its response in real-time data from Google Maps!

Going to production

As always, make sure you are protecting your apps with*Firebase App Check*before deploying them to production. App Check attests that incoming traffic originates from your untampered Android app on a legitimate device. It helps protect your backend from abuse, such as billing fraud, phishing, app impersonation, and data poisoning. Check out theApp Check documentationto learn more about it.

Bring grounding with Maps to your apps

By pairing client-side code via Firebase AI Logic with the data depth of Google Maps, you evolve your AI features to interactive spatial flows that can guide users in the physical world.

Head over to theFriendly Meals GitHub repositoryto review the codebase in full. If you want to check specifically the changes introduced for this feature,check out this pull request.

Production Web Architecture & Security Checklist

Whether you are deploying onFirebase App Hosting, Cloudflare Workers, or Vercel, shipping AI features to production requires defense-in-depth across three layers:

• Enforce Firebase App Check & Attestation:Protect your web endpoints, Cloud Functions, Data Connect GraphQL resolvers, and Firebase AI Logic calls against unauthorized replay or billing abuse usingFirebase App Check with reCAPTCHA Enterprise.
• Validate Locally with the Firebase Emulator Suite:Run deterministic integration tests against local Firestore, Auth, Functions, and Data Connect PostgreSQL emulators before promoting schema or rule changes to production.
• Keep Server & Client Boundaries Type-Safe:Use the modular Firebase Web SDK and generated TypeScript bindings so SSR frameworks like Next.js, SvelteKit, and Angular serialize state cleanly without hydration flickers.

Watch Our Related Firebase Video Tutorial on YouTube

Want to see how we architect and debug Firebase web applications live? Watch our related CodingCat.dev sessionFirebase SQL with Data Connectbelow, and make sure toSubscribe to CodingCat.dev on YouTubefor weekly full-stack web and AI deep dives:

Resources, Official Docs & Related CodingCat.dev Guides

• Primary Release Source:Bringing Google Maps to Friendly Meals with Firebase AI Logic on the Official Firebase Blog(published 2026-07-28 by Marina Coelho)
• Official Firebase Documentation:Firebase Developer Docs & Web SDK Reference
• Related on CodingCat.dev:Zero-flicker Firestore SSR with React
• Related on CodingCat.dev:Triple-layer security for Firebase web apps
• Related on CodingCat.dev:Firebase SQL with Data Connect
• Related on CodingCat.dev:Build a Custom No-Code App in 90 Minutes

Frequently Asked Questions (FAQ)

What are the key capabilities introduced in Bringing Google Maps to Friendly Meals with Firebase AI Logic?

Bringing Google Maps to Friendly Meals with Firebase AI Logic (announced 2026-07-28) enhances the Firebase platform for Firebase, Google Cloud, Web Dev, AI, TypeScript, Security workloads. A couple of months ago, I shared how I used Firebase AI Logic to build a hands-free, real-time cooking assistant for the Friendly Meals Android app. It was great for answering my cooking questions while I had my hands covered in flour, and for adding ingredients to my shopping list in a conversational style. But then something happened the other night as I was cooking dinner: I didn’t have most of the ingredients I needed for a recipe, and my shopping list was huge. Developers can review the official release notes on theFirebase Blogalongside the implementation patterns in this guide.

How do web developers use Bringing Google Maps to Friendly Meals with Firebase AI Logic with Next.js, SvelteKit, React, or Angular?

Web developers can integrate these features using the modular Firebase JavaScript/TypeScript SDK, Firebase Data Connect web bindings, andFirebase App Hosting. Always pair client-side SDK initialization with Firebase App Check and strict Security Rules, and test locally with the Firebase Local Emulator Suite before deploying.

Where can I watch video tutorials on Firebase Web and AI development?

You can watch our hands-on Firebase video walkthroughs on theCodingCat.dev YouTube Channel, includingFirebase SQL with Data Connect, and browse our complete Firebase tutorial archive on CodingCat.dev.