Google Maps Platform Awards : Roamly : ma démo gagnante

Introduction et inspiration

Je suis Eline van Straaten, ingénieur client chez Localyse. J'aide les clients à mettre en œuvre les API de Google Maps et à trouver des solutions créatives, axées sur la localisation, qui apportent une réelle valeur ajoutée. Au fil du temps, j'ai créé de nombreuses petites démonstrations pour montrer ce qu'il est possible de faire avec la plateforme.

Lorsque les candidatures aux Google Maps Platform Awards ont été ouvertes, le moment m'a semblé idéal pour transposer ces expériences à plus grande échelle et en faire quelque chose de cohérent et d'utile. Parallèlement, j'ai cherché à savoir comment l'IA pouvait améliorer la planification des voyages. Le résultat est Roamly, une application de voyage dynamique et tout-en-un qui associe Google Maps Platform à l'IA pour rendre l'exploration du monde plus intelligente, plus personnelle et plus amusante.

Histoire et vision

Je voulais que Roamly ressemble à une véritable application de voyage, et pas seulement à un prototype. Cela signifie que :

• Un flux personnalisé de bout en bout (recherche → explorer → planifier).
• Une expérience cartographique visuellement immersive avec des cartes en 3D
• Une transition transparente de la découverte à l'action.

Roamly vous aide à trouver le bon hôtel, à découvrir des joyaux cachés à proximité et à générer un itinéraire de marche personnalisé en fonction de vos intérêts, sans avoir à jongler avec plusieurs onglets ou applications.

Comment je l'ai construit

J'ai délibérément opté pour du JavaScript, du HTML et du CSS purs. Une pile simple me permet (ainsi qu'à mes collègues/clients) de me concentrer sur le pourquoi et le comment des fonctionnalités de Maps : pas de surcharge de framework, mais un code clair et lisible qui montre ce que les API peuvent faire ensemble.

Google Maps Platform + AI : sous le capot

• API d'autocomplétion: valide et complète automatiquement les lieux saisis par l'utilisateur.
• API de recherche textuelle: recherche d'hôtels et d'attractions en fonction des préférences de l'utilisateur
• Nearby Search API: indique les lieux intéressants situés à proximité de l'hôtel et correspondant aux intérêts de l'utilisateur.
• API JavaScript Maps: rend des cartes dynamiques en 3D avec des marqueurs interactifs et le contrôle de la position de la caméra.
• Routes (Compute Routes): calcule les itinéraires pédestres optimisés et les temps de parcours ; dessine des polylignes.
• Elevation API: améliore le positionnement de la caméra pour des perspectives cartographiques plus naturelles
• API Lieux: Détails sur les lieux et kit d'interface utilisateur Lieux: interface utilisateur cohérente et propre pour les informations sur les lieux, les photos et les avis.
• Places API : Places Aggregated Data: indique le nombre d'arrêts de transport public à moins de 100 mètres d'un hôtel
• Gemini API: sélectionne les meilleurs arrêts et ajoute un contexte pour un itinéraire pédestre personnalisé.

Comment fonctionne Roamly (de bout en bout)

1) Commencez votre recherche

Choisissez une destination (ou laissez Roamly vous surprendre !) et sélectionnez deux préférences.

• L'auto-complétion garantit que seuls les lieux valides sont utilisés.
• Roamly effectue une recherche textuelle pour :
  "Hôtels à proximité de la préférence A et de la préférence B" dans la zone sélectionnée.

2) Aperçu des hôtels

Affichez les résultats sur une carte en 3D avec des marqueurs interactifs et une liste d'hôtels cliquable via le kit d'interface utilisateur Places. Vous verrez également le temps qu'il fait, ce qui vous permettra de savoir ce qu'il faut emporter.

3) Détails de l'hôtel

Cliquez sur un hôtel pour aller plus loin, toujours sur la carte en 3D :

• Voir le nombre d'arrêts de transport public dans un rayon de 100 mètres (données agrégées de Places).
• Explorez les attractions à proximité (Nearby Search).
• Consultez les détails et les photos (Places UI Kit).
• Profitez de perspectives dynamiques grâce à l'API d'élévation.

4) Explorer les lieux à proximité

Cliquez sur un lieu à proximité pour :

• Voir letemps de marche et la distance depuis votre hôtel (Routes).
• Afficher une carte d'information compacte (Places UI Kit).
• Visualiser l'itinéraire à l'aide d'une polyligne sur la carte.

5) Planifier un itinéraire personnalisé

Cliquez sur Générer un itinéraire de marche et Roamly le fera :

• Utiliser l'API Gemini pour choisir les meilleurs arrêts en fonction de vos intérêts.
• Appeler Routes pour créer un itinéraire optimisé avec :
  • Une liste ordonnée d'arrêts
  • Une polyligne sur la carte 3D
  • Le temps de marche total et la distance

Des éléments clés

Un parcours cohérent. Roamly intègre plusieurs API de Google Maps en une seule expérience fluide. Vous pouvez rechercher, explorer et planifier sans quitter l'application, tout en accédant en un clic à Google Maps pour ajouter un lieu à vos favoris, par exemple.

Clair et immersif. La carte en 3D facilite l'orientation et la prise de décision, et le kit d'interface utilisateur Places assure la cohérence et la clarté des détails, des photos et des avis.

L'IA là où elle compte. Gemini complète plutôt qu'il ne domine : les recommandations et les itinéraires deviennent plus intelligents et mieux adaptés à chaque voyageur. Je pense que ce type de personnalisation est en train de devenir la base des applications de voyage modernes.

Ce que j'ai appris

• Le pouvoir de la composition : chaque API est puissante en soi, mais la véritable magie opère lorsque vous les orchestrez de manière réfléchie.
• Le contexte 3D réduit les frictions : de meilleures positions de la caméra et la visualisation de l'itinéraire sur une carte réaliste aident les utilisateurs à prendre des décisions plus rapidement.
• Une pile simple, une itération plus rapide : avec JS/HTML/CSS vanille, l'accent a été mis sur les flux d'utilisateurs et les capacités de Maps.

Source : https://mapsplatform.google.com/awards/nominees/roamly-vmg79l/

Clause de non-responsabilité : Ces articles de blog ont été initialement publiés sous les noms de Geo Solutions et Localyse. Par conséquent, il est possible que des références à Geo Solutions of Localyse apparaissent encore. Dans le cadre de notre rebranding, les deux marques seront regroupées sous le nom de GeoSquare Belgique à partir de février 2026.