Google Maps Platform permet aux clients de développer des expériences uniques en personnalisant l'apparence 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 façon dynamique en fonction de données en temps réel.
Les repères sur la carte constituent un outil utile pour offrir des expériences cartographiques riches aux utilisateurs. Les attributs de repères tels que la taille, la couleur et la forme peuvent fournir des informations supplémentaires sur chaque emplacement marqué. Dans certains cas, ces informations supplémentaires peuvent changer de façon dynamique et le développeur peut souhaiter que la carte soit mise à jour, ce qui permet à l'utilisateur de se faire une idée d'actualisation.
Dans cet article, nous utilisons un 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 encourager les utilisateurs à réserver une chambre d'hôtel lorsque le stock diminue.
- Disponibilité des places de parking: sur un plan des parkings, indiquez en toute confiance aux utilisateurs une destination qui leur proposera une place à leur arrivée.
- Restaurants ouverts, fermé 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 risque d'être fermé à leur arrivée.
Solution 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 leur système de gestion des files d'attente de départ 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 localisation à présenter aux utilisateurs. Dans ce cas, nous cherchons à afficher 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 immédiatement dans la spécification PinElement. Vous pouvez également utiliser du code HTML personnalisé pour obtenir davantage d'options de personnalisation.
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 à cinq minutes, jaune pour plus de cinq minutes
- Contenu du repère (nécessite des repères HTML personnalisés): le temps d'attente actuel, exprimé en minutes, est inclus dans le repère.
Étape 2 : Configurez 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 adaptée dépend de votre cas d'utilisation et de votre infrastructure technique. Dans cet exemple, nous utilisons une approche pull : nous demandons régulièrement les données actualisées sur le temps d'attente via des requêtes HTTP (REST). Dans les sections suivantes, vous découvrirez d'autres architectures exploitant des approches push.
Pour permettre à notre application d'accéder aux données sur le temps d'attente de notre serveur, notre architecture s'appuie sur 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 à s'assurer que les données de l'utilisateur sont toujours à jour. Pour ce faire, nous configurons 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 des données actualisées sur le temps d'attente, comme décrit ci-dessus. Une fois que nous avons reçu 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 : Affichez les repères de la carte
Nous pouvons 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 avec l'API Maps JavaScript de Google Maps Platform. Lorsque vous utilisez des repères avancés, veillez à inclure le paramètre "ID de carte" dans la requête de carte JavaScript.
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 du repère et le style CSS pour 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 de temps d'attente existante pour visualiser les temps d'attente à jour pour les utilisateurs:
Autres moyens 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. Nous allons examiner ci-dessous deux autres options : Firebase Cloud Messaging et Websockets. Quelle que soit l'approche que vous sélectionnez, veillez à tenir compte des facteurs ci-dessous afin que votre outil de carte reste performant:
- Fréquence des mises à jour
- Volume de données
- Nombre de repères dans la vue plan
- Fonctionnalités matérielles et de navigateur
Firebase Cloud Messaging
Firebase Cloud Messaging est une approche push. Avec cette approche, vous envoyez des mises à jour à l'application cartographique chaque fois que les données de temps d'attente sont mises à jour sur le backend. Les messages de mise à jour déclenchent une fonction de rappel dont le but est de mettre à jour l'apparence et le contenu du repère.
Avant de sélectionner cette architecture, il convient de tenir compte du maintien d'une connexion serveur permanente pour chaque navigateur exécutant l'application de cartographie. Par conséquent, son exécution peut s'avérer plus coûteuse et peut s'avérer moins robuste en cas de problèmes de connectivité.
WebSockets
WebSockets constituent une autre approche push qui permet de maintenir les données à jour. 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. Cette approche offre des avantages fonctionnels semblables à ceux de Firebase Cloud Messaging, mais des opérations supplémentaires peuvent être nécessaires 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 d'associer ces sources de données en fonction de la configuration requise pour la carte, du matériel et du navigateur utilisés par 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, offrant ainsi une expérience dynamique aux utilisateurs.
Actions suivantes
Documentation complémentaire:
- Repères avancés – Google Developer Center
- Créer des repères avec du code HTML personnalisé
- Cloud Functions for Firebase
- Firebase Cloud Messaging
Contributeurs
Auteurs principaux:
Jim Leflar | Ingénieur en solutions Google Maps Platform
John Branigan | Ingénieur client senior Google Cloud Platform
Steve Barrett | Ingénieur en solutions Google Maps Platform