Build a Store Finder with Google Maps

Prompt AI Studio to build a map that finds shops and plans multi-stop routes.

Introduction

30 Second Summary

Finding one nearby shop is easy. Comparing several options while planning the quickest trip between them takes more effort.

In this project, you will use Google AI Studio to turn a plain-English description into a local store finder on Google Maps Platform. The finished app combines nearby shop results with a three-stop route.

What You'll Build

You'll demo a town map that fills with real shop cards before drawing a timed route through three chosen stops.

By the end of this project, you'll have:

An interactive local map you can move around in the preview to check streets near your town.
A real shop search powered by the Places API that returns place cards with photos plus opening hours.
A three-stop trip powered by the Routes API that draws the route line plus total travel time on the map.
Secret Mission: An optional challenge to push your skills further.

Are there any prerequisites?

You only need a Google account plus a web browser. Google AI Studio creates the demo key inside its sandbox, so you do not need a Cloud Console project or a credit card.

Before We Start

Your store finder will be created inside Google AI Studio. You need access to its app-building workspace before you can describe the map.

This step signs you in with your Google account. It leaves Build mode ready for your first prompt.

In this step, get ready to:

Sign in to Google AI Studio with your Google account.
Confirm Build mode is ready for a new prompt.

Sign in to Google AI Studio

Google AI Studio saves your work to your Google account. Signing in first gives the map app a workspace that you can return to later.

Your password and verification codes stay inside Google's sign-in flow. Keep both private.

Open the official Google AI Studio page in your browser.
Select the Google account you want to use if Google asks you to choose one.
Complete the account verification shown in the browser if Google asks for it.

You should see Google AI Studio load without a sign-in form.

Good, the access hurdle is cleared. This account can now hold the app you build.

Stuck on sign-in?

Reload the Google AI Studio page in the same browser.
Confirm your internet connection is active.
Retry with the Google account available for this project.

Help me troubleshoot my Google AI Studio sign-in issue.

Open Build mode

Build mode is the workspace where a plain-English description becomes an app with a live preview. A ready prompt input is the clean starting point for your map.

Before you open Build mode, picture what you expect the workspace to show before you submit a prompt.

Open the official AI Studio Build page in your browser.
Wait for the Build workspace to finish loading.

You should see Build mode with an input box for describing an app. The ready input confirms that your setup is complete.

Build mode not loading?

Reload the AI Studio Build page.
Return to the sign-in flow if Google asks you to authenticate again.

Help me get AI Studio Build mode ready.

That setup is complete: you are signed in to Google AI Studio with Build mode ready. Next, one description of a store finder centred on your town becomes an interactive map.

Generate Your Store Finder Map

Your store finder needs a clear starting location before it can help anyone search nearby. A town gives the map the geographic anchor it needs.

In this step, you'll give Google AI Studio a plain-language prompt for a store finder centred on your town. The generated app will show an interactive Google Map in the preview pane.

In this step, get ready to:

Choose the town at the centre of your map.
Generate a store finder from a plain-language prompt.
Verify that the preview contains an interactive map.

Choose your map centre

The town you name becomes the map's opening viewpoint. A specific town keeps the first preview relevant to your location.

Record the town you want to use: your chosen town.

Generate the store finder

A useful prompt names the result. It also names the opening location.

Return to the Google AI Studio browser tab from earlier.
Select the prompt field in the Build area.
Describe the app you want by entering this prompt:

Create a store finder web app with an interactive Google Map centred on [[TOWN="your chosen town"]].

What does this prompt ask for?

The phrase store finder web app gives AI Studio the app's purpose.
The phrase interactive Google Map asks for a map that responds to your controls.
The value your chosen town sets the opening location.

Submit the prompt.

AI Studio generates the app in the preview pane. You should see a map begin to load.

Preview Still Blank?

Confirm that your prompt contains a specific town.
Submit the prompt again if generation stopped before the preview loaded.

Help me diagnose a blank AI Studio preview.

Test the interactive map

The preview now gives you a visual check of both requirements. It should open on your town and respond to the map controls.

Before you test the preview, do you expect the generated app to open on your town and respond when you zoom?

Wait for the interactive map to finish loading in the preview pane.

You should see your chosen town near the centre of the map.

Use the map controls to zoom in.
Use the map controls to zoom back out to the starting level.

You should see the streets and labels change as you zoom. The map should still be centred on your chosen town after you return to the starting level.

Your first working map is ready. AI Studio has saved the generated app in your workspace.

Map Opening in the Wrong Place?

Check that the prompt contains your chosen town.
Add your country name if several places share the town name.
Submit the updated prompt.
Confirm that the refreshed preview opens on your town.

Help me correct the map's starting location.

Your store finder now opens on the right town. Next, you'll inspect the setup behind the preview.

Check Your Demo Key and Quota

Your store finder already shows an interactive map centred on your town. Now you need to know what authorizes its requests.

Google AI Studio handled that setup through a Google Maps Platform demo key. In this step, you confirm the key exists.

You also check the free sandbox limit before the app makes more API calls.

In this step, get ready to:

Open the app settings for your saved store finder.
Confirm that AI Studio issued a demo key.
Check the limit of 100 calls per API per day.

Open the app settings

The generated app keeps its access configuration in app settings. Opening that panel lets you inspect the setup attached to this specific app.

Select the app settings control in the store finder app's Build area.

You'll see a settings panel for your saved store finder app.

Can't open the app settings?

Confirm that the saved store finder app is still selected in the Build area.
Reload your browser if the settings panel stays closed.

Help me find the app settings for my saved store finder.

Confirm the demo key and quota

An API key authorizes the generated app to request Google Maps Platform services. The sandbox quota caps the number of calls available for experimentation.

The key is sensitive. You can verify it without exposing its value.

Before you inspect the details, do you expect AI Studio to have already configured access for this app?

Find the demo key section in the open app settings.
Confirm that the key field contains an issued value.
Leave the key value inside AI Studio.
Find the sandbox quota details in the same settings panel.
Confirm that the displayed limit is 100 calls per API per day.

You'll see that AI Studio has already issued the demo key. The same settings show a free sandbox limit of 100 calls per API per day.

What does this quota cover?

The 100-call limit applies separately to each API in the free sandbox. This gives your experiments a visible daily ceiling.

Key or quota missing?

Confirm that the settings panel belongs to your saved store finder app.
Return to the app's Build area if another workspace page is active.

Help me check why my store finder settings do not show the demo key or sandbox quota.

That's a useful checkpoint: your app is authorized within a known daily ceiling. Next, you'll prompt the store finder to search for real nearby shops.

Add a Nearby Store Search

Your interactive map is centred on your town. Now you will turn it into a store finder that returns real nearby shops.

You will use Google AI Studio to connect the generated app to the Places API through a plain-English prompt. A submit-only search keeps each request intentional within the sandbox allowance.

In this step, get ready to:

Prompt AI Studio to add a nearby shop search box.
Run a search for one type of shop.
Confirm that real place cards show photos and opening hours.

Prompt AI Studio for nearby search

The prompt needs to preserve the interactive map while adding a focused search experience. It also needs to delay each search until the visitor submits a complete shop type.

Return to the prompt field beside the preview.
Enter this request in the prompt field:

Add a Places search box that finds nearby shops of one type. Run the search when I submit the form. Show real place cards beside the map with photos and opening hours.

Why Search on Submit?

Searching while someone types can produce requests for incomplete words. Submitting sends one deliberate Places request after the shop type is ready.

This approach helps preserve the 100-calls-per-API-per-day sandbox allowance. Each search has a clear purpose.

Submit the request using the control beside the prompt field.

When AI Studio finishes applying the update, you will see the map beside a search box. You will also see an area ready to display place cards.

Missing Part of the Search?

Ask AI Studio to restore the existing interactive map if the update replaced it.
Ask AI Studio to trigger the Places search only when the form is submitted if it searches while you type.

Use Help me fix my generated nearby store search.

Test the Places results

A focused test proves that the search connects your chosen shop type to real nearby places. The result cards make the returned place data visible beside the map.

Choose a common shop type for the test, such as bookshops.
Enter bookshops in the search box beside the map.

Before you submit, do you expect the results to appear beside the existing map?

Submit the search using the search control.

You will see real place cards beside the interactive map. Each card includes a photo plus opening-hours information.

That is the search loop working. Your app now turns one shop type into real nearby options.

No Place Cards Appearing?

Try a broader shop type if your first search has no nearby matches.
Confirm that the map remains centred on the town you selected earlier.
Ask AI Studio to include photos and opening hours if either detail is missing from the cards.

Use Help me troubleshoot my empty Places results.

Your store finder can now surface real shops with useful details beside the map. Next, you will turn three selected shops into one planned trip.

Plan a Multi-Stop Route

Your store finder now turns a shop type into real place cards with photos. Each card also shows opening hours.

Those results give you destinations. A useful trip still needs a route through the shops you choose.

In this step, you'll ask Google AI Studio to add a route button powered by the Routes API. The app will order three chosen shops into one trip.

The finished preview will draw the route on the map. It will also display the total travel time.

In this step, get ready to:

Request a route planner for exactly three chosen shops.
Select three shops from the existing place cards.
Plan one trip that shows a route line plus total travel time.

Ask AI Studio for the route planner

Your prompt needs to preserve the working store finder. It also needs to define the complete routing result.

What the route planner needs

The existing interactive map stays visible.
The existing search box remains available.
The existing place cards remain available.
The route control accepts exactly three selected shops.
The Routes API orders the shops into one trip.
The map draws the route line.
The app displays the total travel time.

Enter a request in the prompt field in the Build area that asks AI Studio to add a route planner meeting every requirement above.
Submit the prompt.

You'll see a new route control in the preview. The interactive map should stay visible.

The search box should remain available. Your real place cards should still appear beside the map.

Good progress. Your app now has the control that turns search results into a trip.

Route control missing?

Confirm that your request asks for a route button tied to exactly three selected shops.
Send a follow-up prompt that asks AI Studio to keep the existing store finder while adding the missing route control.

Help me fix a missing route control in my AI Studio store finder.

Select three shops

A route request needs three destinations. The generated selection control gives Routes API the stops to order.

Return to the place cards in the preview.
Choose exactly three shops with the selection control in your generated app.

You'll see all three choices marked in the preview. The route button is now ready for the trip.

Can't select three shops?

Confirm that your search results contain at least three place cards.
Ask AI Studio to add a visible selection control to every place card.
Ask AI Studio to limit the selected set to exactly three shops.

Help me make three place cards selectable in my AI Studio store finder.

Plan and verify the trip

Routes API uses the selected shops to build one ordered trip. The preview turns that response into a route line.

A summary displays the total travel time.

Before you plan the trip, pause on this question: which shop will Routes API place first.

Click the new route button in the preview.

You'll see a route line connect the three chosen shops. The line follows the ordered trip across the map.

You'll also see the total travel time for the complete trip.

What this result proves

The three selected place cards reach the routing feature.
Routes API orders the three shops into one trip.
The preview renders the route as a line on the map.
The travel-time summary covers the complete route.

Route not appearing?

Confirm that exactly three shops remain selected.
Ask AI Studio to connect the route button to Routes API if the button produces no map line.
Ask AI Studio to display the complete trip duration if the route appears without total travel time.

Help me troubleshoot the missing route result in my AI Studio store finder.

Your store finder now turns three real shops into one ordered trip on the map. Next, you'll open the code view to trace each API call behind the app.

Inspect the Generated API Calls

Your store finder can already return real place cards. It can also plan a three-shop trip on the map.

Generated features can feel opaque until you connect each visible result to the source that produced it.

In this step, you'll use the code view in Google AI Studio to inspect the generated source.

The Maps API powers the interactive display. The Places API supplies nearby shop results.

The Routes API plans the multi-stop trip.

In this step, get ready to:

Switch the saved app from the preview pane to the code view.
Trace the generated source for Maps, Places and Routes.
Confirm that each API call connects to a visible app feature.

Switch to the code view

The preview pane shows the app's behaviour. The code view exposes the generated source behind it.

In the Google AI Studio Build area from earlier, switch the app from the preview pane to the code view.

You'll see the generated source for the store finder. Good, the implementation is now visible beside the feature you already tested.

Trace the Maps and Places flows

Start with two flows whose outputs are easy to recognise. The town map gives you a visual anchor for following the search flow.

Locate the source section that creates the interactive map around your chosen town.
Confirm that this section feeds the map displayed in the preview pane.
Locate the Places API request by tracing the search-box input into the nearby-shop search logic.
Trace the returned place data into the cards that show photos.
Trace the opening-hours data into the same cards.

How These Flows Divide the Work

The Maps API section creates the interactive display around your chosen town.
The Places API request retrieves nearby shop matches from the search.
The Places API response supplies card details such as photos plus opening hours.

Good progress. You can now distinguish the map display from the place-data flow in the generated source.

Trace the Routes flow

The final flow starts with the three shops selected in your app. Its response supports the route line plus the total travel time.

Locate the route-button logic by following the three selected shops into the Routes API request.
Confirm that the request treats the selected shops as one multi-stop trip.
Trace the route response into the line drawn on the map.
Trace the travel-time value into the total shown in the app.

Before your final pass, predict whether all three visible features have identifiable source paths.

Verify that the generated source contains an identifiable Maps API call for the interactive display.
Verify that the generated source contains an identifiable Places API request for nearby shops.
Verify that the generated source links returned Places data to shop photos.
Verify that the generated source links returned Places data to opening hours.
Verify that the generated source contains an identifiable Routes API request for the multi-stop trip.
Verify that the Routes response feeds the line drawn on the map.
Verify that the Routes response feeds the displayed total travel time.

You'll see the Maps, Places and Routes calls side by side in the generated code. The store finder remains open in code view.

Can't Match a Feature to a Call?

A generated feature can span several source sections. Start at its visible control in the app logic. Follow that path into the request handling.

Continue from the response handling into the rendered result.

Help me trace the Maps, Places and Routes API calls in my generated store finder code.

Frame one identifiable API call area in the code view.
Keep the AI Studio demo key outside the screenshot.

You can now connect each major app feature to its generated API call. Next, you'll restyle the map with a single prompt and inspect the result in the preview.

Restyle Your Map

Your Google Maps Platform store finder already searches real places through the Places API. It also plans a three-stop trip through the Routes API.

The map still needs your visual treatment. In this step, you will use one prompt in Google AI Studio to apply a style while preserving the features you already tested.

In this step, get ready to:

Choose one visual treatment for the map.
Apply the treatment with a single AI Studio prompt.
Confirm every store finder feature still works in the restyled preview.

Choose a visual treatment

A clear visual direction gives AI Studio one result to aim for. Your current preview provides the baseline for comparing the change.

Switch back to the preview pane from the code view.
Confirm the current preview still shows the interactive map.
Confirm the place cards still show photos plus opening hours.
Confirm the planned three-stop trip still appears on the map.
Choose one visual treatment, such as a dark theme or 3D buildings.
Record your choice here: your selected map style.

You now have an unchanged preview to compare against the result. This makes the visual difference easy to spot.

Apply the style with one prompt

Restyling changes the map's presentation. A preservation sentence tells AI Studio to keep the working store finder features in place.

Select the prompt field beside the preview.
Enter a prompt asking AI Studio to apply your selected map style to the map.
Add one sentence to the same prompt asking AI Studio to preserve every existing store finder feature.

Before you submit it, ask yourself which part of the preview should look different.

Submit the prompt.
Wait for AI Studio to finish updating the preview.

Once the update finishes, you'll see your selected style across the map. The search box remains beside the restyled map.

The place cards stay available. The route controls remain ready for another trip.

Verify the complete store finder

A complete restyle keeps the app's original job intact. A quick feature check proves the visual update preserved the full experience.

Before you test it, predict whether the visual change affected the map's search or routing behaviour.

Use the existing search box to find nearby shops.
Select three shops from the results.
Use the existing route button to plan the trip.

The map keeps your selected visual treatment. Real place cards still show photos plus opening hours beside it.

You'll also see the route line connect your three shops. The total travel time remains visible.

That is the final polish in place. Your restyled store finder remains saved in your AI Studio workspace.

Preview not matching your prompt?

Return to the preview pane if code view is still selected.
Check that your prompt names the selected visual treatment.
Check that the same prompt asks AI Studio to preserve the store finder features.
Submit a short follow-up prompt that restores any missing feature.

Help me troubleshoot my restyled store finder.

Secret mission

Audit a Quota-Safe Store Journey

Trace one store search and one three-stop route from the preview into the generated API calls. Then prove that each visible result has a matching request path in the code.

Clean Up Your Resources

Choose whether to keep your saved app available, step away for now, or stop using it. Your store finder remains in Google AI Studio's free sandbox, so there are no ongoing costs unless you link a Cloud billing account yourself.

Resources you used:

No teardownable local files, running processes, or billed cloud resources were created during this project.

Keep everything running

Leave the saved store finder app in your AI Studio workspace if you plan to keep testing searches, routes, or map styles. The free sandbox keeps this option at no ongoing cost.

Keep each test within the displayed 100 calls per API per day limit.
Return to the preview when you want to test the map, nearby shop cards, or three-stop route again.

Pause - I'll come back to this later

Step away by closing the browser tab. Your saved store finder app remains in the AI Studio workspace for later.

Close the AI Studio browser tab.
Return to the saved store finder app from your AI Studio workspace when you are ready.

Delete - I don't want to use this again

This project created no local files or billed cloud resources, so there is nothing to remove for cost control. The saved workspace app can remain unused inside the free sandbox.

Close the AI Studio browser tab to stop using the app.
Avoid linking a Cloud billing account to keep the project inside the free sandbox.

Nice Work!

You made it. Your working store finder is saved in Google AI Studio with every feature ready to demonstrate.

You've learned how to:

Use plain-English prompts to create an interactive map with Google Maps Platform. Apply a new visual style with one more prompt.
Add a Places API search that finds nearby shops. Display real place cards with photos and opening hours.
Build a three-stop route with the Routes API. Read the generated code to identify the Maps, Places, and Routes calls behind your app.
Secret Mission: Complete an optional challenge that extends your store finder with an extra map capability.

Ready to quiz yourself?