Introduction & Inspiration
Hi there! I’m Eline van Straaten, Customer Engineer at Localyse. I help clients implement Google Maps APIs and brainstorm creative, location-based solutions that deliver real value. Over time, I’ve built many small demos to show what’s possible with the platform.
When the Google Maps Platform Awards opened for submissions, it felt like the perfect moment to scale up those experiments into something cohesive and useful. At the same time, I’d been exploring how AI could elevate travel planning. The result is Roamly, a dynamic, all-in-one travel app that pairs Google Maps Platform with AI to make exploring the world smarter, more personal, and more fun.
History & Vision
I wanted Roamly to feel like a real travel product, not just a proof of concept. That meant:
- A personalized, end-to-end flow (search → explore → plan)
- A visually immersive map experience using 3D maps
- A seamless handoff between discovery and action
Roamly helps you find the right hotel, uncover nearby gems, and generate a custom walking route that fits your interests, without juggling multiple tabs or apps.
How I Built It
I deliberately used plain JavaScript, HTML, and CSS. Keeping the stack simple helps me (and my colleagues/clients) focus on the “why” and “how” of the Maps features, no framework overhead, just clear, readable code that highlights what the APIs can do together.
Google Maps Platform + AI: What’s Under the Hood
- Autocomplete API: Validates and autocompletes user-entered locations
- Text Search API: Finds hotels and attractions tailored to user preferences
- Nearby Search API: Surfaces points of interest that match interests near the hotel
- Maps JavaScript API: Renders dynamic 3D maps with interactive markers and camera control
- Routes (Compute Routes): Calculates optimized walking routes and travel durations; draws polylines
- Elevation API: Improves camera placement for more natural map perspectives
- Places API: Place Details & Places UI Kit: Clean, consistent UIs for place info, photos, and reviews
- Places API: Places Aggregated Data: Shows the count of public transport stops within 100 meters of a hotel
- Gemini API: Selects the best stops and adds helpful context for a personalized walking route
How Roamly Works (End-to-End)
1) Start Your Search
Pick a destination (or let Roamly surprise you!) and choose two preferences.
- Autocomplete ensures valid locations.
- Roamly runs a Text Search for: “Hotels near preference a and preference b” in your chosen area.
2) Hotel Overview
Browse results on a 3D map with interactive markers and a click-through hotel list powered by the Places UI Kit. You’ll also see weather details so you know what to pack.
3) Hotel Details
Click a hotel to dive deeper, still on the 3D map:
- View the number of public transport stops within 100 meters (Places Aggregated Data).
- Explore nearby attractions (Nearby Search).
- Check rich details and photos (Places UI Kit).
- Enjoy dynamic perspectives tuned with the Elevation API.
4) Explore Nearby Places
Tap any nearby place to:
- Get walking distance and time from your hotel (Routes).
- See a compact info card (Places UI Kit).
- Visualize the route with a map polyline.
5) Plan a Custom Walking Route
Hit Generate Walking Route and Roamly will:
- Use Gemini API to pick the best stops for your interests.
- Call Routes to create an optimized route with:
- An ordered list of stops
- A polyline on the 3D map
- Total walking time and distance
Key elements
A cohesive journey. Roamly integrates multiple Google Maps APIs into one smooth experience. You can search, explore, and plan without leaving the app, yet you still have a one-click path to Google Maps if you want to save a place to your favorites.
Immersive clarity. The 3D map makes orientation and decision-making easier, and the Places UI Kit keeps details, photos, and reviews consistent and clean.
AI where it matters. Gemini augments and doesn’t overwhelm, enhancing recommendations and optimizing routes to match each traveler’s interests. I believe this type of personalization will become a baseline expectation for modern travel apps.
What I Learned
- The power of composition: each API is great alone, but the real magic appears when they’re orchestrated thoughtfully.
- 3D context reduces friction: better camera angles and routes on a realistic map help users commit to a plan faster.
- Simple stack, faster iteration: vanilla JS/HTML/CSS kept the focus on user flows and Maps capabilities.
Source: https://mapsplatform.google.com/awards/nominees/roamly-vmg79l/
