Discussion :

[pc75]

Bonjour,

J'essaie de créer des marqueurs sur une carte via l'api google maps.
Je commence par construire ma variable sur le modèle de la FAQ :
http://javascript.developpez.com/faq...owBonAffichage

Dans ma page, j'affiche des adresses dans des champs cachés :

Code html :

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

1
2
3
4
<input type="hidden" name="nbadresses" id="nbadresses" value="2">
<div id="map-canvas"></div>
<input type="hidden" id="adresse1" value="2, rue de Rivoli<br>75004 PARIS">
<input type="hidden" id="adresse2" value="7, boulevard Magenta<br>75010 PARIS">

Voilà mon code pour créer mon tableau d'éléments :

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
var strpositions = new Array();
function TrouverAdresse()
{
	var nbadresses = document.getElementById('nbadresses').value;
	var tMarker = "["
	// Création du tableau des adresses
	for (var i = 1; i <= nbadresses; i++)
		{
		var adresse = eval("document.getElementById('adresse" + i + "').value");
		geocoder = new google.maps.Geocoder();
		geocoder.geocode( { 'address': adresse}, function(results, status)
			{
			if (status == google.maps.GeocoderStatus.OK)
				{
				var strposition = results[0].geometry.location+"";
				//Supprimer les parenthèses
				strposition = strposition.replace('(', '');
				strposition = strposition.replace(')', '');
				//Mettre en tableau les lat et lon de l'adresse courante
				strpositions = strposition.split(',');
				}
			});
alert(strpositions[0]);
				tMarker += "{'lat' :" + strpositions[0] + ", 'lon' :" + strpositions[1] + ", 'title' :'Ouvrir', 'info' :'" + adresse + "'},\n";
		}
		//Supprimer la dernière virgule
		tMarker = tMarker.substring(0,tMarker.length-1);
		//Ajouter le crochet fermant
		tMarker += "];";
//alert(tMarker);
}

Le alert(strpositions[0]); m'affiche undefined.
Pourtant j'ai l'impression que mes déclarations sont correctes, non ?

Si quelqu'un voit où je fais une erreur ?

Merci.

[Bovino]

Tout d'abord

Code :

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

var adresse = eval("document.getElementById('adresse" + i + "').value");

Quelle est ici l'intérêt d'utiliser l'immonde eval() ?

Sinon, ta variable strpositions est définie (via le mot clé var) dans la fonction de rappel de la méthode geocode(). Elle n'existe donc que dans le contexte de celle-ci et quand tu essayes d'y accéder en dehors de cette fonction, ben... elle n'existe logiquement plus. D'où le undefined.

[pc75]

Re,

Merci de ton intervention.

Pour ta 1ère remarque :

Quelle est ici l'intérêt d'utiliser l'immonde eval() ?

Je ne connais pas à l'avance le nombre de champs cachés.
Je les crée dynamiquement depuis les données d'une BDD.
Je ne vois pas quelle autre méthode je pourrai utiliser.

Pour ta 2ème remarque :
La variable strpositions (au pluriel) est bien définie au niveau global, non ?
C'est la variable strposition (au singulier) qui est déclarée dans la fonction geocode().

Merci.

[Bovino]

Il n'y a aucune raison d'utiliser eval() dans ce contexte...

Code :

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

var adresse = document.getElementById('adresse' + i).value;

est largement suffisant. De plus, c'est aussi une mauvaise pratique de définir une variable à l'intérieur d'une boucle puisqu'une boucle ne crée pas de contexte spécifique.

Pour revenir à ton problème, effectivement, je n'avais pas fait attention au pluriel...
En fait, tu obtiens undefined parce que la méthode geocode() est asynchrone, donc quand tu sors de la fonction de rappel, les réponses n'ont pas encore été reçues et ta variable n'est pas valorisée.

[pc75]

OK, merci pour le eval.

J'ai également sorti la déclaration de ma boucle.

Et pour ma variable undefined, il existe une solution ?
(Je ne suis pas un pro de javascript).

[Kaamo]

Met l'alert à l'intérieur de la fonction
Dis toi que strpositions n'est visible QUE à l'intérieur de cette fonction. Donc, si des traitements utilisent cette variable, mets les dans la fonction.

On appelle ce genre fonction : une fonction de rappel (callback function).
Cela veut dire que cette fonction est exécutée une fois que geocode a fini son boulot.

Cela a un nom : le Continuation-Passing Style. Le fait de dire à JavaScript, exécute cette fonction quand tu as fini d'exécuter cette fonction.

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
geocoder.geocode( { 'address': adresse}, function(results, status) {
  if (status == google.maps.GeocoderStatus.OK) {
    var strposition = results[0].geometry.location+"";
    //Supprimer les parenthèses
    strposition = strposition.replace('(', '');
    strposition = strposition.replace(')', '');
    //Mettre en tableau les lat et lon de l'adresse courante
    strpositions = strposition.split(',');
 
    alert(strpositions[0]);
  }
});