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 101 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
opossum_farceur
Messages postés
148
Date d'inscription
lundi 16 août 2004
Statut
Membre
Dernière intervention
14 novembre 2009
 -
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!
Signaler
defis91
Messages postés
66
Date d'inscription
samedi 29 octobre 2005
Statut
Membre
Dernière intervention
8 août 2011
 -
Ç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
Signaler
cs_nebenobo
Messages postés
16
Date d'inscription
mardi 9 juin 2009
Statut
Membre
Dernière intervention
3 décembre 2013
 -
@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é.
Signaler
defis91
Messages postés
66
Date d'inscription
samedi 29 octobre 2005
Statut
Membre
Dernière intervention
8 août 2011
 -
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
Signaler
cs_nebenobo
Messages postés
16
Date d'inscription
mardi 9 juin 2009
Statut
Membre
Dernière intervention
3 décembre 2013
 -
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 ?
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)