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 cartographiques sont un outil utile pour offrir aux utilisateurs une expérience cartographique enrichie. Les attributs des repères, tels que la taille, la couleur et la forme, peuvent transmettre 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 maintenir un sentiment de fraîcheur pour l'utilisateur.
Dans cet article, nous prenons l'exemple à titre d'illustration: une chaîne de magasins souhaite utiliser une carte pour présenter aux utilisateurs les temps d'attente en magasin. Cependant, cette même architecture peut ê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, l'actualisation de la disponibilité des chambres est un indicateur important qui peut inciter les utilisateurs à réserver un hôtel à mesure que les stocks diminuent.
- Disponibilité des places de parking: sur une carte des parkings, indiquez aux utilisateurs qu'ils peuvent choisir en toute confiance une place qui leur permettra de se garer à leur arrivée.
- 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
Voyons maintenant comment créer une carte à l'aide de repères avancés pour visualiser des données dynamiques. Comme indiqué précédemment, le cas d'utilisation est une chaîne de magasins qui exploite son système de gestion des files d'attente aux caisses pour estimer et visualiser les temps d'attente des 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 pour les 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 obtenir des options de personnalisation plus riches.
Pour 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 à cinq minutes, jaune pour un temps d'attente 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 aux sources de données. La solution adaptée dépend de votre cas d'utilisation et de votre infrastructure technique. Dans cet exemple, nous utilisons une approche pull, dans laquelle nous demandons régulièrement les données de temps d'attente mises à jour via des requêtes HTTP (REST). Dans les sections suivantes, vous découvrirez d'autres architectures qui exploitent les approches push.
Pour permettre à notre application d'accéder aux données de temps d'attente de notre serveur, notre architecture exploite Cloud Functions for Firebase. Cloud Functions nous permet de définir une fonction 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 via une requête HTTP.
L'étape suivante consiste à nous assurer que les données sont à jour pour l'utilisateur. Pour ce faire, nous avons configuré un minuteur à l'aide de la fonction JavaScript setInterval avec un délai avant expiration de 30 secondes. Chaque fois que le minuteur est déclenché, nous demandons une mise à jour des données sur le temps d'attente comme décrit ci-dessus. Une fois que nous aurons reçu les nouvelles données, nous devrons actualiser l'apparence des repères de carte. L'étape suivante explique comment effectuer ces modifications.
Étape 3 : Affichez les repères sur la carte
Vous pouvez désormais utiliser les 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 à l'aide de 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 div HTML:
// 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 à modifier le texte des repères et le style CSS de chaque magasin. Le code ci-dessous lit les données de temps d'attente mises à jour 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 existante sur les temps d'attente 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 plusieurs façons de se connecter à des sources de données en temps réel. Vous trouverez ci-dessous deux autres options : Firebase Cloud Messaging et Websockets. Quelle que soit l'approche que vous choisissez, veillez à prendre en compte les facteurs ci-dessous afin que votre outil de carte reste performant:
- Fréquence des mises à jour
- Volume de données
- Nombre de repères sur la carte
- Fonctionnalités matérielles et de navigateur
Firebase Cloud Messaging
Firebase Cloud Messaging est une approche push. Avec cette approche, vous enverrez des mises à jour à l'application de carte chaque fois que les données de temps d'attente seront 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, notez qu'elle nécessite de maintenir une connexion serveur persistante pour chaque navigateur exécutant l'application cartographique. Par conséquent, son exécution peut être plus coûteuse et moins robuste en cas de problèmes de connectivité.
WebSockets
Les WebSockets sont une autre approche basée sur le push pour actualiser les 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 cartographique. Les avantages fonctionnels de cette approche sont de nature similaire à ceux de Firebase Cloud Messaging. Toutefois, vous devrez peut-être effectuer des tâches supplémentaires pour configurer l'infrastructure nécessaire.
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 offre une expérience dynamique aux utilisateurs.
Étapes suivantes
Complément d'informations:
- Repères avancés – Centre Google Developers
- Créer des repères avec du code HTML personnalisé
- Cloud Functions for Firebase
- Firebase Cloud Messaging
Contributeurs
Principaux auteurs:
Jim Leflar | Ingénieur solutions Google Maps Platform
John Branigan | Ingénieur client principal Google Cloud Platform
Steve Barrett | Ingénieur solutions Google Maps Platform