Calculer la distance entre deux adresses de formulaire grâce à l'api google maps

Soyez le premier à donner votre avis sur cette source.

Snippet vu 14 293 fois - Téléchargée 16 fois

Commenter

Contenu du snippet

Après avoir récupéré un script dont je ne retrouve plus la source, je l'ai adapté pour mon application : dans un formulaire qui contient une adresse de départ et une d'arrivée, javascript envoie une requête HTTP pour calculer la distance (routière) entre les deux ; avec messages d'erreur s'il ne parvient pas à trouver une des deux adresses ou si le temps de réponse est trop long (>10 secondes, code à vérifier peut-être car je débute en JS), et réécriture des adresses complètes par Google Maps.

Source / Exemple : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA09qY5o0F96_hLg4YyfFG3xRoIzq7W9kjqpTzBbn7O9wu0Oc8uhR44zTSflabpsk8CmRkpT3W0E7hSA"></script>
<script type="text/javascript">
var geocoder, location1, location2, gDir;
var sec=0;
 
	function initialize() {
		geocoder = new GClientGeocoder();
		gDir = new GDirections();
		GEvent.addListener(gDir, "load", function() {
			var drivingDistanceMiles = gDir.getDistance().meters / 1609.344;
			var drivingDistanceKilometers = gDir.getDistance().meters / 1000;
			document.form1.distance.value=parseInt(drivingDistanceKilometers);
			document.getElementById('results').innerHTML = 'Départ : ' + location1.address + '<br />Arrivée : ' + location2.address + '<br />&nbsp;';
			clearInterval(interv);
			document.getElementsByTagName('body')[0].style.cursor = 'default';
		});
	}
 
	function incremente() {
		if (sec<10)
		{
			sec++
		}
		else
		{
			alert("Désolés, nous ne parvenons pas à calculer la distance");
			clearInterval(interv);
			document.getElementsByTagName('body')[0].style.cursor = 'default';
			sec=0;
			document.getElementById('results').innerHTML = '';
			document.form1.distance.value='';
		}
	}
	
	function showLocation() {
		interv=setInterval("incremente()",1000);
		document.getElementsByTagName('body')[0].style.cursor = 'wait';
		var depart=document.forms[0].adresse_dep.value + ' ' + document.forms[0].cp_dep.value + ' ' + document.forms[0].ville_dep.value + ' ' + document.forms[0].pays_dep.value;
		var arrivee=document.forms[0].adresse_arr.value + ' ' + document.forms[0].cp_arr.value + ' ' + document.forms[0].ville_arr.value + ' ' + document.forms[0].pays_arr.value;
		geocoder.getLocations(depart, function (response) {
			
			if (!response || response.Status.code != 200)
			{
				alert("Désolés, nous ne parvenons pas à localiser l'adresse de départ");
                                clearInterval(interv);
				document.getElementsByTagName('body')[0].style.cursor = 'default';
			}
			else
			{
				location1 = {lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address};
				geocoder.getLocations(arrivee, function (response) {
					if (!response || response.Status.code != 200)
					{
						alert("Désolés, nous ne parvenons pas à localiser l'adresse d'arrivée");
                                                clearInterval(interv);
				                document.getElementsByTagName('body')[0].style.cursor = 'default';
					}
					else
					{
						location2 = {lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address};
						gDir.load('from: ' + location1.address + ' to: ' + location2.address);
					}
				});
			}
		});
	}

</script>
</head>

<body onload="initialize()">
<form id="form1" name="form1" action="" method="post"/>
<p>adresse de départ</p>
<p><label for="adresse_dep">Adresse :</label><input type="text" name="adresse_dep" /></p>
<p><label for="cp_dep">Code postal :</label><input type="text" name="cp_dep" /></p>
<p><label for="ville_dep">Ville :</label><input type="text" name="ville_dep" /></p>
<p><label for="pays_dep">Pays :</label><input type="text" name="pays_dep" /></p>
<hr />
<p>Adresse d'arrivée</p>
<p><label for="adresse_arr">Adresse :</label><input type="text" name="adresse_arr" /></p>
<p><label for="cp_arr">Code postal :</label><input type="text" name="cp_arr" /></p>
<p><label for="ville_arr">Ville :</label><input type="text" name="ville_arr" /></p>
<p><label for="pays_arr">Pays :</label><input type="text" name="pays_arr" /></p>
<hr />
<p>Distance à parcourir : <input type="text" name="distance" class="date" />&nbsp;km&nbsp;<input value="calculer" type="button" onclick="showLocation(); return false;" /></p>
<p id="results"></p>

</body>
</html>

A voir également

Ajouter un commentaire

Commentaires

Signaler
Elisee_Mozoyi
Messages postés
16
Date d'inscription
lundi 21 avril 2014
Statut
Membre
Dernière intervention
14 août 2015
 -
C'est un bon tuto
Signaler
cs_nebenobo
Messages postés
16
Date d'inscription
mardi 9 juin 2009
Statut
Membre
Dernière intervention
3 décembre 2013
 -
lol

Bon en fait le cas France-Cuba est réglé dans le script basé sur la version 3 dont je viens de donner le lien. La requête France-Cuba renvoie bien le statut "ZERO_RESULT", comme on pouvait s'y attendre.
Signaler
opossum_farceur
Messages postés
147
Date d'inscription
lundi 16 août 2004
Statut
Membre
Dernière intervention
14 novembre 2009
 -
Hi!

>cas d'un trajet France-Cuba p.ex

Ce que tout le monde ne sait pas, c'est que Google a aussi cartographié le fond des océans...
Signaler
cs_nebenobo
Messages postés
16
Date d'inscription
mardi 9 juin 2009
Statut
Membre
Dernière intervention
3 décembre 2013
 -
La source en version 3 est désormais visible ici : http://www.javascriptfr.com/code.aspx?ID=53174.
Signaler
cs_nebenobo
Messages postés
16
Date d'inscription
mardi 9 juin 2009
Statut
Membre
Dernière intervention
3 décembre 2013
 -
Certes, mais ce qui me rend dingue c'est que même si la condition n'est pas réalisée (cas d'un trajet France-Cuba p.ex), le message d'erreur 'erreur d\'adresse' n'apparaît pas...ni le message 'Erreur :' + status... (voir code). De quoi se taper la tête contre les murs.
De plus, GG Map V3 renvoie des aberrations dans les adresses, ce que ne faisait pas V2 : V3 marche très bien pour les adresses correctes, mais si on met une adresse aberrante (genre 1354568441, fsdsdfsd, France), il va parfois réussir à lui trouver une adresse existante !
Afficher les 15 commentaires
S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (cs_nebenobo)