Introductie & Inspiratie
Ik ben Eline van Straaten, Customer Engineer bij Localyse. Ik help klanten met de implementatie van Google Maps-API’s en bedenk creatieve, locatiegedreven oplossingen die echte waarde opleveren. In de loop der tijd heb ik veel kleine demo’s gebouwd om te laten zien wat er mogelijk is met het platform.
Toen de Google Maps Platform Awards open gingen voor inzendingen, voelde dat als het perfecte moment om die experimenten op te schalen tot iets samenhangends en nuttigs. Tegelijkertijd onderzocht ik hoe AI reisplanning kan versterken. Het resultaat is Roamly, een dynamische, alles-in-één reisapp die Google Maps Platform koppelt aan AI om de wereld slimmer, persoonlijker en leuker te ontdekken.
Geschiedenis & Visie
Ik wilde dat Roamly aanvoelde als een echte reisapp, niet alleen een proof-of-concept. Dat betekent:
- Een gepersonaliseerde end-to-end flow (zoeken → verkennen → plannen)
- Een visueel immersieve kaartbeleving met 3D-kaarten
- Een naadloze overgang van ontdekking naar actie
Roamly helpt je het juiste hotel te vinden, verborgen parels in de buurt te ontdekken en een aangepaste wandelroute te genereren die bij je interesses past, zonder te jongleren met meerdere tabbladen of apps.
Hoe ik het bouwde
Ik koos bewust voor pure JavaScript, HTML en CSS. Een eenvoudige stack helpt mij (en mijn collega’s/klanten) focussen op het waarom en hoe van de Maps-functionaliteiten: geen framework-overhead, maar duidelijke, leesbare code die laat zien wat de API’s samen kunnen.
Google Maps Platform + AI: onder de motorkap
- Autocomplete API: valideert en vult door gebruikers ingevoerde locaties automatisch aan
- Text Search API: vindt hotels en attracties op basis van voorkeuren
- Nearby Search API: toont interessante plekken nabij het hotel die bij de interesses passen
- Maps JavaScript API: rendert dynamische 3D-kaarten met interactieve markers en camerapositie-besturing
- Routes (Compute Routes): berekent geoptimaliseerde wandelroutes en reistijden; tekent polylines
- Elevation API: verbetert de cameraplaatsing voor natuurlijkere kaartperspectieven
- Places API: Place Details & Places UI Kit: consistente, nette UI voor plaatsinformatie, foto’s en reviews
- Places API: Places Aggregated Data: toont het aantal OV-haltes binnen 100 meter van een hotel
- Gemini API: selecteert de beste stops en voegt context toe voor een persoonlijke wandelroute
Zo werkt Roamly (end-to-end)
1) Start je zoekopdracht
Kies een bestemming (of laat Roamly je verrassen!) en selecteer twee voorkeuren.
- Autocomplete zorgt ervoor dat alleen geldige locaties worden gebruikt.
- Roamly voert een Text Search uit voor:
“Hotels nabij voorkeur A en voorkeur B” in het gekozen gebied.
2) Hoteloverzicht
Bekijk resultaten op een 3D-kaart met interactieve markers en een doorklikbare hotellijst via de Places UI Kit. Je ziet ook het weer, zodat je weet wat je moet inpakken.
3) Hoteldetails
Klik op een hotel om dieper te gaan, nog steeds op de 3D-kaart:
- Bekijk het aantal OV-haltes binnen 100 meter (Places Aggregated Data).
- Verken bezienswaardigheden in de buurt (Nearby Search).
- Check rijke details en foto’s (Places UI Kit).
- Geniet van dynamische perspectieven met de Elevation API.
4) Ontdek plekken in de buurt
Klik op een plek in de buurt om:
- Wandeltijd en -afstand vanaf je hotel te zien (Routes).
- Een compacte infokaart te bekijken (Places UI Kit).
- De route te visualiseren met een polyline op de kaart.
5) Plan een aangepaste wandelroute
Klik op Wandelroute genereren en Roamly zal:
- De Gemini API gebruiken om de beste stops te kiezen op basis van jouw interesses.
- Routes aanroepen om een geoptimaliseerde route te maken met:
- Een geordende lijst met stops
- Een polyline op de 3D-kaart
- Totale wandeltijd en -afstand
Belangrijke elementen
Eén samenhangende reis. Roamly integreert meerdere Google Maps-API’s tot één vloeiende ervaring. Je kunt zoeken, verkennen en plannen zonder de app te verlaten, maar je hebt nog steeds met één klik toegang tot Google Maps om bijvoorbeeld een plek aan je favorieten toe te voegen.
Helder en immersief. De 3D-kaart maakt oriëntatie en besluitvorming gemakkelijker, en de Places UI Kit houdt details, foto’s en reviews consistent en overzichtelijk.
AI waar het telt. Gemini vult aan in plaats van te overheersen: aanbevelingen en routes worden slimmer en beter afgestemd op elke reiziger. Ik geloof dat dit soort personalisatie de baseline wordt voor moderne reisapps.
Wat ik heb geleerd
- De kracht van compositie: elke API is op zichzelf sterk, maar de echte magie ontstaat wanneer je ze doordacht orkestreert.
- 3D-context vermindert frictie: betere cameraposities en route-visualisatie op een realistische kaart helpen gebruikers sneller knopen door te hakken.
- Eenvoudige stack, sneller itereren: met vanilla JS/HTML/CSS bleef de focus op gebruikersflows en Maps-mogelijkheden.
Bron: https://mapsplatform.google.com/awards/nominees/roamly-vmg79l/
