CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2012 05 28 12:45:30

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

Tutoriaux

> CALCULER LA DISTANCE ENTRE DEUX ADRESSES DE FORMULAIRE GRÂCE À L'API GOOGLE MAPS

CALCULER LA DISTANCE ENTRE DEUX ADRESSES DE FORMULAIRE GRÂCE À L'API GOOGLE MAPS

Information sur la source

Note :

9,00 / 10

Catégorie :Tutoriaux Classé sous :Google Maps, Distance Matrix, distance routière, kilométrage, calcul distance Niveau :Initié Date de création :10/05/2011 Date de mise à jour :17/05/2011 16:40:29 Vu :3 323

Auteur : nebenobo

Ecrire un message privé

Commentaire sur cette source (14)

Ajouter un commentaire et/ou une note

Description

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

<!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 /> ';
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" /> km <input value="calculer" type="button" onclick="showLocation(); return false;" /></p>
<p id="results"></p>
</body>
</html>

<!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>

Historique

13 mai 2011 12:51:00 :: J'ai rajouté un clearInterval remis le curseur par défaut à la fin de l'alerte sur l'adresse de départ et sur celle d'arrivée
17 mai 2011 13:07:47 :: Bonjour à tous, voici le nouveau code en version 3 car comme l'a précisé opossum_farceur dans son premier commentaire la version 2 est dépréciée. Ici, plus besoin de bricolage pour une réponse claire du service (en l'occurrence, le service Distance Matrix). Notez que ce service peut calculer les distances entre plusieurs adresses à la fois (cf origins: [origine1,origine2,etc]) mais que les messages d'erreurs de ce script ne fonctionnent qu'avec deux adresses. Sachez également que Google n'autorise l'utilisation de ce service qu'à condition d'y adjoindre une carte Google Map...
17 mai 2011 16:40:29 :: Je viens de poster le nouveau script utilisant la v.3 de l'API Google Maps. Voir à cette adresse : http://www.javascriptfr.com/codes/CALCUL-DISTANCE-ENTRE-DEUX-ADRESSES-FORMULAIRES-GRACE-SERVICE_53174.aspx

Sources du même auteur

CALCUL DE LA DISTANCE ENTRE DEUX ADRESSES DE FORMULAIRES GRÂ...

Toutes les sources de nebenobo

Sources de la même categorie

POUR LES DÉBUTANTS EN JAVASCRIPT par lecurieux41

RÉCEPTION DE SMS EN JAVASCRIPT par hhoareau

APPELER, UN NUMÉRO DE TÉLÉPHONE GRÂCE À UNE ICÔNE SUR L'ÉCRA... par Rainbow

CSS3 TRANSFORM par kazma

FAIRE UN CV EN HTML VIA XML ET DU XSL par antour

Toutes les sources de la catégorie Tutoriaux

Sources en rapport avec celle ci

CALCUL DE LA DISTANCE ENTRE DEUX ADRESSES DE FORMULAIRES GRÂ... par nebenobo

CARTE GOOGLE MAPS par CodeurleGeek

Commentaires et avis

Commentaire de opossum_farceur le 10/05/2011 23:08:25

Hi!
A en croire le contenu de la page :
http://www.weboblog.fr
"Depuis mai 2010, la version 2 de l'Api Google Map est dépréciée."
Mais bon, çà ne veut pas dire pour autant que la V3 marche mieux!

Commentaire de defis91 le 11/05/2011 14:47:39 9/10

Ça marche et c'est bien utile pour le calcul des frais kilométriques...
Change le charset utf-8 avec :
<meta http-equiv="Content-Type" content="text/html; charset=window-1251" />

... si tu utilise des voyelles accentuées dans les textes.

Dom

Commentaire de nebenobo le 11/05/2011 15:22:52

@defis91 : merci pour l'info (et la note) mais utf-8 n'est pas universel, justement ? Qu'est ce qui pose problème en fait, les messages d'alerte ou le fait de rentrer des accents dans les champs du formulaire ?

@opossum_farceur : exact, je n'avais pas vu, je suis en train de bosser sur la même appli en version 3 mais je ne trouve pas la syntaxe pour faire apparaître les messages d'erreur. Je poste dès que c'est réglé.

Commentaire de defis91 le 11/05/2011 15:36:29

Tu peux coder les voyelles accentuées en UTF-8 si tu veux, mais le plus simple et d'indiquer que tu les a codées en mode Windows et tu les tapes en direct.
Pour ne pas avoir de problème avec le charset, tu peux les coder en HTML
par exemple é est codé é

A+
Dom

Commentaire de nebenobo le 12/05/2011 09:23:53

C'est vrai que je n'ai pas le réflexe des é et compagnie, mauvaise habitude Dreamweaver...
Bon, concernant l'API en version 3, j'ai un code qui marche (enfin de mon côté, car les réponses de Google Maps étaient bien plus cohérentes en version 2 comme le présupposait opossum_farceur), mais je n'arrive pas à générer de message d'erreur sur les éléments de la matrice de réponse (voir http://code.google.com/intl/fr-FR/apis/maps/documentation/javascript/services.html#distance_matrix_element_status_codes): l'API ne me renvoie jamais le code NOT_FOUND ou ZERO_RESULTS lorsque je rentre des adresses incohérentes ou que je demande la distance routière entre France et Cuba, elle se contente de ne pas réagir. Je précise que je ne connais pas la syntaxe (GG n'est pas très clair là-dessus) à employer et que j'utilise l'instruction (if (element.status=='OK'){}).
Quelqu'un a une idée ?

Commentaire de opossum_farceur le 12/05/2011 14:50:47

Hi!
Peut-être faudrait-il d'abord que tu respectes un peu plus la syntaxe du code dont tu as fourni l'adresse!
(Attention, la V3 est nettement moins permissive que la V2)

Commentaire de nebenobo le 12/05/2011 15:35:21

Justement, je n'ai aucune idée de la syntaxe à employer car Google est très évasif là-dessus : quels sont les objets qu'on trouve dans le groupe "DistanceMatrixElement objects" ? Et même en supposant que je connaisse l'objet sur lequel interroger le statut, quelle serait la syntaxe ? j'ai mis l'instruction (if (element.status=='OK'){}) parce qu'elle marche, mais j'y suis allé au pif.
Voici le bout de code appelant le calcul :

function callback(response, status)
{
if (status == google.maps.DistanceMatrixStatus.OK)
{
var origins = response.originAddresses;
var destinations = response.destinationAddresses;

for (var i = 0; i < origins.length; i++)
{
var results = response.rows[i].elements;
for (var j = 0; j < results.length; j++)
{
var element = results[j];
var dist = element.distance.value;
var dep = origins[i];
var arr = destinations[j];
if (element.status=='OK')
{
document.forms[0].distance.value=parseInt(dist/1000);
document.getElementById('results').innerHTML = 'Départ : ' + dep + '<br />Arrivée : ' + arr + '<br /><br />';
}
else
{
alert ('erreur d\'adresse');
}
}
}
}
else
{
alert('Erreur : ' + status);
}
}
Si tu connais la syntaxe exacte, je t'en serai reconnaissant...
Pour l'API v2, je n'avais pas de réponse spécifique, c'est pourquoi j'avais bricolé l'outil "curseur wait + tempo 10s + alerte", mais c'était pas très rigoureux.
Je compte poster bientôt un calcul d'itinéraire sur lequel je bosse en v3 mais j'aimerais régler cette histoire d'erreurs de requêtes.
@+

Commentaire de opossum_farceur le 12/05/2011 20:27:36

Hi!
Je ne connais pas, hélas, la syntaxe exacte. Ma connaissance de l'api V3 se borne d'ailleurs à la conversion d'un script V2 (qui marchait très bien) en un script V3 plus délicat à gérer.
J'ai regardé un peu ton code, il me semble que, bloqué au point où tu es arrivé, tu devrais essayer d'afficher tous les champs constitutifs de chaque rangée (dont le fameux champ "status" qui t'enquiquines tant!), çà devrait permettre de disposer de plus d'informations et peut-être de débloquer l'affaire...

Commentaire de nebenobo le 13/05/2011 10:25:54

Salut.
En fait, si comme seule instruction je lui demande alert(element.status), il me renvoie 'OK' lorsque la requête est correcte (adresses valides), par contre si je lui demande un France-Cuba ou que je rentre des adresses aberrantes il ne me renvoie rien alors que d'après Google (voir mon lien) il devrait me renvoyer respectivement 'ZERO_RESULT' et 'NOT_FOUND'.
Ce script me rend fou.

Commentaire de opossum_farceur le 13/05/2011 16:35:52

Hi!
Tu arrives malgré tout à déterminer quand il y a erreur, quand la condition (element.status=='OK') n'est pas réalisée.
Et puis il faut bien reconnaître que entre 'ZERO_RESULT' et 'NOT_FOUND', c'est un peu "bonnet blanc" et "blanc bonnet"...

Commentaire de nebenobo le 13/05/2011 16:58:41

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 !

Commentaire de nebenobo le 23/05/2011 13:12:53

La source en version 3 est désormais visible ici : http://www.javascriptfr.com/code.aspx?ID=53174.

Commentaire de opossum_farceur le 23/05/2011 14:54:07

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...

Commentaire de nebenobo le 23/05/2011 15:16:53

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.

Ajouter un commentaire

Nos sponsors

Derniers Blogs

IMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg

KINECT 1.5 IS OUT ! par Vko

LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc

REACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITER par Groc

SHAREPOINT BLOG SITE, PROBLèME D'ARCHIVES par junarnoalg

Forum

MULTI SLIDER UNE SEUL PAGE par karouani

RE : CODE POUR FAIRE APPARAîTRE UN TEXTE EN DESSOUS D'UN LIEN par emuleed2k

RE : RéCUPERATION D'UNE VARIABLE DE JAVASCRIPT VIA PHP par smahaneAAI

POPUP OUVERT à PARTIR D'UN IFRAME par mrassaa

UTILISER UN .JS par zaikoe

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Recheche Web Master pour MAJ de plateformes Musical
Budget : 500€
Realisation d-une version 2 d-un site e-commerce existant sous prestashop-REPUBLICATION
Budget : 5 000€
Recherche Infogerance Serveur Debian Linux
Budget : 1 800€

Logiciels

sDEVIS-FACTURES vlPRO (8.1.0.3)
SDEVIS-FACTURES VLPRO (8.1.0.3)

sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa...

Cliquez pour télécharger sDEVIS-FACTURES vlPRO
974 Application Server (12.2.4.6)
974 APPLICATION SERVER (12.2.4.6)

Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc...

Cliquez pour télécharger 974 Application Server
vPicture (1.4.2.1)
VPICTURE (1.4.2.1)

Avec vPicture, hébergez vos images facilement et rapidement. vPicture est un utilitaire simple, ...

Cliquez pour télécharger vPicture
Easy-Planning (2.2.1.6)
EASY-PLANNING (2.2.1.6)

Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au...

Cliquez pour télécharger Easy-Planning
COM-BACKUP (2.0)
COM-BACKUP (2.0)

COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...

Cliquez pour télécharger COM-BACKUP