Google Maps Platform permet aux clients de développer des expériences uniques en personnalisant la conception visuelle de leurs repères sur la carte à l'aide de 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, tels que la taille, la couleur et la forme, peuvent fournir des informations supplémentaires sur chaque lieu marqué. Dans certains cas, ces informations supplémentaires peuvent changer de manière dynamique, et le développeur peut souhaiter que la visualisation de la carte soit mise à jour, afin de préserver la fraîcheur des données pour l'utilisateur.
Dans ce document, nous utilisons un exemple à des fins d'illustration : une chaîne de magasins de détail souhaite utiliser une carte pour indiquer aux utilisateurs les temps d'attente en magasin. 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 le nombre de chambres disponibles diminue.
- Disponibilité des places de parking : sur une carte des parkings, rassurez les utilisateurs en leur indiquant qu'ils trouveront une place à leur arrivée à la destination de leur choix.
- Restaurants ouverts, sur le point de fermer et fermés : sur une carte affichant les résultats de recherche de restaurants , il est important que les utilisateurs sachent si un restaurant risque d'ê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 de détail qui utilise son système de gestion des files d'attente en caisse pour estimer et visualiser les temps d'attente pour les utilisateurs. Voici l'architecture de l'application :
Étape 1 : Déterminer les attributs pour définir l'expérience visuelle
La première étape consiste à déterminer une ou plusieurs propriétés de lieu à 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 sur la carte. La liste des attributs de repère est disponible prête à l'emploi dans la PinElement. Vous pouvez également utiliser du code HTML personnalisé pour bénéficier d'options de personnalisation plus riches.
Dans cet exemple, nous allons utiliser deux attributs de repère pour visualiser les données sur le temps d'attente :
- Couleur du repère : bleu pour un temps d'attente inférieur à 5 minutes, jaune pour un temps d'attente supérieur à 5 minutes
- Contenu du repère (nécessite des repères HTML personnalisés) : nous allons inclure 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 de type "pull", dans laquelle nous demandons régulièrement les données mises à jour sur le temps d'attente à l'aide de requêtes HTTP (REST). Dans les sections suivantes, vous verrez d'autres architectures utilisant des approches de type "push".
Pour permettre à notre application d'accéder aux données sur le temps d'attente depuis 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 JavaScript setInterval avec un délai de 30 secondes. Chaque fois que le minuteur est déclenché, nous demandons les données mises à jour 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 sur la carte. L'étape suivante explique comment effectuer ces modifications.
Étape 3 : Afficher les repères sur la 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 le 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 afficher les temps d'attente à jour pour les utilisateurs :
Autres façons de se connecter à des 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. Ci-dessous, nous examinons deux autres options : Firebase Cloud Messaging et 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
- Capacités matérielles et du navigateur
Firebase Cloud Messaging
Firebase Cloud Messaging est une approche de type "push". Avec cette approche, vous envoyez des mises à jour à l'application de cartographie chaque fois que les données sur le temps d'attente sont mises à jour dans 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 de cartographie. Pour cette raison, son exécution peut être plus coûteuse et moins robuste en cas de problèmes de connectivité.
WebSockets
WebSockets sont 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 des 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 configurer 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, ainsi que 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 aux utilisateurs de bénéficier d'une expérience dynamique.
Actions suivantes
Complément d'informations :
- 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 | Google Maps Platform Ingénieur de solutions
John Branigan | Google Cloud Ingénieur client senior Platform
Steve Barrett | Ingénieur de solutions Google Maps Platform