Google Maps Platform permet aux clients de développer des expériences uniques en personnalisant la conception visuelle de leurs repères de carte à l'aide des repères avancés. Dans ce document, nous allons voir comment les clients peuvent aller plus loin et créer des repères qui changent de manière dynamique en fonction des données en temps réel.
Les repères sur la carte sont un outil utile pour offrir aux utilisateurs des expériences de cartographie enrichies. Les attributs des repères (taille, couleur et forme, par exemple) peuvent fournir des informations supplémentaires sur chaque lieu marqué. Dans certains cas, ces informations supplémentaires peuvent changer de manière dynamique. Le développeur peut souhaiter que la visualisation de la carte soit mise à jour pour que l'utilisateur ait l'impression que les informations sont toujours à jour.
Dans ce document, nous utilisons un exemple à des fins d'illustration : une chaîne de magasins souhaite utiliser une carte pour mettre les temps d'attente en magasin à la disposition des utilisateurs. Toutefois, cette même architecture pourrait être utilisée pour de nombreux autres cas d'utilisation. Voici quelques idées supplémentaires :
- Disponibilité des chambres d'hôtel : sur une carte affichant les résultats de recherche d'hôtels, la fraîcheur des informations sur la disponibilité des chambres est un signal important qui peut inciter les utilisateurs à réserver un hôtel à mesure que l'inventaire diminue.
- Disponibilité des places de parking : sur une carte de parkings, donnez aux utilisateurs l'assurance de trouver une place à leur arrivée à destination.
- Restaurants ouverts, qui ferment bientôt et fermés : sur une carte affichant les résultats de recherche de restaurants, il est important que les utilisateurs sachent si un restaurant peut être fermé à leur arrivée.
Solution de repères avancés dynamiques
Vous pouvez créer une carte à l'aide de repères avancés pour visualiser des données dynamiques. Comme mentionné précédemment, le cas d'utilisation est une chaîne de magasins qui utilise son système de gestion des files d'attente en caisse pour estimer et visualiser les temps d'attente des utilisateurs. Voici l'architecture de l'application :
Étape 1 : Déterminez les attributs permettant de définir l'expérience visuelle
La première étape consiste à déterminer une ou plusieurs propriétés de localisation à afficher aux utilisateurs. Dans ce cas, nous ne souhaitons afficher qu'une seule propriété : le temps d'attente actuel dans chaque magasin, mesuré en minutes.
L'étape suivante consiste à sélectionner un ou plusieurs attributs de repère correspondants pour annoter visuellement le temps d'attente sur le repère de la carte. La liste des attributs de repère est disponible prête à l'emploi dans la spécification PinElement. Vous pouvez également utiliser du code HTML personnalisé pour bénéficier d'options de personnalisation plus riches.
Pour cet exemple, nous utiliserons deux attributs de repères pour visualiser les données sur le temps d'attente :
- Couleur du repère : bleu si le temps d'attente est inférieur à cinq minutes, jaune s'il est supérieur à cinq minutes
- Contenu du repère (nécessite des repères HTML personnalisés) : nous inclurons le temps d'attente actuel en minutes dans le repère lui-même.
Étape 2 : Configurer la connexion aux sources de données en temps réel
Il existe plusieurs façons de se connecter à des sources de données. La solution appropriée dépend de votre cas d'utilisation et de votre infrastructure technique. Dans cet exemple, nous utilisons une approche par extraction, où nous demandons régulièrement les données de temps d'attente mises à jour à l'aide de requêtes HTTP (REST). Dans les sections suivantes, vous découvrirez d'autres architectures utilisant des approches push.
Pour permettre à notre application d'accéder aux données sur les temps d'attente de notre serveur, notre architecture utilise Cloud Functions for Firebase. Cloud Functions nous permet de définir une fonction de backend pour accéder à ces données et les calculer. Nous incluons également la bibliothèque Firebase dans notre application Web, ce qui nous permet d'accéder à notre fonction Cloud à l'aide d'une requête HTTP.
L'étape suivante consiste à s'assurer que les données restent à jour pour l'utilisateur. Pour ce faire, nous configurons un minuteur à l'aide de la fonction setInterval de JavaScript avec un délai de 30 secondes. Chaque fois que le minuteur se déclenche, nous demandons des données actualisées sur le temps d'attente, comme décrit ci-dessus. Une fois que nous avons obtenu les nouvelles données, nous devons actualiser l'apparence des repères de la carte. L'étape suivante explique comment effectuer ces modifications.
Étape 3 : Afficher les repères de carte
Nous pouvons maintenant utiliser des repères avancés pour afficher les repères stylisés sur la carte. Les repères avancés peuvent être affichés sur les cartes créées par l'API Maps JavaScript de Google Maps Platform. Lorsque vous utilisez des repères avancés, veillez à inclure le paramètre d'ID de carte dans la requête de carte JS.
Dans l'extrait de code ci-dessous, nous créons les repères et définissons leur contenu en créant un élément HTML div :
// Create the content div for the marker
storeWaitLabels[store_index] = document.createElement("div");
// Create the marker
markers.push(new google.maps.marker.AdvancedMarkerElement({
map,
position: { lat: latlngs[store_index][0], lng: latlngs[store_index][1] },
content: storeWaitLabels[store_index]
}));
La dernière étape consiste à mettre à jour le texte du repère et le style CSS pour chaque magasin. Le code ci-dessous lit les données mises à jour sur les temps d'attente et attribue un style à chaque repère de magasin en fonction du temps d'attente :
// Update the visual appearcance of a map marker
storeWaitLabels[store_index].textContent = waitTimes[store_index] + " min";
if (waitTimes[store_index] > 5)
storeWaitLabels[store_index].className = "wait-over-5";
else storeWaitLabels[store_index].className = "wait-under-5";
La carte utilise désormais notre API de temps d'attente existante pour visualiser les temps d'attente à jour pour les utilisateurs :
Autres méthodes de connexion aux sources de données en temps réel
Il existe différentes façons de se connecter à des sources de données en temps réel. Nous allons examiner deux options alternatives : Firebase Cloud Messaging et les WebSockets. Quelle que soit l'approche que vous choisissez, veillez à tenir compte des facteurs ci-dessous pour que votre outil de cartographie reste performant :
- Fréquence des mises à jour
- Volume de données
- Nombre de repères dans la vue de la carte
- Fonctionnalités matérielles et du navigateur
Firebase Cloud Messaging
Firebase Cloud Messaging est une approche push. Avec cette approche, vous enverrez des mises à jour à l'application de cartographie chaque fois que les données sur le temps d'attente seront mises à jour sur le backend. Les messages de mise à jour déclenchent une fonction de rappel dont l'objectif est de mettre à jour l'apparence et le contenu du repère.
Avant de sélectionner cette architecture, vous devez tenir compte du fait qu'elle nécessite de maintenir une connexion serveur persistante pour chaque navigateur exécutant l'application cartographique. C'est pourquoi son exécution peut être plus coûteuse et moins robuste en cas de problèmes de connectivité.
WebSockets
Les WebSockets constituent une autre approche basée sur le push pour maintenir la fraîcheur des données. Comme dans le scénario précédent, vous pouvez utiliser WebSockets pour établir une connexion persistante entre votre backend et votre application de cartographie. Les avantages fonctionnels de cette approche sont similaires à ceux de Firebase Cloud Messaging. Toutefois, une configuration supplémentaire peut être nécessaire pour l'infrastructure requise.
Conclusion
Les développeurs peuvent combiner des sources de données en temps réel avec des repères avancés pour créer des visualisations intuitives sur Google Maps. Il existe plusieurs façons de connecter ces sources de données en fonction des exigences de la carte, du matériel et du navigateur de l'utilisateur, et du volume de données. Les données intégrées peuvent ensuite être utilisées pour contrôler l'apparence des repères avancés en temps réel, ce qui permet d'offrir une expérience dynamique aux utilisateurs.
Actions suivantes
Pour en savoir plus :
- Repères avancés – Centre des développeurs Google
- Créer des repères avec du code HTML personnalisé
- Cloud Functions for Firebase
- Firebase Cloud Messaging
Contributeurs
Auteurs principaux :
Jim Leflar | Ingénieur de solutions Google Maps Platform
John Branigan | Ingénieur client senior Google Cloud Platform
Steve Barrett | Ingénieur de solutions Google Maps Platform