problème de portée de variable

2 août 2011 à 16:23:19

Bonjour, voilà j'essaye d'intégrer la map de google sur un site, cela fonctionne parfaitement avec les longitudes/latitude mais j'arrive pas à le faire fonctionner avec les adresses. voici le code complet :

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=yes" />
<link rel="stylesheet" type="text/css" href="style_map.css" />
<script type="text/javascript"
    src="http://maps.googleapis.com/maps/api/js?sensor=false&language=fr">
</script>
<script type="text/javascript">
  function initialize() {
	
	var resultat;

    var latlng = new google.maps.LatLng(49.16268, 6.725342);
    var myOptions = {
      zoom: 13,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

	var map = new google.maps.Map(document.getElementById("map_canvas"),
	myOptions);

	var geocoder = new google.maps.Geocoder();
	geocoder.geocode( { 'address': "rue de 19 mars 1962,l\'hopital"},function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
  		     resultat=results[0].geometry.location;
	  }else {
          alert("Geocode was not successful for the following reason: " + status);
      }
	});

	var marker = new google.maps.Marker({
      position: resultat,
	  map: map,
      title:"Magu France"
	});

	var marker2 = new google.maps.Marker({
      position: new google.maps.LatLng(47.931296, 8.487189),
	  map: map,
      title:"Magu Allemagne"
	});

	var bulleNordEst = '<div class=\'bulle\'>'+
					   '<b>Willy Gangel</b>'+
					   '<br><br>rue du 19 Mars 1962'+
					   '<br> 57490 L\'HOPITAL'+
					   '<br>Tel: 03 87 82 05 04'+
					   '<br>Portable : 06.85.38.41.29'+
					   '<br>Mail : w.gangel@magufrance.fr'+
					   '<br>Site web : <a href=\'http://www.magufrance.fr\'>http://www.magufrance.fr</a></div>';

	var bulleAllemagne = '<div class=\'bulle\'>'+
						 '<b>MAGU BAUSYSTEME</b>'+
						 '<br><br>An der Hochstr.'+
						 '<br>78183 H&uuml;ingen'+
						 '<br>Tel: +49 771-9225-0'+
						 '<br>Fax: +49 777- 6788'+
						 '<br>Site web : <a href=\'http://www.magu.de\'>http://www.magu.de</a></div>';

	var infowindow = new google.maps.InfoWindow({
    content: bulleNordEst
	});

	var infowindow2 = new google.maps.InfoWindow({
    content: bulleAllemagne
	});

	google.maps.event.addListener(marker, 'click', function() {
  	infowindow.open(map,marker);
	});

	google.maps.event.addListener(marker2, 'click', function() {
  	infowindow2.open(map,marker2);
	});
  
	marker.setMap(map);
	marker2.setMap(map);

  }


</script>
</head>
<body onload="initialize()">
  <div id="map_canvas"></div>
</body>
</html>

Le problème se situe au niveau de là :

var geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': "rue de 19 mars 1962,l\'hopital"},function(results, status) {
  if (status == google.maps.GeocoderStatus.OK) {
  	resultat=results[0].geometry.location;
  }else {
        alert("Geocode was not successful for the following reason: " + status);
  }
});

La variable resultat que j'ai pris soin de déclarer à l'extérieur de la boucle if et de la fonction, ne fonctionne pas comme je le voudrait. Lorsque je fait un alert dans la boucle if, je récupère bien les coordonnées mais lorsque je fait un alert à l'extérieur de la boucle if, je reçoit comme message undefined alors que la variable est déclarer à l'extérieur de la boucle if et de la fonction. Ca ressemble vaguement à un problème que j'avais rencontrer avec les sous shell dans les scripts shell. Pouvez vous m'aider svp ? Merci d'avance.

andrianayann

2 août 2011 à 16:47:28

y'a des chances que je dise des bêtises, mais c'est pas parce que tu fais des modif dans une function anonyme?

Cypher5762

2 août 2011 à 17:09:23

Ben j'en sait rien même si je la nomme la fonction ça change rien. J'ai pas ce niveau en js et j'ai du mal à comprendre comment ça marche ce bout de code. Le restant du code je comprend.

Shivaan

2 août 2011 à 18:22:44

Ceci est un message pré-enregistré par un membre en ayant assez de répéter tout le temps la même chose. Lisez attentivement ce qui y est dit. Ce n'est parce qu'il est enregistré qu'il n'est pas de bon conseil.

Salut,

Je constate que tu as un peu de mal à comprendre les notions de traitements asynchrones et de callback. Je vais donc faire un parallèle en prenant un exemple concret, ce qui devrait t'aider à comprendre.

Posons comme situation que tu souhaites commander quelque chose par internet (au hasard, un livre du Zéro). Si j'écris l'algorithme de ton cerveau pendant qu'il exécute les actions, ça donne ceci :

Aller sur le site
Commander le livre
Lire le livre
S'endormir avec plein de connaissances.

Dans la vie réelle, jamais tu ne recevras le livre directement après avoir validé la commande. Il y a un délai. Dans cet exemple, la livraison est le traitement asynchrone. Et ce comportement existe aussi en JavaScript. Le script ressemble donc plus à

Aller sur le site
Commander le livre
Une fois le livre reçu {
   Lire le livre
   S'endormir avec plein de connaissances.
}

Si tu as toujours du mal à comprendre, essaie de t'imaginer en train de lire un livre que tu n'as pas dans les mains. C'est un peu dur, n'est-ce pas ? Et c'est ici qu'intervient la notion de callback. Essayons déjà de faire ressembler notre exemple à du vrai JavaScript.

// on prépare les actions dans des fonctions
function commander() {
   Aller sur le site
   Commander le livre
}
function lire(){
   Lire le livre
   S'endormir avec plein de connaissances.
}
// on exécute les fonctions
commander()
une fois le livre reçu {
   lire()
}

"une fois le livre reçu" est un évènement qui se déclenche quand le facteur a mis le colis dans la boîte. Comme le traitement est asynchrone, non seulement on a aucune idée de quand il peut se produire, mais surtout il est impossible d'effectuer le reste des actions. Le callback est donc l'action qui se mettra en route une fois l'évènement déclenché. En JavaScript, ça se traduit comme ceci :

// on prépare les actions dans des fonctions
function commander() {
   Aller sur le site
   Commander le livre
}
function lire(){
   Lire le livre
   S'endormir avec plein de connaissances.
}
// le callback est le résultat obtenu une fois le traitement asynchrone effectué, c'est donc une fonction
commander(function(){
   lire()
}

Pour en revenir au JavaScript, il est impossible d'accéder au résultat du callback juste après avoir commencé un traitement asynchrone, et je pense que tu as maintenant compris pourquoi. Es-tu capable d'accéder à la page 42 de ton bouquin juste après l'avoir commandé ? C'est pareil en JavaScript.

La règle est donc : après tout traitement asynchrone, il faut définir un callback qui sera appelé une fois le traitement terminé, et qui s'occupera des traitements qu'il reste à faire.

J'espère que cette petite explication t'aura aidé à comprendre. N'hésite pas à poser des questions s'il y a encore des incompréhensions.

Directeur technique, créateur de jeux HTML5 et fan de JavaScript | La suite de OnHack est sur les rails !

Cypher5762

2 août 2011 à 18:40:42

Merci bien de ta réponse, je ne savais pas qu'il s'agissait d'un traitement asynchrone. Pour le moment j'ai mis l'intégralité de mon code dans la boucle if mais je vais creusé sur la piste des callbacks pour avoir un code plus propre.