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

Ce site au démarrage

begin process at 2012 05 28 12:43:02

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

Formulaire

> CALCUL DE LA DISTANCE ENTRE DEUX ADRESSES DE FORMULAIRES GRÂCE AU SERVICE DISTANCE MATRIX DE L'API GOOGLE MAPS (VERSION 3)

CALCUL DE LA DISTANCE ENTRE DEUX ADRESSES DE FORMULAIRES GRÂCE AU SERVICE DISTANCE MATRIX DE L'API GOOGLE MAPS (VERSION 3)

Information sur la source

Note :
Aucune note

Catégorie :Formulaire Classé sous :Distance Matrix, calcul distance, Google Maps, Javascript, kilométrage Niveau :Débutant Date de création :17/05/2011 Date de mise à jour :17/05/2011 22:47:54 Vu :3 041

Auteur : nebenobo

Ecrire un message privé

Commentaire sur cette source (5)

Ajouter un commentaire et/ou une note

Description

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

<!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" /> km <input value="calculer" type="button" onclick="CalculDistance();" /></p>
<p id="results"></p>
</form>
</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/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&eacute;part : ' + dep + '<br />Arriv&eacute;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&eacute;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>

Historique

17 mai 2011 22:47:54 :: juste remis le formulaire en Français (je l'avais d'abord posté sur le forum de Google Maps API).

Sources du même auteur

CALCULER LA DISTANCE ENTRE DEUX ADRESSES DE FORMULAIRE GRÂCE...

Toutes les sources de nebenobo

Sources de la même categorie

FORMULAIRE TABLEAU par vic511

FORMULAIRE DYNAMIQUE par Niidhogg

CONTRAINTE DE SAISIE SUR CHAMPS INPUT par ryosama

SELECTS DÉPENDANTS PRÉ-CHARGÉS D'UNE SEULE OPTION par phm

BOITE DE DIALOGUE MODALE DE SÉLECTION D'UNE LISTE D'ICONES par JJDai

Toutes les sources de la catégorie Formulaire

Sources en rapport avec celle ci

FORMULAIRE TABLEAU par vic511

SUBDIVISER LE RÉSULTAT D'UNE RECHERCHE EN PAGES par kimmp

CALCULATRICE HEURE par m22001111

COPIER DU TEXTE par m22001111

CALCULER LA DISTANCE ENTRE DEUX ADRESSES DE FORMULAIRE GRÂCE... par nebenobo

Commentaires et avis

Commentaire de DarkC0 le 17/05/2011 18:59:31

Salut nebenobo,

j'ai essayé ton code et il marche bien, franchement tu a poster un bon code qui me seras utile.

Bonne continuation.

Commentaire de nebenobo le 17/05/2011 23:16:46

Merci, c'est toujours cool d'avoir un bon feedback quand on a passé pas mal de temps sur un script !

Commentaire de varioflux le 28/05/2011 15:05:12

Pas mal

Commentaire de ROGFEDERER le 29/05/2011 22:06:03

Bonjour,

Super Script !
Bravo à toi pour ce joli boulot !
Tu sais où je peux trouver une documentation sur Distance Matrix ?
Comment faire pour faire un calcul d'itinéraire avec X étapes ?

Merci & bien à toi !

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

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 !

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

lien javascript [ par ilimo ] bonjour....peut-on rendre un lien actif et inactif avec javascript ?ex : a et b sont deux liens html...quand je clique sur a, la page liée à a s'af select case en javascript [ par Juju ] je cherche une sorte un select case mais en javascript, pouvez vous me donner la syntaxe MerciJuju javascript dans formulaire acrobat [ par domi ] "Envoie par mèl du contenu du formulaire"j'ai écrit deux lignes simple en javascript dans un formulaire acrobat, il fonctionne bien avec Acrobat "prog Lien javascript [ par yoyo ] Salut tout le monde,g un petit pb,g un lien qui est une image et quand je clique dessus, je lance une fonction javascript.Sur IE, pas de probleme mais Colle pour les pros du javascript [ par Manu ] Bonjour,je propose aux passionnés de javascript de relever un défi. J'ai téléchargé les fichiers pour un menu en DHTML/JavaScript (fichiers .css et Javascript & unload ?????????? [ par Léa ] Hello Utilisant javascript, la fonction onUnload me permet correctement de capturer l'evenement de fermeture de ma fenetre... sauf que la touche F5 ou fonction javascript [ par phil ] Bonjourvoici mon pb: function changeFrame(frame1,frame2){ top.nomdeframe1.location=frame1 top.nomdeframe2.location=frame2 comment doit-on écrire ce sc Besoin urgent d'une fonction Javascript [ par David ] Bonjour,Voici le context:J'utilise des JSP dans lesquelles j'insert des tags avec des listes déroulantes en import Java.J'ai un champ text dans lequel versions javascript [ par arthur ] je cherche une récapitulatif contenant les fonctionnalités de chaque version de javascript de 1.0 à 1.3 ou 1.4.merci

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

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€
Creation d-un site vitrine avec MagentO
Budget : 2 000€

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