Javascript trop rapide !

**glucoz21** · 16/04/2010, 09h08

Bonjour à tous.

Voilà 2 jours que je suis sur du Google map via du Javascript pour un programme C# et il y a un petit souci que je n'arrive pas à résoudre.

Pour vous expliquer le fonctionnement de mon application. Je dois être capable, via mon formulaire, de charger un fichier CSV qui contient des adresses, le javascript doit les afficher sur la carte et je dois voir affichée la liste de tous mes points à droite et pouvoir cliquer sur un élément pour le faire apparaitre sur la carte.

Seulement voilà, j'ai l'impression que le Javascript s'exécute trop rapidement, du coup mes points sont bien placés sur la carte mais les infobulles affichées ne correspondent pas (en général ce sont toutes les mêmes correspondant au dernier élément de mon fichier CSV).

Le seul moyen que j'ai trouvé c'est d'ajouter un alert dans le javascript au début de ma boucle afin de mettre "en pause" le javascript pour chaque élément ce qui permet d'avoir les bonnes choses d'affichées (les bons marqueurs, les bonnes infobulles et quand on clique sur un élément dans la liste, ça affiche le bon marqueur avec la bonne infobulle).

J'ai tout essayé mais je ne vois pas comment empêcher d'afficher un alert pour que cela fonctionne.

Merci de me dire ce que vous en pensez.
Je vous joins le code de ma page HTML avec les commentaires qui vont bien.

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<!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>Google Maps</title>
    <style type="text/css">
        v\:*
        {
            behavior: url(#default#VML);
        }
    </style>
 
    <script src="http://maps.google.com/maps?file=api&v=2&key=maCle"
        type="text/javascript"></script>
 
    <script src="mapiconmaker.js" type="text/javascript"></script>
 
    <script type="text/javascript">
 
            // Déclarations 
            var map = null;
            var geocoder = null;
            var route = null;
            var points = [];
            var routes = [];
            var dernierPoint = null;
            var totalDistance = 0;
            var tabMarker = new Array();
            var tableauMarqueurs = new Array();
            var tableauInfoBulle = new Array();
            var ListeLienHref = "";
            var nbAdresse = 0;
            var resultat = "vrai";
            var arrayLigne = new Array();
            var arrayArgs = new Array();
            var arrayListeAffichee = "";
 
            // Chargement de la page, affichage de la carte et des différents contrôles à afficher sur la carte
            // Ajout de la méthode d'affichage des coordonnées au bas de la carte ainsi que le calcul de distance
            function load() {
                try {
                    map = new GMap2(document.getElementById("map"));
                    geocoder = new GClientGeocoder();
                }
                catch (ex) { alert("Vous devez être connecté à Internet..."); }
                if (map != null) {
                    //Centrer la carte sur "Dijon"(Latitude, Longitude) : zoom = 15
                    map.setCenter(new GLatLng(47.3231, 5.04194), 15);
                    new GKeyboardHandler(map); //flèches clavier activées
                    map.addControl(new GLargeMapControl()); //Zoom
                    map.addControl(new GMapTypeControl()); //Type de carte
                    map.setMapType(G_NORMAL_MAP);
                    map.addControl(new GOverviewMapControl()); //Aperçu général
                    map.addControl(new GScaleControl()); //Echelle
                    map.enableScrollWheelZoom(); // Contrôle du zoom à la souris
                    //Enregistrer l'événement 'clic' de la carte
                    GEvent.addListener(map, 'click', function(overlay, point) {
                        if (point) {
                            var latLngStr = 'Latitude - Longitude ';
                            var distance = 0;
                            if (dernierPoint) //calcul de la distance
                            {
                                distance = dernierPoint.distanceFrom(point);
                                totalDistance = totalDistance + distance;
                                distance = Math.round(distance * 10) / 10;
                            }
                            dernierPoint = point;
                            latLngStr += '(' + point.y + ', ' + point.x + ') ' + distance + 'm => total=' + Math.round(totalDistance * 10) / 10 + 'm';
 
                            var coordonnees = document.getElementById("coordonnees");
                            coordonnees.innerHTML = latLngStr;
                            //ajouter les points à la route
                            if (route) { map.removeOverlay(route); }
                            points.push(point);
                            if (points.length > 1) {
                                route = new GPolyline(points);
                                map.addOverlay(route);
                                routes.push(route);
                            }
                        }
                    });
                }
            }
 
            function showListAddress(listArgs) 
            {
                listArgs = listArgs.substring(0,listArgs.length-1);
                //alert(listArgs);
                arrayLigne = listArgs.split("&");
                // arrayArgs = listArgs.split("|");
                for(x in arrayLigne)
                {
// Alert magique. S'il n'y est pas, le javascript s'exécute trop vite et la liste n'est pas remplie.
                    alert("Veuillez patienter");
                    arrayArgs = arrayLigne[x].split("|");
                    if (geocoder) 
                    {
                        geocoder.getLatLng(arrayArgs[0], function(point) 
                        {
                            if (!point) 
                            {
                                geocoder.getLatLng(arrayArgs[2],function(point2)
                                {
                                    if(!point2)
                                    {
                                        //alert(arrayArgs[0] + " non trouvé");
                                        // nbAdresse++;
                                    }
                                });
                            }
                            else {
                                map.setCenter(point, 15);
                                ListeLienHref += '<ul>';
 
                                var newIcon = MapIconMaker.createMarkerIcon({ width: 40, height: 40, primaryColor: "red" });
 
                                var marker = new GMarker(point, { icon: newIcon });
 
// On ajoute le marqueur sur la carte
                                map.addOverlay(marker);
                                var contenuInfoBulle = '<h3>' + arrayArgs[5] + '</h3>' + arrayArgs[1] + '<br/>' + arrayArgs[2] + '<br/>' + arrayArgs[3]
               // On lui associe l'infobulle créée                 marker.openInfoWindowHtml(contenuInfoBulle);
                                //Enregistrer l'événement 'clic' du marqueur
                                GEvent.addListener(marker, 'click', function() { marker.openInfoWindowHtml(contenuInfoBulle); });
                                // Remplissage de la variable de retour (renvoyée à C# pour affichage dans une listView)
                                arrayListeAffichee += arrayArgs[5] + "|";
                                tabMarker[nbAdresse] = marker;
                                tableauInfoBulle[nbAdresse] = contenuInfoBulle;
// Remplissage de la chaine contenant les liens Href pour un affichage directement en HTML
                                ListeLienHref += '<li><a href="javascript:clickLien(' + nbAdresse + ')">' + arrayArgs[5] + '</a></li>';
                                nbAdresse++;
                                //alert("alert de test");
                            }
                        }
                        );
                    }
                }
                alert("C'est fini !!");
                ListeLienHref += '</ul>';
                document.getElementById("EmplacementDeLaListe").innerHTML = ListeLienHref;
                return arrayListeAffichee;
            }
 
 
            function clickLien(indice) 
            {
                tabMarker[indice].openInfoWindowHtml(tableauInfoBulle[indice]);
            }
 
    </script>
 
</head>
<body onload="load()" onunload="GUnload()">
    <h1>
        Utilisation de Google Maps pour trouver les coordonnées
    </h1>
    <!--<div id="map" style="width: 1000px; height: 600px">
    </div>-->
    <div id="map" style="width: 100%; height: 500px">
    </div>
        Coordonnées : <span id="coordonnees"></span>
 
</body>
</html>

**Gsnalf** · 16/04/2010, 09h36

Ca n'a pas de sens ce que tu dis là, ce n'est pas parce qu'un code est trop rapide que ça va provoquer un décalage entre tes infobulles associés à tes points et tes point eux-même

**glucoz21** · 16/04/2010, 10h12

Non en fait je me suis mal exprimé ...

Le problème est au niveau du retour de ma liste contenant les adresses trouvées.

Si je ne met pas l'alert et que j'ai 10 adresses, ma liste sera composée de 10 adresses identiques. Or sur la carte, les points seront placés correctement.

Si je met l'alert, j'ai bien mes 10 adresses placées correctement et les 10 bonnes valeurs dans la liste (après avoir cliqué 10 fois sur OK).

J'ai l'impression donc que sans l'alert, la liste n'a pas le temps de se remplir...

Invité · 16/04/2010, 15h27

Bonjour,

Peut-être aller voir de ce coté
http://code.google.com/apis/ajax/pla...#event_closure

A+

**Gsnalf** · 16/04/2010, 16h35

J'ai trouvé ton pb et comme l'a montré notre monsieur jlmag, tu as un pb avec les closures.

Passe par une fonction tierce qui elle va t'ajouter l'event en fonction des paramètres que tu lui passes, ça téviteras d'avoir une closure pareil

**papa6** · 17/04/2010, 10h01

Bonjour,

Je suis exactement sur le même problème : script qui se termine malgré l'attente des réponse de GMaps (même si je n'utilise pas directement ton interface).

Je n'ai pas compris ces closure (bien que j'utilise le script GG 'initialize' montré par votre lien)

Voici ce que j'ai essayé, là encore en vain

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type='text/javascript'>
window.onload = function(){
initialize();
var posi = new Array();
while(typeof(posi)=='undefined' || posi == Array())
    {
    posi = showLocation('adresse ville');
    alert('posi plutot ok : ' + posi);
    remplitChamps(posi);
    confirm('intermediaire ok');
    }
alert('totalement fini');
};
</script>

avec les fonctions initialize et showLocation ok (trouvées sur les forums dédiés gg maps et testées 'ok' sur mon site)

Le problème : j'ai l'alerte 'totalement fini' qui s'affiche alors que la variable posi (un tableau longitude+latitude) n'a pas eu le temps d'être retourné

Si vous avez des idées, merci

PS : je sais, c'est un problème récurrent à JS, que l'exécution d'un script sans attendre le retour des variables, à cause du simple 'onLoad' incomplet...)

**kevin3921** · 19/04/2010, 09h05

Bonjour à tous ! je travaille actuellement avec glucoz21, je ne vois pas ce que la fonction initialize() peur apporter de plus à mon code....

en effet une fonction similaire est deja présente :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
function initialize(te) 
            {
                geocoder.getLatLng(te, function (point) 
                {
                    if (point) 
                    {
                        map.addOverlay(new GMarker(point));
                        map.setCenter(new GLatLng(point.lat(), point.lng()), 6);     
                    }
                });
            }

le parametre te est simplement une phrase comme : "10 rue de la prefecture, 21000 Dijon, France"...
Malgré cette fonction, si je ne mets pas un alert pour en quelque sorte ralentir l'execution, la fonction m'oubli des points sur la carte

**papa6** · 19/04/2010, 10h40

Bonjour Kevin,

Je crois que le problème de fond reste qu'il faut du temps, pas mal de temps d'ailleurs, à Google Maps d'aller chercher les coordonnées d'un point et de les retourner dans notre propre page.

En attendant, nous-même avons appelé des fonctions Javascript avec 'onLoad', c'est-à-dire dès que la page se charge, parfois notre page n'a pas fini d'être chargée que le script est déjà lancé

Les 'alert' ne sont que des astuces pour ralentir (on ne doit pas programmer comme ça) ou alors en phase de programmation pour informer qu'on est à telle ou telle étape (c'est mon utilisation, après je les fais disparaître).

Le sempiternel problème de javascipt, dont ici :
comment faire pour que le script se lance sans brûler les étapes ?

Ce problème revient assez régulièrement, mais, à moins d'avoir mal regardé, je n'ai pas trouvé de réponse précise sur la FAQ JS
Quant à l'EventClosure, j'ai l'impression que c'est une fonction propre à GG

Merci pour vos idées si vous en avez

PS : pour rester anonyme, prenez un autre exemple que "rue de la préfecture" sinon vous allez éveiller la curiosité

**kevin3921** · 19/04/2010, 11h01

"rue de la préfecture" n'était qu'une adresse au hasard

Je pense avoir trouvé une astuce:

- Je crée un String du coté de C# contenant toute mes adresses séparés par un caractére spécial (pour moi 'µ').
- Une fois la chaine complète je fais appel à une fonction JS qui Split ma chaine.
- Je fais ensuite appel à une fonction qui recherche sur Google map si mon adresse est présente (si oui je la stock dans un array).

Je dois ensuite clicker sur un bouton pour afficher mes adresses (une fonction se chargera de lister toutes les adresses de l'array crée ci-dessus et de les afficher sur la map avec une infobulle appropriée).

Cela semble fonctionner pour le moment, cela dit il y a l'air d'avoir encore des problèmes avec des CSV de grandes tailles...

Invité · 19/04/2010, 15h40

Bonjour,

Avec un code de ce style (bon, j'ai pas le temps de tester!)

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
<!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>Google Maps</title>
    <style type="text/css">
        v\:*
        {
            behavior: url(#default#VML);
        }
    </style>
 
    <script src="http://maps.google.com/maps?file=api&v=2&key=maCle"
        type="text/javascript"></script>
 
    <script src="mapiconmaker.js" type="text/javascript"></script>
 
    <script type="text/javascript">
 
        // Déclarations 
        var map = null;
        var geocoder = null;
        var route = null;
        var points = [];
        var routes = [];
        var dernierPoint = null;
        var totalDistance = 0;
        var tabMarker = new Array();
        var tableauMarqueurs = new Array();
        var tableauInfoBulle = new Array();
        var ListeLienHref = "";
        var nbAdresse = 0;
        var resultat = "vrai";
        var arrayLigne = new Array();
        var arrayArgs = new Array();
        var arrayListeAffichee = "";
 
        // Chargement de la page, affichage de la carte et des différents contrôles à afficher sur la carte
        // Ajout de la méthode d'affichage des coordonnées au bas de la carte ainsi que le calcul de distance
        function load() {
            try {
                map = new GMap2(document.getElementById("map"));
                geocoder = new GClientGeocoder();
            }
            catch (ex) { alert("Vous devez être connecté à Internet..."); }
            if (map != null) {
                //Centrer la carte sur "Dijon"(Latitude, Longitude) : zoom = 15
                map.setCenter(new GLatLng(47.3231, 5.04194), 15);
                new GKeyboardHandler(map); //flèches clavier activées
                map.addControl(new GLargeMapControl()); //Zoom
                map.addControl(new GMapTypeControl()); //Type de carte
                map.setMapType(G_NORMAL_MAP);
                map.addControl(new GOverviewMapControl()); //Aperçu général
                map.addControl(new GScaleControl()); //Echelle
                map.enableScrollWheelZoom(); // Contrôle du zoom à la souris
 
                //Enregistrer l'événement 'clic' de la carte
                GEvent.addListener(map, 'click', function(overlay, point) {
                    if (point) {
                        var latLngStr = 'Latitude - Longitude ';
                        var distance = 0;
                        if (dernierPoint) //calcul de la distance
                        {
                            distance = dernierPoint.distanceFrom(point);
                            totalDistance = totalDistance + distance;
                            distance = Math.round(distance * 10) / 10;
                        }
                        dernierPoint = point;
                        latLngStr += '(' + point.y + ', ' + point.x + ') ' + distance + 'm => total=' + Math.round(totalDistance * 10) / 10 + 'm';
 
                        var coordonnees = document.getElementById("coordonnees");
                        coordonnees.innerHTML = latLngStr;
 
                        //ajouter les points à la route
                        if (route) { map.removeOverlay(route); }
                        points.push(point);
                        if (points.length > 1) {
                            route = new GPolyline(points);
                            map.addOverlay(route);
                            routes.push(route);
                        }
                    }
                });
            }
        }
 
        function showListAddress(listArgs) 
        {
            listArgs = listArgs.substring(0,listArgs.length-1);
            //alert(listArgs);
            arrayLigne = listArgs.split("&");
            // arrayArgs = listArgs.split("|");
 
            ListeLienHref += '<ul>'; // début de la liste non ordonnée
            for(x in arrayLigne)
            {
                // Alert magique. S'il n'y est pas, le javascript s'exécute trop vite et la liste n'est pas remplie.
                //alert("Veuillez patienter");
                arrayArgs = arrayLigne[x].split("|");
                if (geocoder) 
                {
                    geocoder.getLatLng(arrayArgs[0], function(point) 
                    {
                        if (!point) 
                        {
                            geocoder.getLatLng(arrayArgs[2],function(point2)
                            {
                                if(!point2)
                                {
                                    //alert(arrayArgs[0] + " non trouvé");
                                    // nbAdresse++;
                                }
                            });
                        }
                        else
                        {
                            tabMarker[nbAdresse] = createMyMarker(point, nbAdresse, arrayArgs);
                            map.addOverlay(tabMarker[nbAdresse]);
                            arrayListeAffichee += arrayArgs[5] + "|";
                            ListeLienHref += '<li><a href="javascript:clickLien(' + nbAdresse + ')">' + arrayArgs[5] + '</a></li>';
                            nbAdresse++;
                        }
                    });
                }
            }
            alert("C'est fini !!");
            ListeLienHref += '</ul>'; // fin de la liste non ordonnée
            document.getElementById("EmplacementDeLaListe").innerHTML = ListeLienHref;
 
            // centrage de la carte sur le dernier point
            map.setCenter(tabMarker[nbAdresse - 1].getLatLng());
            return arrayListeAffichee;
        }
 
        function createMyMarker(point, nbAdresse, arrayArgs)
        {
            var myMarker = new GMarker(point, { icon: newIcon });
            var myIcon = MapIconMaker.createMarkerIcon({ width: 40, height: 40, primaryColor: "red" });
            myMarker.infoBulle = '<h3>' + arrayArgs[5] + '</h3>' + arrayArgs[1] + '<br/>' + arrayArgs[2] + '<br/>' + arrayArgs[3];
 
            GEvent.addListener(myMarker, 'click', function()
            {
                myMarker.openInfoWindowHtml(myMarker.infoBulle);
            });
 
 
            // Info console (FF)
            if(console) console.log(arrayArgs[5] + "\n\t" + arrayArgs[1] + "\n\t" + arrayArgs[2] + "\n\t" + arrayArgs[3]);
 
            return myMarker;
        }
 
        function clickLien(indice) 
        {
            tabMarker[indice].openInfoWindowHtml(tabMarker[indice].infoBulle);
        }
 
    </script>
 
</head>
<body onload="load()" onunload="GUnload()">
    <h1>Utilisation de Google Maps pour trouver les coordonnées</h1>
    <div id="map" style="width: 100%; height: 500px"></div>
    Coordonnées : <span id="coordonnees"></span>
 
</body>
</html>

A+

**kevin3921** · 19/04/2010, 16h16

Non cela ne fonctionne pas, toujours le même problème

**papa6** · 19/04/2010, 18h26

Merci jlmag,
je vais tester puis vous tiens au courant.

À la 7e ligne de ton code, il est écrit :

Code :

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

 v\:*

Est-ce normal ?

**Bovino** · 19/04/2010, 19h12

@papa6 : ton problème n'a rien à voir avec celui de glucoz21 et kevin3921, c'est juste que ta condition du while n'a aucun sens, donc JavaScript ne passe pas dedans

Code :

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

1
2
var posi = new Array();
while(typeof(posi)=='undefined' || posi == Array())

puisque tu viens de déclarer posi, elle ne peut pas valoir 'undefined' et encore moins Array().

Merci donc de créer une autre discussion si tu n'arrives pas à régler ça...

@ glucoz21 et kevin3921
A priori, votre problème vient du fait que la récupération des coordonnées se fait via AJAX de façon asynchrone, donc effectivement, JavaScript n'attend pas les réponses et continue son exécution. Donc, quand les valeurs arrivent, ce sont bien les valeurs de la dernière boucle qui sont traitées.
Votre exemple fonctionne en rajoutant le alert, car alert bloque l'exécution de JavaScript et donne le temps de récupérer les informations avant de passer à la boucle suivante.

Invité · 19/04/2010, 22h08

Re,

voici un exemple qui devrait aider, enfin j'espère!

pour le js:

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
 
var map = null;
var geocoder = null;
var tabMarker = [];
var ul = null;
var info = outer();
 
var adrs = [
  "5, Rue du Lycée, 21000, Dijon, Bourgogne, France",
  "10, Rue de la Chouette, 21000, Dijon, Bourgogne, France",
  "1, Rue Diderot, 21000, Dijon, Bourgogne, France",
  "10, Rue de la Préfecture, 21000, Dijon, Bourgogne, France"
];
 
function load()
{
  if (GBrowserIsCompatible())
  {
    map = new GMap2(document.getElementById("map"));
    map.setCenter(new GLatLng(47.3231, 5.04194), 15);
    new GKeyboardHandler(map); //flèches clavier activées
    map.addControl(new GLargeMapControl()); //Zoom
    map.addControl(new GMapTypeControl()); //Type de carte
    map.setMapType(G_NORMAL_MAP);
    map.addControl(new GOverviewMapControl()); //Aperçu général
    map.addControl(new GScaleControl()); //Echelle
    map.enableScrollWheelZoom(); // Contrôle du zoom à la souris
 
    geocoder = new GClientGeocoder();
 
    var btnShowMarker = document.getElementById("btnShowMarker");
    btnShowMarker.onclick = function(){showListAddress(adrs)};
  }
}
 
function showListAddress(listAdrs) 
{
  ul = document.getElementById("EmplacementDeLaListe");
  for(var x = 0, nb = listAdrs.length; x < nb; x++)
  {
 
    if (geocoder) 
    {
      geocoder.getLatLng(listAdrs[x], function(point) 
      {
 
        if (!point) 
        {
           if(console) console.log("pas de point ");
        }
        else
        {
            var y = info();
 
            tabMarker[y] = createMyMarker(point, listAdrs[y]);
            map.addOverlay(tabMarker[y]);
 
            // création de la liste
            var li = document.createElement("li");
            li.innerHTML = '<a href="javascript:clickLien(' + y + ')">' + listAdrs[y] + '</a>';
            ul.appendChild(li);
 
            // centrage de la carte sur le dernier point
            map.setCenter(point);
        }
      });
    }
  }
}
 
// une closure, tien!
function outer()
{
    var count = 0;
    function inner(){return count++};
    return inner;
}
 
function createMyMarker(point, arrayArgs)
{
  console.log("arrayArgs :" + arrayArgs);
    arrayArgs = arrayArgs.split(",");
    var myIcon = MapIconMaker.createMarkerIcon({ width: 40, height: 40, primaryColor: "red" });
    var myMarker = new GMarker(point, {icon: myIcon});
    myMarker.infoBulle = '<h3>' + arrayArgs[5] + '</h3>' + arrayArgs[0] + " " + arrayArgs[1] + '<br/>' + arrayArgs[2] + " " + arrayArgs[3];
 
    // gestionnaire click sur marker
    GEvent.addListener(myMarker, 'click', function()
    {
        myMarker.openInfoWindowHtml(myMarker.infoBulle);
    });
 
    // Info console (FF)
    if(console) console.log(arrayArgs[5] + "\n\t" + arrayArgs[0] + " " + arrayArgs[1] + "\n\t" + arrayArgs[2] + " " + arrayArgs[3]);
 
    return myMarker;
}
 
function clickLien(indice) 
{
    tabMarker[indice].openInfoWindowHtml(tabMarker[indice].infoBulle);
}

pour le html:

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
<!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" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Google Maps</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=laCleQuiVaBien" type="text/javascript"></script>
    <script src="js/mapiconmaker.js" type="text/javascript"></script>
    <script src="js/scripts.js" type="text/javascript"></script>  
</head>
<body onload="load()" onunload="GUnload()">
  <input type="button" value="showMarker" id="btnShowMarker" />
  <div id="map" style="width: 550px; height: 450px"></div>
  <ul id="EmplacementDeLaListe"></ul>
</body>
 
</html>

voili, voilà.

a+

PS: le bouton est au-dessus de la carte

rePS: le js est dans le répertoire js

**kevin3921** · 21/04/2010, 08h50

En fait j'ai réussi à regler le problème, la solution n'est surement pas la meilleur :
J'utilise un settimeout() a la fin de ma fonction (qui rappelle une autre fonction 200ms plus tard) qui remplit ma liste ainsi que mes points sur ma carte.
L'utilisation du settimeout car je passe bcp de parametre pour remplir la liste ainsi que les infobulles, si le temps d'attente est trop cours, ma liste ainsi que mes infobulles seront mal remplit.

Ma fonction :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
            //Fonction qui appel la fonction d'insertion des adresses
            function insertionAdresse(indice, typeInsertion) 
            {
                inser(0, indice - 1);
                if (typeInsertion == "normal") 
                {
                    var indiceTab = indice + 1;
                    if (indiceTab < nbAdresse +1) {
                        setTimeout("showListAddress(tableau[indiceTab], indiceTab);", 210);
                    }
                }
            }

La fonction inser() insère les marqueurs sur ma carte et remplit egalement ma liste. Tout à la fin j'appel ma fonction showlistAdress() qui elle va rechercher via Google Map si l'adresse existe ou non.

Invité · 21/04/2010, 14h04

Bonjour,

D'après ce que j'ai compris:

Le nombre d'adresses dont on recherche les coord. est connu (arrayLigne.length).

Il est donc possible de se baser sur ce nombre (nbAdr) en le décrémentant (voir la closure) pour connaître la fin des recherches et d'émettre un timeout au niveau de chaque demande au cas ou la com ne répond pas.

L'attente de la fin des recherches étant réalisée via un while(nbAdr > 0){}. Ce qui, ma fois, gèle le navigateur. Mais avec une info pour l'utilisateur pas de problème.

Sinon, il faut tester le nbAdr à chaque fin de recherche pour lancer la mise à jour de la liste.

A+

Javascript trop rapide !

JavaScript

Discussions similaires

Partager

Partager