Discussion :

[pierro38]

Bonjour à tous,

Je cherche actuellement à développer un petit outil qui ferait la chose suivante : à parti d'une adresse de destination, et de plusieurs adresses d'origine, on geocoderait ces adresses de destination (avec le service Geocoding), puis on calculerait le temps de transport entre chaque origine et la destination (Distance Matrix).

Le gros problème : je suis pas (du tout) un expert et javascript.

Le problème du moment : l'utilisateur saisit dans un textarea les adresses d'origine, séparées par un retour chariot. en utilisant la fonction split(), je range chaque adresse dans un tableau. Je boucle ensuite sur chaque élément du tableau, et envoie le bouzin au petit Google pour qu'il me retourne les coordonnées et l'adresse retournée que j'affiche dans un second textarea. Mais j'aimerais aussi afficher l'adresse saisie l'utilisateur, afin qu'il puisse comparer avec l'adresse retournée par google. Et ca, ca ne marche pas... Je pense que c'est juste un problème de passation de valeurs, mais je ne m'en sors pas...

Merci pour votre aide (et votre indulgence)

PJ

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
 
var adresse_en_cours;
 
function geocodage() {
	var adresses =  document.getElementById('liste_origine').value;
	var liste_adresse = adresses.split('\n');
 
	//On boucle sur chaque adresse contenue dans le tableau
	for(var i= 0; i < liste_adresse.length; i++)
	{
		 adresse_en_cours = liste_adresse[i];
 
		 //Géocodage
		 geocoder.geocode( { 'address': adresse_en_cours}, function(results, status) 
		 {
 
			if (status == google.maps.GeocoderStatus.OK)
			{
				//Si le statut est ok, on écrit le résultat dans la page
				map.setCenter(results[0].geometry.location);
				//adresse_en_cours est toujours égal au dernier élément du tableau...
				document.getElementById('resultat').value += "Adresse|"+adresse_en_cours+"|Lat|" + results[0].geometry.location.lat() + "|Long|" + results[0].geometry.location.lng() + "|Adresse retenue|" + results[0].formatted_address + "\n";
				var marker = new google.maps.Marker({
				map: map,
				position: results[0].geometry.location
				});
			} 
			else 
			{
				document.getElementById('resultat').value += "Erreur \n";
			}
		});
		//Fin géocodage
 
	}
}

[Spartacusply]

"Ca marche pas" n'est pas un message d'erreur.

Dans le code que tu montres, tu n'itializes pas l'objet geocoder.

Il faut que tu debug ton script, les erreurs javascript apparaissent dans la console du navigateur (touche F12 sous chrome, extension firebug sous firefox).

As-tu bien chargé la librairie geocode lors de ton import de maps ?

L'api google maps regorge d'explication et d'exemples : https://developers.google.com/maps/d...g-simple?hl=fr

[pierro38]

Bonjour,

Merci pour votre aide !

En fait, dans la portion de code que j'ai envoyé, le seul problème que j'ai est à la ligne 23, lorsque je modifie le contenu de mon textarea 'resultat'.

Les coordonnées et l'adresse formatée s'inscrivent correctement (puisque tout a été initialisé auparavant), mais la variable 'adresse_en_cours' à toujours la valeur du dernier élément du tableau, alors même que pour géocoder, j'utilise cette même variable qui me renvoie une réponse logique... Je pense faire une erreur sur la portée de la variable adresse_en_cours, que j'ai pourtant déclaré hors des fonctions...

Pour être plus clair, je joins au post le code en entier

PJ

[Spartacusply]

En fait, ta boucle continue alors que la fonction geocode n'a pas encore renvoyé le résultat, qui est une fonction asynchrone (ton script continue même si la fonction n'a pas rendue son verdict). Du coup, au final seul le dernier géocodage fonctionne correctement car le précédent est réécrasé à chaque tour de boucle avant même de se terminer.

Une possibilité de palier à ce problème serait de faire d'appeler une autre fonction dans ta boucle for, en créant l'objet geocode dans cette fonction justement :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
function geocodageAddresses() { 
       for(var i= 0; i < liste_adresse.length; i++)
            geocodageAddress(liste_adresse[i]);
        }
    }

[pierro38]

Voilà, c'est cette info qu'il me manquait, ca marche du tonnerre, merci beaucoup !

Bonne fin de journée

PJ

[NoSmoking]

Bonjour,
il existe également la solution de passer par un closure, ce qui évite de créer une fonction supplémentaire, cela pourrait donner cela

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
function geocodage() {
    var geocoder = new google.maps.Geocoder();
    var adresses = document.getElementById('liste_origine').value;
    var liste_adresse = adresses.split('\n');
 
    //On boucle sur chaque adresse contenue dans le tableau
    for (var i = 0; i < liste_adresse.length; i++) {
 
        (function (adresse_en_cours) {
 
            //Géocodage
            geocoder.geocode({
                'address': adresse_en_cours
            }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    //Si le statut est ok, on écrit le résultat dans la page
                    map.setCenter(results[0].geometry.location);
                    //adresse_en_cours est toujours égal au dernier élément du tableau...
                    document.getElementById('resultat').value += "Adresse|" + adresse_en_cours + "|Lat|" + results[0].geometry.location.lat() + "|Long|" + results[0].geometry.location.lng() + "|Adresse retenue|" + results[0].formatted_address + "\n";
                    var marker = new google.maps.Marker({
                        map: map,
                        position: results[0].geometry.location
                    });
                } else {
                    document.getElementById('resultat').value += "Erreur \n";
                }
            }); //Fin géocodage
        })(liste_adresse[i]);  // on passe en paramètre la donnée à traiter
    }
}

Remarque :
Il serait peut être intéressant que tu gères également l'erreur google.maps.GeocoderStatus.OVER_QUERY_LIMIT.