Creating an Interactive World Map Website with AI: A Step-by-Step Guide

Imagine creating an interactive world map website that displays the price of a Starbucks latte in various countries, all with just a single sentence and no coding skills, data research, or technical expertise required. Thanks to advancements in AI, this is now possible. In this article, I’ll walk you through how I used Google’s Gemini 2.5 Pro model to build such a website from a simple idea, demonstrating AI’s ability to handle everything from coding to debugging and data validation.

Getting Started with Google AI Studio

To begin, I navigated to Google AI Studio, a user-friendly platform for interacting with Google’s AI models. I selected the "Chat" function and chose the Gemini 2.5 Pro Preview model (released on June 5, 2025, as indicated by the "0605" tag). To ensure the AI could access the latest information, I enabled the “Grounding with Google Search” feature, allowing Gemini to pull real-time data from the web.

Crafting the Prompt

The key to success lies in providing a clear and detailed prompt. I instructed Gemini to create a single HTML file that displays an interactive world map showing the price of a medium Starbucks latte in each country. The map should use color gradients to represent price ranges, display the country name and price in Traditional Chinese when hovering over a country, and include a legend for price ranges. I also specified that the HTML file should be self-contained, requiring no external files. The full prompt was saved for reference and can be found in the resources section below.

Generating the Initial Code

After pressing “Run,” Gemini began processing the request, displaying its thought process, including steps like “determining latte data” and “defining price parameters.” Within moments, it generated a complete HTML file, including CSS for styling and JavaScript for interactivity. The code even came with Chinese comments explaining each section’s functionality, a design overview, usage instructions, and data sources. I downloaded the file and opened it in a browser.

Testing the First Version

The map loaded successfully, but hovering over most countries showed “no data,” except for Taiwan, which displayed “Taiwan: NT$135.” This indicated a data mismatch issue. I returned to AI Studio and informed Gemini: “Only Taiwan shows a price; other regions have no data. Please fix this.”

Debugging with AI

Gemini analyzed the issue, revealing that the map’s country names were in English, while the price data used Chinese names, causing a failure in data matching. To resolve this, Gemini generated a revised HTML file with a country name mapping table to align English map data with Chinese price data. This showcased AI’s powerful debugging capabilities. I downloaded the updated file and tested it again.

Exploring the Improved Map

The revised map was a success! Countries were now color-coded based on price ranges, and hovering over a country highlighted it with a lighter color, displaying the country name and price in Traditional Chinese. A legend at the bottom clarified the price ranges. For example:

• North America: Canada (NT$115), USA (NT$106)
• South America: Brazil (NT$64)
• Europe: UK (NT$128), France (NT$158), Denmark (NT$163)
• Asia and Middle East: China (NT$140), Saudi Arabia (NT$155), Thailand (NT$115), Taiwan (NT$135), Japan (NT$125)
• Russia: NT$130

All countries now displayed prices correctly, making the map both functional and visually appealing.

Enhancing User Experience

Despite the map’s functionality, I noticed that the hover effect could be hard to follow for users with lower attention spans. I asked Gemini to enhance the map by adding a bold black border around a country when hovered over, which would revert to normal when the cursor moved away, while keeping all other features unchanged. Gemini quickly updated the code, and the new version made it much easier to track the selected country.

Verifying Data Accuracy

To ensure the data’s reliability, I used Perplexity, another AI-powered search tool. Noticing that Iceland appeared gray (indicating no data), I asked Perplexity, “Does Iceland have Starbucks?” It confirmed that, as of 2025, Iceland has no Starbucks stores, explaining the absence of data and validating Gemini’s accuracy.

For a comprehensive check, I returned to AI Studio and asked Gemini to list all countries’ prices in a table. I copied this table into Perplexity with the instruction: “Verify the accuracy of the Starbucks medium latte prices listed below.” Perplexity analyzed the data, performed currency conversions, and produced a comparison table, noting minor discrepancies (e.g., Australia’s price was slightly low, Austria’s slightly high, and the UK’s significantly underestimated). It concluded that most prices were within a 10% margin of error, deeming them reasonably accurate, and provided source links for further verification.

Saving and Reusing the Workflow

Before concluding, I saved the entire Gemini session, including the prompt and code, using AI Studio’s “Save Prompt” feature. This allows me to revisit or adapt the project later. The final HTML file and related resources are available in the links provided below.

Beyond Latte Prices: Endless Possibilities

This project demonstrates that interactive maps can visualize far more than coffee prices. You could map global median home prices, average salaries, cost of living indices, population trends, or business metrics. Once you master this AI-driven process, you can quickly create compelling visualizations for any dataset.

Final Thoughts

Using Google’s Gemini 2.5 Pro, I built a fully functional interactive world map in minutes without writing a single line. Gemini handled coding, debugging, debugging, while Perplexity ensured data accuracy. This workflow empowers anyone, regardless of technical skills, to create engaging, data-driven presentations. Whether you’re comparing international prices or building reports, AI makes it fast and accessible.

If you’re inspired to try this process or have ideas for other applications, share them in the comments. The complete HTML code and additional resources are linked below. Stay tuned for more AI-driven tutorials showcasing practical, real-world applications Resources:

• [Prompt and HTML code used in this tutorial]
• [Perplexity data validation report]
• [Download the final HTML file]

Happy mapping!