Google Maps API : pb events dans boucle for

cs_philou8 Messages postés 6 Date d'inscription samedi 20 mars 2010 Statut Membre Dernière intervention 16 février 2012 - 12 sept. 2011 à 21:35
cs_philou8 Messages postés 6 Date d'inscription samedi 20 mars 2010 Statut Membre Dernière intervention 16 février 2012 - 16 sept. 2011 à 16:26
Bonjour,
Je créé des polygones cliquables sur une carte.
J'essaie de créé un évènement dans une boucle "for" pour chaque zone cliquable, le tout dans la fonction load().
Je ne vois pas le problème, qui doit néanmoins sauter aux yeux.
Dans cet exemple simplifié, deux zones sont créées, lorsque je clique sur l'une d'entre elle, je dois voir son nom dans une boite de dialogue; j'affiche en fait la valeur "undefined".
Merci de m'aider
Trachy
voici le lien à la page :
www.paysagesdefrance.com/essai.htm
Voici le script :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Application Paysages de France</title>
<style type="text/css">
#map{
position:absolute;top:10px;left:10px;width:1000px; height: 750px
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script language="JavaScript" src="../libraryV3/markermanager_packed.js" type="text/JavaScript"></script>

<script type="text/javascript">
// initialisation avec centre de la carte et zoom initial
var latcentrecarto = 46.54;
var longcentrecarto = 2.416;
var zoominitialcarto = 6;

// initialisation des demi largeur/hauteur des zones touristiques

var demihauteurzonetouristique = 0.116;
var demilargeurzonetouristique = 0.347;


// initialisation des zones touristiques avec le nom et la lattitude, longitude du centre de la zone
var nomzone=[];
var latcentrezone =[];
var longcentrezone =[];

// Bassin d'Arcachon
nomzone[0]= "Bassin d Arcachon";
latcentrezone[0]= 44.6897998686099;
longcentrezone[0]= -1.1421918869018554;
// Côte Basque
nomzone[1]= "Côte Basque";
latcentrezone[1]= 43.415678458962645;
longcentrezone[1]= -1.5047407150268554;


function load() {

//construction de la carte

var mymap;

var centreCarte = new google.maps.LatLng(latcentrecarto, longcentrecarto);
     	var optionsCarte = {
          zoom: zoominitialcarto,
          center: centreCarte,
          mapTypeId: google.maps.MapTypeId.SATELLITE
  };
     	  mymap = new google.maps.Map(document.getElementById("map"), optionsCarte);

        //construction des polygones réactifs correspondant aux Zones touristiques
var myzone =[];
var tableaupointspolygone =[];

 for(i=0;i<latcentrezone.length;i++){
tableaupointspolygone[i]= [
          new google.maps.LatLng(latcentrezone[i]-demihauteurzonetouristique,longcentrezone[i]   +demilargeurzonetouristique),
          new google.maps.LatLng(latcentrezone[i]-demihauteurzonetouristique,longcentrezone[i]-demilargeurzonetouristique),
          new google.maps.LatLng(latcentrezone[i]+demihauteurzonetouristique,longcentrezone[i]-demilargeurzonetouristique),
          new google.maps.LatLng(latcentrezone[i]+demihauteurzonetouristique,longcentrezone[i]+demilargeurzonetouristique)];
       
 var optionsZone = {
          clickable: true,
          fillColor: "#00AAFF",
  fillOpacity: 0.5,
  map: mymap,
          paths: tableaupointspolygone[i],
          strokeColor:"#FFAA00",
  strokeOpacity: 1,
  strokeWeight:1,
  zIndex:5
  };
       myzone[i]= new google.maps.Polygon(optionsZone);

//Evènement : affichage du nom de la zone touristique au clic de la souris dans celle-ci
google.maps.event.addListener (myzone[i],"click", function() {
alert(nomzone[i]);
});
 }
return;}
</script>
</head>




</html>

   

2 réponses

pmcoste Messages postés 72 Date d'inscription mercredi 7 février 2007 Statut Membre Dernière intervention 25 juillet 2013 1
16 sept. 2011 à 16:20
Après analyse rapide de ton code, je pense que le pb se trouve certainement à la dernière ligne :

//Evènement : affichage du nom de la zone touristique au clic de la souris dans celle-ci
google.maps.event.addListener(myzone[i],"click", function() {
alert(nomzone[i]);
});


En effet, lorsque l'utilisateur cliquera sur la zone "myzone[i]", le navigateur exécutera la function () {alert(nomzone[i]);}. Le navigateur prendra la valeur de la variable i à cet instant qui n'est pas celle de myzone[i]


---------------------
Oderint dum metuant
0
cs_philou8 Messages postés 6 Date d'inscription samedi 20 mars 2010 Statut Membre Dernière intervention 16 février 2012
16 sept. 2011 à 16:26
Merci,
J'ai effectivement rectifié en appelant une function dans la boucle "for" à laquelle je passe le paramètre i.
La fonction quant à elle crée l'évènement.
Tarchy
0