Il est possible avec l’API Google MAP de calculer des distances entre 2 ou plusieurs points. Ici, l’exercice consiste à calculer le marker le plus proche d’un code postal envoyé via une simple requête. Autrement dit, le code fourni ci-dessous vous permettra d’afficher un résultat répondant à la question : « quel lieu proposé sur ce site est le plus proche de mon code postal ? » On est parti pour décortiquer une Google Map et le calcul kilométrique !
Le code est disponible ici (et tout en bas), mais pour en voir le résultat, il vous faudra une clé Google MAP liée à votre site web.
L’HTML
L’HTML n’est pas très conséquent. Nous allons nous contenter d’un simple formulaire avec un champ input et de type « text » ; c’est via ce formulaire que le visiteur pourra entrer son CP. L’ID de ce champ est « zip« .
La deuxième partie de l’HTML est le message dynamique qui affichera le résultat. En tout, je réceptionnerai 3 valeurs qui m’intéressent :
- Le nom du lieu le plus proche du code postal envoyé (ID : js_name)
- Les kilomètres de distance entre ce résultat et le point de départ (ID : js_km)
- et enfin le nom du lieu de départ tel que ce que Google a envoyé dans l’auto complémentation
En effet, l’API propose des suggestions en fonction de ce que l’on renseigne dans le champ de recherche. (ID : place-name)
Comme d’habitude avec l’HTML, rien de très compliqué, on prépare le terrain et on met de côté les ID des différentes balises qui seront dynamiques. Vous remarquerez que les lieux sont limités à 3 dans mon exemple. Vous pouvez ici boucler un résultat émanant d’une base de données ou d’un fichier CSV par exemple. (encore faudrait-il travailler avec autre chose que de l’HTML)
J’aurais pu également partir du fichier JS pour lister ces adresses via une API. Ici, je pars du principe que le client fourni lui-même ces adresses en texte brut. Cela tombe bien, Google comprend les adresses proposées, même si vous mettez le numéro à la fin ou le code postal au début par exemple …
Attaquons le JS
Je commence dans un premier temps à définir mes constantes. Elles m’aideront pour la suite. Vous verrez par contre que 3 d’entre-elles initient des outils Google. Les voici, avec une brève explication :
- autocomplete : c’est la librairire qui va me suggérer des choix d’adresses lors de la recherche
- geocoder : va trouver (ou non) un résultat en rapport avec ce qui a été envoyé.
- service : cette librairie-là va m’aider à calculer les distances
Ça fait beaucoup, mais ce sont bel et bien toutes ces librairies qui vont me permettre d’atteindre l’objectif visé. On passe la suite en passant la fonction runDistanceCalcul que je détaillerai par après.
Chercher le résultat et restreindre le pays
Comme cité plus haut, l’autocomplete me permettra de sélectionner mon CP.
Vous verrez à la ligne 39 qu’il est possible de restreindre les adresses par pays. C’est un tableau, donc vous pouvez très bien ajouter le code unique de plusieurs pays. Moi, j’ai choisi de limiter les recherches dans la Belgique, le code est donc [« be »]. Maintenant qu’on est prêt, l’action peut commencer. Elle commence à la ligne 43 et 50 où on appelle « autocomplete » et « geocoder » pour commencer à chercher et proposer des résultats. S’il y a un résultat trouvé, je profite par déjà écrire l’adresse de départ dans la balise html dont l’ID est « place-name« . Ensuite, j’appelle la librairie « service« .
Cette dernière va prendre en paramètre :
- la latitude et la longitude de l’adresse proposée
- les adresses des 3 lieux sous forme d’un tableau (array)
- Le mode de voyage. ici j’ai mis « driving » pour faire référence à la voiture, mais sachez que vous pouvez mettre autre chose, à pied ou à vélo par exemple. Cette librairie fonctionne en 2 temps. Une fois les paramètre renseignés, on peut passer à une autre fonction qui exploitera le résultat.
Il s’agit de la fonction runDistanceCalcul dont je vous avais parlé plus haut. C’est le point suivant.
Et pour terminer
La fonction « runDistanceCalcul » compare les résultats. Ensuite, à l’aide de la fonction sort(), je trie les résultats du plus petit au plus grand. Il suffit dès lors de prendre le 1er pour avoir le lieu le plus proche comme demandé !! Il me reste plus qu’à compléter mes balises dynamiques avec le résultat obtenu.
Le résultat est donné sous forme d’objet et c’est donc très facile de l’exploiter. Il faut utiliser la clé « distance » pour les km et la clé « name » pour le nom du lieu le plus proche.
J’en profite également pour vider le champ text de recherche afin de permettre à l’utilisateur de réaliser d’autres recherches du même type.
Pour terminer, je n’oublie pas d’afficher toute la section HTML qui était cachée jusque-là … Et voilà ! Je vous laisse le code à l’aide de coodePen mis vous verrez que sans la clé, aucun aperçu n’est possible …
Cet article est en lien avec celui-ci : styliser une google map.
Et voilà la doc officielle de Google Map. Vous verrez que je suis parti des codes repris dans les exemples d’utilisation : https://developers.google.com/maps/documentation/javascript/distancematrix?hl=fr
