Calcul de la distance entre deux adresses de formulaires grâce au service distance matrix de l'api google maps (version 3)

Soyez le premier à donner votre avis sur cette source.

Snippet vu 14 785 fois - Téléchargée 18 fois

Commenter

Contenu du snippet

Ce script fait suite à celui posté la semaine dernière, mais qui était en version 2 et donc voué à devenir obsolète.
Il n'est peut-être pas hyper rigoureux, dans ce cas n'hésitez pas à me faire part de vos commentaires pour que je puisse apporter les corrections nécessaires.
Comme je le précisais dans la précédente source, sachez que les messages d'erreurs ne seront plus efficaces si on utilise plus de deux adresses (c'est possible avec Distance Matrix), et qu'il faut adjoindre une carte GG Maps pour pouvoir utiliser ce service.

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/api/js?sensor=false&language=fr"></script>
<script type="text/javascript">
function CalculDistance()
{
	//récupération des champs du formulaire
	var adr_dep=document.forms[0].adresse_dep.value;
	var cp_dep=document.forms[0].cp_dep.value;
	var ville_dep=document.forms[0].ville_dep.value;
	var pays_dep=document.forms[0].pays_dep.value;
	var adr_arr=document.forms[0].adresse_arr.value;
	var cp_arr=document.forms[0].cp_arr.value;
	var ville_arr=document.forms[0].ville_arr.value;
	var pays_arr=document.forms[0].pays_arr.value;
	
	var origine=adr_dep+', '+cp_dep+', '+ville_dep+', '+pays_dep;
	var destination=adr_arr+', '+cp_arr+', '+ville_arr+', '+pays_arr;
	
	//requête de distance auprès du service DistanceMatrix, avec ici une seule adresse de départ et une seule d'arrivée
	var service = new google.maps.DistanceMatrixService();
	service.getDistanceMatrix(
	  {
		origins: [origine],
		destinations: [destination],
		travelMode: google.maps.TravelMode.DRIVING,
		unitSystem: google.maps.UnitSystem.METRIC,
		avoidHighways: false,
		avoidTolls: false
	  }, callback);
}
	
function callback(response, status)
{
	if (status != google.maps.DistanceMatrixStatus.OK)
	{
		alert('Erreur : ' + status); //message d'erreur du serveur distant GG Maps
	}
	else
	{
		//réponses du serveur (
		var origins = response.originAddresses;
		var destinations = response.destinationAddresses;
		for (var i = 0; i < origins.length; i++)
		{
			var results = response.rows[i].elements;
			var dep = origins[i];
			if(dep!='')
			{
				for (var j = 0; j < results.length; j++)
				{
					var element = results[j];
					var statut = element.status;
					var arr = destinations[j];
					if(statut=='OK')
					{
						var dist = element.distance.value;
						document.forms[0].distance.value=parseInt(dist/1000);//distance en km
						document.getElementById('results').innerHTML = 'Départ : ' + dep + '<br />Arrivée : ' + arr + '<br /><br />';
					}
					else if(statut=='NOT_FOUND')
					{
						alert("impossible de localiser l'adresse d'arrivée");
					}
					else if(statut=='ZERO_RESULTS')
					{
						alert("impossible de calculer cette distance");
					}
				}
			}
			else
			{
				alert("impossible de localiser l'adresse de départ");
			}
		}
	}
}
</script>
</head>

<body>
<form id="form1" name="form1" action="" method="post"/>
<p><strong>Départ</strong></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><strong>Arrivée</strong></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" />&nbsp;km&nbsp;<input value="calculer" type="button" onclick="CalculDistance();" /></p>
<p id="results"></p>
</form>
</body>
</html>

A voir également

Ajouter un commentaire Commentaires
Drh
21 avril 2016 à 22:20
Bonsoir , d'abord merxi pour ce tuto ,.net veux savoir est ce que c'est possible d'afficher l'heure de la distance ?! J'attend votre réponse avec impattiente
Nash
29 déc. 2015 à 19:43
Bonjour, super script, comment est-ce que je pourrais obtenir un Prix en € en fonction des kilomètres obtenu via ce formulaire ?
Merci.
Anass sk
13 mai 2015 à 18:36
Merciii beaucoup !
Droukou
8 juil. 2014 à 17:27
Thanks !!
cs_nebenobo Messages postés 16 Date d'inscription mardi 9 juin 2009 Statut Membre Dernière intervention 3 décembre 2013
30 mai 2011 à 09:53
Salut, la doc est donnée par Google, en Anglais hélas :
http://code.google.com/intl/fr-FR/apis/maps/documentation/javascript/services.html#distance_matrix
Pour l'API en mode HTTPRequest, récupération JSON et XML :
http://code.google.com/intl/fr-FR/apis/maps/documentation/distancematrix/
Et pour la syntaxe des différents objets :
http://code.google.com/intl/fr-FR/apis/maps/documentation/javascript/reference.html#DistanceMatrixService
Bonne lecture !
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)