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 Javascript :
<!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>