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>