{"id":10707,"date":"2025-09-24T08:42:54","date_gmt":"2025-09-24T08:42:54","guid":{"rendered":"https:\/\/localyse.eu\/?p=10707"},"modified":"2025-09-24T08:42:55","modified_gmt":"2025-09-24T08:42:55","slug":"google-maps-platform-awards-roamly-mijn-winnende-demo","status":"publish","type":"post","link":"https:\/\/localyse.eu\/nl\/google-maps-platform-awards-roamly-mijn-winnende-demo\/","title":{"rendered":"Google Maps Platform Awards: Roamly: mijn winnende demo"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Introductie &amp; Inspiratie<\/h2>\n\n\n\n<p>Ik ben Eline van Straaten, Customer Engineer bij Localyse. Ik help klanten met de implementatie van Google Maps-API\u2019s en bedenk creatieve, locatiegedreven oplossingen die echte waarde opleveren. In de loop der tijd heb ik veel kleine demo\u2019s gebouwd om te laten zien wat er mogelijk is met het platform.<\/p>\n\n\n\n<p>Toen de <strong>Google Maps Platform Awards<\/strong> 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 <strong>Roamly<\/strong>, een dynamische, alles-in-\u00e9\u00e9n reisapp die Google Maps Platform koppelt aan AI om de wereld slimmer, persoonlijker en leuker te ontdekken.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"417\" src=\"https:\/\/localyse.eu\/wp-content\/uploads\/2025\/09\/Googl-Maps-Platform-Awards-groot-1024x417.jpeg\" alt=\"\" class=\"wp-image-10718\" srcset=\"https:\/\/localyse.eu\/wp-content\/uploads\/2025\/09\/Googl-Maps-Platform-Awards-groot-1024x417.jpeg 1024w, https:\/\/localyse.eu\/wp-content\/uploads\/2025\/09\/Googl-Maps-Platform-Awards-groot-300x122.jpeg 300w, https:\/\/localyse.eu\/wp-content\/uploads\/2025\/09\/Googl-Maps-Platform-Awards-groot-768x313.jpeg 768w, https:\/\/localyse.eu\/wp-content\/uploads\/2025\/09\/Googl-Maps-Platform-Awards-groot-650x265.jpeg 650w, https:\/\/localyse.eu\/wp-content\/uploads\/2025\/09\/Googl-Maps-Platform-Awards-groot.jpeg 1048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Geschiedenis &amp; Visie<\/h2>\n\n\n\n<p>Ik wilde dat Roamly aanvoelde als een echte reisapp, niet alleen een proof-of-concept. Dat betekent:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Een gepersonaliseerde end-to-end flow (zoeken \u2192 verkennen \u2192 plannen)<\/li>\n\n\n\n<li>Een visueel immersieve kaartbeleving met <strong>3D-kaarten<\/strong><\/li>\n\n\n\n<li>Een naadloze overgang van ontdekking naar actie<\/li>\n<\/ul>\n\n\n\n<p>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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Hoe ik het bouwde<\/h2>\n\n\n\n<p>Ik koos bewust voor <strong>pure JavaScript, HTML en CSS<\/strong>. Een eenvoudige stack helpt mij (en mijn collega\u2019s\/klanten) focussen op het <em>waarom<\/em> en <em>hoe<\/em> van de Maps-functionaliteiten: geen framework-overhead, maar duidelijke, leesbare code die laat zien wat de API\u2019s samen kunnen.<\/p>\n\n\n\n<p><strong>Google Maps Platform + AI: onder de motorkap<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Autocomplete API<\/strong>: valideert en vult door gebruikers ingevoerde locaties automatisch aan<\/li>\n\n\n\n<li><strong>Text Search API<\/strong>: vindt hotels en attracties op basis van voorkeuren<\/li>\n\n\n\n<li><strong>Nearby Search API<\/strong>: toont interessante plekken nabij het hotel die bij de interesses passen<\/li>\n\n\n\n<li><strong>Maps JavaScript API<\/strong>: rendert dynamische <strong>3D-kaarten<\/strong> met interactieve markers en camerapositie-besturing<\/li>\n\n\n\n<li><strong>Routes (Compute Routes)<\/strong>: berekent geoptimaliseerde wandelroutes en reistijden; tekent polylines<\/li>\n\n\n\n<li><strong>Elevation API<\/strong>: verbetert de cameraplaatsing voor natuurlijkere kaartperspectieven<\/li>\n\n\n\n<li><strong>Places API: Place Details &amp; Places UI Kit<\/strong>: consistente, nette UI voor plaatsinformatie, foto\u2019s en reviews<\/li>\n\n\n\n<li><strong>Places API: Places Aggregated Data<\/strong>: toont het aantal OV-haltes binnen 100 meter van een hotel<\/li>\n\n\n\n<li><strong>Gemini API<\/strong>: selecteert de beste stops en voegt context toe voor een persoonlijke wandelroute<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"437\" src=\"https:\/\/localyse.eu\/wp-content\/uploads\/2025\/09\/Roamly-1-groot-1024x437.jpeg\" alt=\"\" class=\"wp-image-10721\" srcset=\"https:\/\/localyse.eu\/wp-content\/uploads\/2025\/09\/Roamly-1-groot-1024x437.jpeg 1024w, https:\/\/localyse.eu\/wp-content\/uploads\/2025\/09\/Roamly-1-groot-300x128.jpeg 300w, https:\/\/localyse.eu\/wp-content\/uploads\/2025\/09\/Roamly-1-groot-768x328.jpeg 768w, https:\/\/localyse.eu\/wp-content\/uploads\/2025\/09\/Roamly-1-groot-650x277.jpeg 650w, https:\/\/localyse.eu\/wp-content\/uploads\/2025\/09\/Roamly-1-groot.jpeg 1230w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Zo werkt Roamly (end-to-end)<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">1) Start je zoekopdracht<\/h3>\n\n\n\n<p>Kies een bestemming (of laat Roamly je verrassen!) en selecteer twee voorkeuren.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Autocomplete zorgt ervoor dat alleen geldige locaties worden gebruikt.<\/li>\n\n\n\n<li>Roamly voert een Text Search uit voor:<br><strong>\u201cHotels nabij voorkeur A en voorkeur B\u201d<\/strong> in het gekozen gebied.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">2) Hoteloverzicht<\/h3>\n\n\n\n<p>Bekijk resultaten op een <strong>3D-kaart<\/strong> met interactieve markers en een doorklikbare hotellijst via de Places UI Kit. Je ziet ook het weer, zodat je weet wat je moet inpakken.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3) Hoteldetails<\/h3>\n\n\n\n<p>Klik op een hotel om dieper te gaan, nog steeds op de 3D-kaart:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Bekijk het <strong>aantal OV-haltes<\/strong> binnen 100 meter (Places Aggregated Data).<\/li>\n\n\n\n<li>Verken <strong>bezienswaardigheden in de buurt<\/strong> (Nearby Search).<\/li>\n\n\n\n<li>Check rijke details en foto\u2019s (Places UI Kit).<\/li>\n\n\n\n<li>Geniet van dynamische perspectieven met de <strong>Elevation API<\/strong>.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">4) Ontdek plekken in de buurt<\/h3>\n\n\n\n<p>Klik op een plek in de buurt om:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Wandeltijd en -afstand<\/strong> vanaf je hotel te zien (Routes).<\/li>\n\n\n\n<li>Een compacte infokaart te bekijken (Places UI Kit).<\/li>\n\n\n\n<li>De route te visualiseren met een <strong>polyline<\/strong> op de kaart.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">5) Plan een aangepaste wandelroute<\/h3>\n\n\n\n<p>Klik op <strong>Wandelroute genereren<\/strong> en Roamly zal:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>De <strong>Gemini API<\/strong> gebruiken om de beste stops te kiezen op basis van jouw interesses.<\/li>\n\n\n\n<li><strong>Routes<\/strong> aanroepen om een geoptimaliseerde route te maken met:\n<ul class=\"wp-block-list\">\n<li>Een <strong>geordende lijst<\/strong> met stops<\/li>\n\n\n\n<li>Een <strong>polyline<\/strong> op de 3D-kaart<\/li>\n\n\n\n<li><strong>Totale wandeltijd en -afstand<\/strong><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"456\" src=\"https:\/\/localyse.eu\/wp-content\/uploads\/2025\/09\/Roamly-2-groot-1024x456.jpeg\" alt=\"\" class=\"wp-image-10724\" srcset=\"https:\/\/localyse.eu\/wp-content\/uploads\/2025\/09\/Roamly-2-groot-1024x456.jpeg 1024w, https:\/\/localyse.eu\/wp-content\/uploads\/2025\/09\/Roamly-2-groot-300x133.jpeg 300w, https:\/\/localyse.eu\/wp-content\/uploads\/2025\/09\/Roamly-2-groot-768x342.jpeg 768w, https:\/\/localyse.eu\/wp-content\/uploads\/2025\/09\/Roamly-2-groot-650x289.jpeg 650w, https:\/\/localyse.eu\/wp-content\/uploads\/2025\/09\/Roamly-2-groot.jpeg 1225w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Belangrijke elementen<\/h2>\n\n\n\n<p><strong>E\u00e9n samenhangende reis.<\/strong> Roamly integreert meerdere Google Maps-API\u2019s tot \u00e9\u00e9n vloeiende ervaring. Je kunt zoeken, verkennen en plannen zonder de app te verlaten, maar je hebt nog steeds met \u00e9\u00e9n klik toegang tot Google Maps om bijvoorbeeld een plek aan je favorieten toe te voegen.<\/p>\n\n\n\n<p><strong>Helder en immersief.<\/strong> De 3D-kaart maakt ori\u00ebntatie en besluitvorming gemakkelijker, en de Places UI Kit houdt details, foto\u2019s en reviews consistent en overzichtelijk.<\/p>\n\n\n\n<p><strong>AI waar het telt.<\/strong> 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.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"914\" style=\"aspect-ratio: 1894 \/ 914;\" width=\"1894\" controls src=\"https:\/\/localyse.eu\/wp-content\/uploads\/2025\/09\/Google-Maps-Platform-Awards-Roamly-Video.mp4\"><\/video><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Wat ik heb gele<\/strong>e<strong>rd<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>De kracht van compositie:<\/strong> elke API is op zichzelf sterk, maar de echte magie ontstaat wanneer je ze doordacht orkestreert.<\/li>\n\n\n\n<li><strong>3D-context vermindert frictie:<\/strong> betere cameraposities en route-visualisatie op een realistische kaart helpen gebruikers sneller knopen door te hakken.<\/li>\n\n\n\n<li><strong>Eenvoudige stack, sneller itereren:<\/strong> met vanilla JS\/HTML\/CSS bleef de focus op gebruikersflows en Maps-mogelijkheden.<\/li>\n<\/ul>\n\n\n\n<p>Bron: <a href=\"https:\/\/mapsplatform.google.com\/awards\/nominees\/roamly-vmg79l\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/mapsplatform.google.com\/awards\/nominees\/roamly-vmg79l\/<\/a><\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"My Submission for the Google Maps Platform awards 2025\" width=\"1000\" height=\"563\" src=\"https:\/\/www.youtube.com\/embed\/ZIA38Iu10uo?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Introductie &amp; Inspiratie Ik ben Eline van Straaten, Customer Engineer bij Localyse. Ik help klanten met de implementatie van Google Maps-API\u2019s en bedenk creatieve, locatiegedreven oplossingen die echte waarde opleveren. In de loop der tijd heb ik veel kleine demo\u2019s gebouwd om te laten zien wat er mogelijk is met het platform. Toen de Google [&hellip;]<\/p>\n","protected":false},"author":16,"featured_media":10730,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[40,36],"tags":[],"class_list":["post-10707","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-nl","category-google-maps-nl"],"acf":[],"_links":{"self":[{"href":"https:\/\/localyse.eu\/nl\/wp-json\/wp\/v2\/posts\/10707","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/localyse.eu\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/localyse.eu\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/localyse.eu\/nl\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/localyse.eu\/nl\/wp-json\/wp\/v2\/comments?post=10707"}],"version-history":[{"count":4,"href":"https:\/\/localyse.eu\/nl\/wp-json\/wp\/v2\/posts\/10707\/revisions"}],"predecessor-version":[{"id":10737,"href":"https:\/\/localyse.eu\/nl\/wp-json\/wp\/v2\/posts\/10707\/revisions\/10737"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/localyse.eu\/nl\/wp-json\/wp\/v2\/media\/10730"}],"wp:attachment":[{"href":"https:\/\/localyse.eu\/nl\/wp-json\/wp\/v2\/media?parent=10707"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/localyse.eu\/nl\/wp-json\/wp\/v2\/categories?post=10707"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/localyse.eu\/nl\/wp-json\/wp\/v2\/tags?post=10707"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}