Tour d'horizon des nouveaux Web Components Google Maps : fonctionnalités et atouts pour accélérer vos développements cartographiques.
Google Maps Platform donne accès à un volume considérable de données géographiques précises, complètes et à jour sur les cartes, les lieux et les itinéraires. Reste qu'afficher ces données dans des éléments d'interface bien stylés exige parfois de nombreuses lignes de code et de longues heures de développement.
Dans cet article, nous passons en revue les fonctionnalités et les atouts des nouveaux Web Components Google Maps pour le développement d'applications web.
Les Web Components Google Maps, qu'est-ce que c'est ?
L'équipe Google Maps Platform a récemment lancé les Web Components, une approche inédite pour exploiter les fonctionnalités de Google Maps Platform de façon plus simple et plus rapide. Même avec une connaissance limitée de JavaScript, un développeur peut afficher une carte en quelques lignes de code. Une fois intégré, le code suit les conventions familières des autres éléments HTML. Vous trouverez quelques exemples ici d'implémentation des Web Components Maps en TypeScript, JavaScript, CSS et HTML.
Les Web Components sont un standard W3C largement adopté qui permet d'encapsuler du HTML, du CSS et du JavaScript dans un élément HTML personnalisé et réutilisable. Ces composants couvrent un large spectre, des fonctionnalités atomiques — l'affichage de la note en étoiles d'un lieu, par exemple — jusqu'à des logiques métier bien plus complexes : saisie de l'adresse physique d'un utilisateur pour la livraison e-commerce, ou affichage d'un itinéraire sur une carte avec des marqueurs et des styles de polyligne personnalisés. Les Web Components s'intègrent facilement à n'importe quel framework JavaScript, ce qui aplanit la courbe d'apprentissage, simplifie le code et en améliore la lisibilité — autant d'atouts pour développer plus vite.
Google Maps Platform tire parti des Web Components via sa bibliothèque open source Extended Component Library. Celle-ci encapsule les bonnes pratiques, le code générique, les patrons UX/UI courants, le responsive et l'accessibilité, au-delà de ce que propose nativement la Maps JavaScript API, et ramène des interfaces cartographiques complexes à ce qui équivaut, en pratique, à un seul élément HTML.
Mettre en œuvre les Web Components de Google Maps
Les Web Components map et advanced marker sont accessibles directement depuis la Maps JavaScript API : un moyen simple et rapide d'intégrer ces éléments d'interface avec très peu de JavaScript. Le composant map affiche une carte sur une page web et donne accès à des éléments cartographiques complémentaires, comme les advanced markers, directement à l'intérieur du composant map en HTML. Vous pouvez aussi adapter l'apparence de la carte à votre cas d'usage ou à votre marque grâce au styling cartographique cloud-native de Google Maps, en appliquant simplement un Map ID dans la section Google Maps de la GCP Console.
L'exemple ci-dessous montre comment afficher des informations sur un lieu, sur une carte, en n'utilisant que du HTML :
Ressources sur les Web Components Google Maps
La documentation des Web Components de la Google Maps JavaScript API est consultable ici, et la bibliothèque open source Google Maps Extended Component Library est disponible sur Github ici, ainsi que sur NPM ici. Ces ressources précieuses permettent de construire des briques réutilisables, à appeler, personnaliser et composer en quelques lignes de HTML, ce qui rend l'implémentation de la Google Maps JavaScript API nettement plus simple, plus rapide et, par conséquent, plus rentable. Écrivez-moi à [email protected] pour en savoir plus sur Google Maps Platform et les Web Components.