Guides

Ajouter un calculateur de distance jusqu'au magasin sur une page d'atterrissage

« À quelle distance de moi se trouve votre point de vente le plus proche » est une question à laquelle une page d'atterrissage peut répondre directement, au lieu d'envoyer le visiteur sur une carte séparée pour qu'il trouve la réponse lui-même.

Géocoder la saisie du visiteur

Prenez l'adresse ou le code postal que le visiteur saisit dans un simple champ de formulaire et géocodez-le.

GET /v1/forward?q=350 Fifth Avenue, New York&limit=1
{
  "status": "ok",
  "results": [
    {"formatted": "350 Fifth Avenue, New York, NY", "lat": 40.7484, "lon": -73.9857, "type": "address", "precision": "house", "confidence": 0.96, "place_id": "es234", "components": {}}
  ]
}

Calculer la distance jusqu'à chaque magasin

Une fois les coordonnées du visiteur obtenues, calculez la distance à vol d'oiseau entre ce point et chacun de vos magasins, dont vous conservez les coordonnées sous forme de liste fixe dans votre propre code, à l'aide d'une formule de haversine standard.

for store in stores:
    store.distance_km = haversine(store.lat, store.lon, 40.7484, -73.9857)

Afficher le résultat

Triez votre liste de magasins selon la distance calculée et affichez le plus proche, ou les quelques plus proches, avec la distance correspondante. Comme tout s'exécute côté serveur à l'envoi du formulaire, aucun script côté client n'est nécessaire : la page affiche simplement le résultat au chargement suivant.

Un second exemple : afficher les trois plus proches au lieu d'un seul

Plutôt que d'indiquer uniquement le magasin le plus proche, trier la liste complète et afficher les trois premiers offre au visiteur un vrai choix, ce qui est particulièrement utile lorsque le magasin le plus proche a peut-être d'autres horaires ou un autre stock qu'un magasin un peu plus éloigné que le visiteur préférerait en réalité. Cela ne coûte rien de plus, puisque le tri se fait sur les mêmes coordonnées issues de la même requête unique.

Gérer une correspondance peu fiable

Si l'adresse saisie par le visiteur revient avec un score de confiance faible, montrez-lui le résultat formaté pour confirmation avant de lancer le calcul de distance, plutôt que d'annoncer avec assurance une distance fondée sur une supposition quant à ce qu'il voulait dire.

Une erreur courante à éviter

Ne lancez pas le calcul de distance sur une requête résolue avec une précision bien plus grossière que celle que le visiteur visait probablement, par exemple un simple nom de ville ou de région correspondant à un résultat de type « locality », sans le signaler d'abord au visiteur. Une distance calculée à partir d'un centre-ville plutôt que de la rue réelle du visiteur peut être fausse de plusieurs kilomètres dans un sens ou dans l'autre, assez pour changer le magasin qui paraît le plus proche. Vérifier le champ de précision avant d'annoncer une distance qui semble sûre évite de présenter une estimation approximative comme une valeur exacte.

Laisser le visiteur choisir parmi des correspondances ambiguës

Porter limit au-delà de 1 dans la requête de géocodage renvoie plusieurs correspondances candidates lorsque la saisie est réellement ambiguë, par exemple un nom de rue qui existe dans plusieurs villes. Afficher cette courte liste et laisser le visiteur choisir la bonne avant de lancer le calcul de distance donne un meilleur résultat que de retenir silencieusement le candidat arrivé en tête.

Ce que cela coûte

Chaque calcul correspond à une requête de géocodage, quel que soit le nombre de magasins auxquels vous comparez les coordonnées obtenues, puisque la liste des magasins ne nécessite aucun autre appel d'API une fois les coordonnées du visiteur connues. Une page d'atterrissage au trafic conséquent utilise cette fonctionnalité au rythme d'une requête par calcul effectué par un visiteur, bien en deçà des 2 500 requêtes gratuites par jour incluses avec chaque clé.

Un calculateur de distance comme celui-ci répond à une question précise et fréquente directement sur la page, au lieu de pousser le visiteur à chercher la réponse ailleurs. Tous les paramètres de requête figurent dans la documentation du géocodage direct.