/* Chargement du module "maps" dans sa version "2.x" */ google.load("maps", "2.x",{"other_params":"sensor=false"}); /* Déclaration des variables globales. Les variables déclarées au début du script, avant toute fonction, seront globales. Elles peuvent être utilisées n'importe où dans le script. */ /* Déclaration explicite de la variable "contenuListe" : Elle ne contient aucune donnée */ var contenuListe = ""; /* Déclaration explicite du tableau "tableauTypes" : Il est vide au départ */ var tableauTypes = []; /* Déclaration explicite du tableau "tableauPoints" : Il est vide au départ */ var tableauPoints = []; /* Déclaration explicite du tableau "tableauNoms" : Il est vide au départ */ var tableauNoms = []; /* Déclaration explicite du tableau "tableauAdresses" : Il est vide au départ */ var tableauAdresses = []; /* Déclaration explicite du tableau "tableauCodePostaux" : Il est vide au départ */ var tableauCodePostaux = []; /* Déclaration explicite du tableau "tableauVilles" : Il est vide au départ */ var tableauVilles = []; /* Déclaration explicite du tableau "tableauCoordonnees" : Il est vide au départ */ var tableauCoordonnees = []; /* */ var tableauSites = []; /* Déclaration explicite de la variable "maCarte" */ var maCarte; /* Déclaration explicite de la variable "i" égale à 0 */ var i = 0; /* Création d'un variable aléatoire "trompeCacheIE" afin de tromper le cache d'IE et forcer ainsi le chargement du fichier .xml*/ var hasard = new Date(); var trompeCacheIE = hasard.getMilliseconds(); /* Déclaration explicite de la variable "urlData" : Elle contient le chemin et le nom du fichier contenant les données des sociétés, nécessaire à la construction de la carte. */ /* Attention : Si vous recopiez ces exemples, assurez-vous que votre fichier principal et le fichier data.xml sont sur le même serveur. Dans le cas contraire, cela ne fonctionnera pas, et votre liste restera désespérément vierge. */ var urlData = "http://www.basket-essonne.fr/xml/data.xml"; /* Fonction initialize() */ function initialize() { /* Si le navigateur est compatible avec l'API de Google Maps ... */ if (google.maps.BrowserIsCompatible()) { /* ... Création d'une nouvelle carte nommée "maCarte" qui s'affichera à l'intérieur de la balise
ayant pour identifiant id="EmplacementDeMaCarte" ... */ maCarte = new google.maps.Map2(document.getElementById("EmplacementDeCarteGlobale")); maCarte.addControl(new google.maps.SmallMapControl()); maCarte.addControl(new google.maps.MenuMapTypeControl()); /* ... La carte nommée "maCarte" est centrée sur le point ayant pour Latitude 47.391174 et Longitude 0.722265, avec un niveau de zoom égal à 9. */ maCarte.setCenter(new google.maps.LatLng(48.652418,2.301636), 11); /* Création d'une nouvelle instance de l'objet XmlHttpRequest à la sauce Google nommé "requeteHTTP" (en gros on prépare une requète XmlHttpRequest et on l'appelle "requetteHTTP") */ var requeteHTTP = google.maps.XmlHttp.create(); /* On spécifie pour la requete nommée "requeteHTTP" : */ /* Le type de requête : "GET" */ /* Le chemin/fichier ciblé : urlData */ /* Le mode de transmission de la requête : true = asynchrone */ requeteHTTP.open("GET", urlData + "?" + trompeCacheIE, true); /* A l'aide de "onreadystatechange" on vérifie le changement d'état de la requête nommée "requeteHTTP" */ requeteHTTP.onreadystatechange = function() { /* Si le code d'état passe à 4 qui signifie "prêt" : la requête a été exécutée avec succès et les données correctement transmises */ if (requeteHTTP.readyState == 4) { /* "xmlDoc" contient les données, sous la forme d'un fichier ".xml", chargées depuis la requête nommée "requeteHTTP" */ /* Autrement dit, "xmlDoc" contient les données fournies par http://www.touraineverte.com/Google-Maps/data.xml */ var xmlDoc = requeteHTTP.responseXML; /* Déclaration explicite de "marqueurs" qui contient, sous la forme d'un tableau, */ /* les informations, limitées aux seules balises "marker", extraites */ /* de "http://www.touraineverte.com/Google-Maps/data.xml". */ /* La variable "marqueurs" a une portée limitée à cette seule fonction, */ /* c'est-à-dire qu'elle n'est pas nutilisable ailleurs */ var marqueurs = xmlDoc.documentElement.getElementsByTagName("marker"); /* Ajout à la variable "contenuListe" la balise '; /* Affiche dans la balise ayant pour identifiant id="EmplacementDeLaListe" le code html contenu dans la variable nommée "contenuListe" */ document.getElementById("EmplacementDeLaListe").innerHTML = contenuListe; } } /* Effectue la requête nommée "requeteHTTP" */ requeteHTTP.send(null); /* Si le navigateur n'est pas compatible avec l'API de Google Maps ... */ }else{ /* ... affichage du message "Désolé, mais votre navigateur n'est pas compatible avec Google Maps". */ alert('Désolé, mais votre navigateur n\'est pas compatible avec Google Maps'); } } /* fonction CreationInfoBulle(point,latitude,longitude,nom,adresse,codepostal,ville,type) */ /* Elle permet l'insertion des différentes informations dans les différents tableaux en */ /* fonction de l'indice "i", ainsi que la construction de la liste des sociétés = "contenuListe" */ function CreationInfoBulle(point,latitude,longitude,nom,adresse,codepostal,ville,site,type) { /* Les "latitude" et "longitude" sont placées dans le tableau nommé "tableauCoordonnees" à l'indice "i" */ tableauCoordonnees[i] = latitude + ", " + longitude; /* Les "latitude" et "longitude" sont placées dans le tableau nommé "tableauPoints" à l'indice "i" */ tableauPoints[i] = point; /* Le "nom" de la société est placé dans le tableau nommé "tableauNoms" à l'indice "i" */ tableauNoms[i] = nom; /* L' "adresse" de la société est placée dans le tableau nommé "tableauAdresses" à l'indice "i" */ tableauAdresses[i] = adresse; /* Le "codepostal de la société est placé dans le tableau nommé "tableauCodePostaux" à l'indice "i" */ tableauCodePostaux[i] = codepostal; /* La "ville" de la société est placée dans le tableau nommé "tableauVilles" à l'indice "i" */ tableauVilles[i] = nom; /* Le "type" de la société est placé dans le tableau nommé "tableauTypes" à l'indice "i" */ tableauTypes[i] = type; /* */ tableauSites[i] = site; /* On ajoute le lien javascript vers la société dans "contenuListe" */ contenuListe += '
  • ' + nom + '
    • '; /* Incrémente "i" */ i++; } /* fonction actionClickLien(i) : Cette fonction permet l'ouverture de l'info-bule, correspondant au lien cliqué contenu dans la liste de droite, grâce à son indice "i" */ function actionClickLien(i) { /* Création de la variable "contenuInfoBulle" en fonction de l'indice "i" transmis à la fonction "actionClickLien(i)". */ contenuInfoBulle = "Club : "+tableauNoms[i] /* +"
    President : "+tableauTypes[i]*/ +"
    Gymnase : "+tableauAdresses[i] +"
    Correspondant : "+tableauTypes[i] +"
    Tel : "+tableauCodePostaux[i] +"
    Infos : "+''+"Détails complémentaires"+"" +"
    Coordonnées GPS : "+tableauCoordonnees[i]; /* Ouvre une info-bulle sur la carte nommée "maCarte" dont le contenu, au format HTML, est egal à "contenuInfoBulle" */ /* L'info-bulle sera ancrée sur le point situé à l'indice "i" dans le tableau nommé "tableauPoints" */ maCarte.openInfoWindowHtml(tableauPoints[i], contenuInfoBulle); } /* Appelle la fonction "initialize" lorsque la page web sera chargée */ google.setOnLoadCallback(initialize);