English
中文 Say Goodbye to Code: AI-Powered Interactive Maps
This article will demonstrate how to use Google's latest Gemini 2.5 Pro model to build an interactive map website showing latte prices worldwide, starting from a simple idea. You'll witness firsthand how AI not only writes the code but also handles error correction, data matching, and even verifies data accuracy—all with a single click.
If you regularly work with data, like comparing international product prices or want to make your reports more engaging and interactive, then this guide is for you.
Zero-Code Entry: Building Your World Map with Gemini 2.5 Pro
We'll start from scratch and, in just a few minutes, use Google AI Studio's Gemini 2.5 Pro to create an interactive world map showcasing Starbucks latte prices in different countries.
Step 1: Access Google AI Studio
First, navigate to your familiar Google AI Studio interface and select the "Chat" function. In the top right corner, make sure to choose the latest Gemini 2.5 Pro Preview model (0605 indicates its release on June 5th). To ensure the AI can access the latest information, enable the "Grounding with Google Search" feature below, which allows the AI to search the web for data.
Step 2: Input Your Key Prompt
Next, a crucial step: enter your detailed instructions, also known as the prompt. We'll ask Gemini to "create a single HTML file that displays an interactive world map showing the prices of Starbucks grande lattes in various countries. Use color depth to distinguish latte prices, and when the mouse hovers over a country, display the country name and amount. All content should be in Traditional Chinese." (The exact prompt will be provided later).
HTML acts as the skeleton of a webpage, determining its content. We don't need to understand HTML; we just need Gemini to generate it for us.
Step 3: Run and Observe AI's Thought Process
Now, click "Run" to set Gemini to work. You'll see Gemini "thinking," displaying its thought process, such as "determining latte data" and "defining price parameters." This allows us to see how the AI breaks down the problem step by step.
Quickly, Gemini generates the complete HTML code, including CSS styles and JavaScript. Don't worry if you don't understand it—I don't either! It even adds Chinese comments to the code, explaining the function of each section. Finally, Gemini AI includes usage instructions, a design overview, and data sources, making it easy for us to execute and learn from the code.
Intelligent Debugging and Data Matching: AI's Powerful Correction Capabilities
Addressing Missing Data
Directly click the "Download" button below to download the code to your computer. When you open the downloaded HTML file, the map will display successfully. However, as you move your mouse, you'll notice that most countries show "No Data," with only Taiwan displaying "Taiwan: 135 NTD."
Let's return to AI Studio and inform Gemini of the issue: "Only Taiwan shows a price; other regions have no data. Please correct this." Gemini starts thinking again, this time with a deeper thought process. It performs "data investigation," "debugging and matching," and "analyzing matching logic," discovering that the problem lies in the map data's country names being in English, while the price data's country names are in Chinese, preventing successful matching.
Creating a Country Name Lookup Table
To resolve this, Gemini creates a country name lookup table in the new code, successfully linking the English map data names with our price data. This gives us a firsthand look at AI's debugging capabilities. So, even if you don't know how to code, there's no need to worry.
Let's download the corrected HTML code again and open this revised version. Excellent! The map now displays colors based on price ranges. The title appears at the top, and as you hover your mouse over a country, its color lightens, displaying the country name and price. Below the map, there's a comprehensive legend mapping colors to price ranges.
Enhancing User Experience: Making the Map Clearer and More Readable
Let's examine latte prices in different countries: North American prices are generally on the lower side, with Canada at 115 NTD and the US at 106 NTD. Moving to South America, Brazil is only 64 NTD. European prices are generally higher, with the UK at 128 NTD, France at 158 NTD, and Denmark at 163 NTD. Russia's prices fall in the middle, at 130 NTD. In Asia and the Middle East: China is 140 NTD, Saudi Arabia 155 NTD, Thailand 115 NTD, Taiwan 135 NTD, and Japan 125 NTD. It seems all country prices are now successfully displayed.
Improving Visual Clarity
However, there's a minor issue: when the mouse moves, the selected country is highlighted with a color change, but for those of us with short attention spans, it can sometimes be hard to see clearly. So, let's ask Gemini to adjust the visibility.
We'll tell it: "Please adjust the effect of this interactive map. When the mouse hovers over a country, in addition to the original color change, please make that country's border more prominent, for example, by adding a thick black border. This will make it easier for viewers to notice where they are currently hovering. When the mouse leaves, the border can return to normal. Aside from this, all other display methods should remain unchanged."
Click "Execute." Gemini quickly revises the code. Download and run it. See? Aren't the borders of each country much clearer now? And we achieved this simply by writing a few sentences. Isn't that amazingly simple?
The link to the complete HTML code file will be provided in the information section below. Feel free to download and experiment with it. You've probably already realized that this interactive map application isn't limited to latte prices. You can use it to present global median housing prices, average wages, consumer price indices, population changes, or even your business data! In other words, once you learn this process, you can quickly create world maps on any topic in the future.
Data Validation: Building Trust in AI Collaboration
The map is ready, but is the data accurate? We'll use another AI search tool, Perplexity, for data validation.
Verifying Data Source Accuracy
First, on the map, Iceland is gray, indicating no data. This means the AI couldn't find a price. Let's ask Perplexity: "Does Iceland have Starbucks?" Perplexity's answer is clear: As of 2025, there are no Starbucks stores in Iceland. This explains why there's no data for Iceland on the map and confirms that the map provided by Gemini likely has a degree of accuracy.
To further verify prices for all countries, we return to AI Studio and give it a new instruction: "Please list the prices of all countries on the map so I can verify them." Gemini immediately generates a neat table, listing the country's Chinese name, country code, and New Taiwan Dollar price.
We'll copy this table, go back to Perplexity, paste it, and add the instruction: "Please verify the accuracy of the Starbucks grande latte prices for the following countries." Perplexity begins searching and analyzing. It not only helps us query data and convert exchange rates but also thoughtfully organizes a clear comparison table, pointing out issues like slightly lower prices in Australia, slightly higher in Austria, and significant underestimation in the UK.
Cross-Validation: The Confidence in AI Collaboration
Finally, it provides a clear summary: "Prices for most countries are consistent with international data or within a 10% error margin, which is reasonable." It also points out cases where some country prices are too high or too low and lists the data sources, allowing us to further verify the data. We can click on source number 1, which opens the source webpage, allowing us to personally verify these Starbucks latte prices in various countries.
We all know that AI can sometimes "hallucinate" and spout nonsense. But does this kind of cross-validation give you more confidence in AI collaboration? If you're interested in the detailed verification provided by Perplexity, the link will be in the video description below.
Conclusion: The Future Workflow Empowered by AI
Finally, let's return to AI Studio. Remember to click the "Save prompt" button in the top right corner to save your conversation with Gemini 2.5 Pro, including the code, for future reference.
Today, starting from a simple idea, we used Gemini 2.5 Pro to quickly generate and debug a fully functional interactive world latte price map website, and then validated the data using Perplexity. This fully demonstrates how to leverage AI tools for rapid development and verification. More importantly, we didn't have to write a single line of code ourselves. Even if you, like me, don't understand the HTML code, you can still successfully complete and use it.
From today's live demonstration, you can see that Gemini 2.5 Pro doesn't just "generate"; as long as we provide feedback, it also "understands" and "corrects." As you just witnessed, when we found blank map areas or missing data, Gemini was able to analyze and improve based on our instructions. This process allows ordinary people who can't code to independently perform data analysis and visualization, not only saving a lot of time but also creating engaging and impressive presentations that were almost impossible before AI.
This demonstration focused on an interactive map website application. This process can also be used to create educational websites, analytical reports, or even your own tools. Have you thought of even more exciting applications? Let me know in the comments!
