Post-its dynamiques dans l'API Google Maps pour React

Je ne savais pas quoi faire pour mon prochain projet personnel, mais je savais que je voulais intégrer une API robuste et riche en fonctionnalités. Je suis allé avec Google Maps.

Parce qu'il est si largement utilisé, il existe une multitude de documentation et de tutoriels, à la fois de Google et des nombreux programmeurs juniors et seniors qui ont mis en œuvre ses services.

J'avais travaillé avec l'API YouTube Data sur un projet précédent. J'avais donc déjà configuré une console de développeur et connaissais l'enregistrement et le processus d'obtention d'une clé API. Ces étapes sont assez simples, soit dit en passant.

Avec très peu de codage et quelques conseils utiles de quelques blogs, j'ai déposé une carte dans un nouveau projet React et j'ai commencé à expérimenter certaines fonctionnalités. Je n'ajouterai pas à la multitude de messages documentant le processus de configuration étape par étape - même si je vais y toucher. Au lieu de cela, je vais discuter de la façon dont j'ai développé une fonctionnalité particulière.

Ce site est une excellente ressource pour les projets React en ce qui concerne la configuration et la mise en œuvre des composants Maps. Une fois que vous avez installé @react-google-maps/api, tout ce dont vous avez besoin pour ajouter une carte de base sont les composants LoadScript et GoogleMap pour le chargement et l'affichage des cartes, respectivement.

C'est aussi simple que ça. Vous pouvez voir qu'il n'y a que des spécifications mineures ajoutées ici pour modifier l'apparence par défaut.

Une caractéristique commune que de nombreuses applications basées sur des cartes utilisent sont les marqueurs rouges distinctifs, qui désignent un point d'intérêt, généralement le résultat d'une recherche ou d'une entrée d'utilisateur. Comme la plupart des fonctionnalités, les marqueurs sont un composant avec de nombreux accessoires intégrés qui ne représentent qu'une petite partie de l'écosystème Google Maps.

Souvent, à côté des marqueurs, se trouvent des balises contextuelles, connues sous le nom d'InfoWindows, qui affichent des informations textuelles lorsque l'utilisateur clique ou fait défiler le marqueur. J'ai pensé qu'il serait intéressant de rendre ces InfoWindows plus dynamiques, permettant la saisie et la suppression de l'utilisateur, chacun agissant comme une sorte de post-it pour le marqueur.

Voici la partie carte de mon BaseMapContainer :

Je n'entrerai pas dans tout ici, mais le code ci-dessus spécifie l'apparence par défaut de ma carte - j'ai les coordonnées de Columbus Circle à New York comme centre - et crée la fonctionnalité permettant à un utilisateur de déposer des marqueurs puis d'agir sur eux.

Si un utilisateur sélectionne un marqueur donné, la fenêtre d'informations inclut mon composant NotesContainer, qui comprend un formulaire de saisie, une liste de notes et un composant de note pour supprimer et modifier des notes. Je transmets également l'emplacement du marqueur comme accessoire, de sorte que toutes les informations essentielles sont stockées au même endroit.

Pardonnez le style inélégant, mais voici la fonction de post-it facile en action.

Pour tous ceux qui plongent leurs orteils dans le jeu API ou qui cherchent à expérimenter dans un système rempli de fonctionnalités, l'API Google Maps est un excellent endroit où se tourner.