Attention :
L'API Google Maps Javascript Version 2 a été officiellement déclarée obsolète le 19 mai 2010 par Google. Elle continuera, cependant, à fonctionner durant encore trois ans, à compter de cette date, conformément à la politique de dépréciation de Google.
TouraineVerte.com ne diffusera plus de d'exemples ni de tutoriels sur cette version de l'API.
L'API Google Maps Javascript Version 3 est désormais la version officielle.
Dans cet exemple, nous allons créer une liste de sociétés, à partir des données contenues dans un fichier .XML. Tout click sur le lien d'une société, déclenche l'ouverture de son info-bulle. Les marqueurs ne sont pas affichés.
Les données, nécessaires à la construction de la carte, sont extraites du fichier data.xml :
<?xml version="1.0" encoding="UTF-8"?> <markers> <marker lat="47.391174" lng="0.722265" type="alpha" nom="Société Zeus" adresse="avenue de le République" codepostal="37700" ville="Saint-Pierre-des-Corps"/> <marker lat="47.417692" lng="0.691023" type="alpha" nom="Société Gaïa" adresse="avenue Maginot" codepostal="37100" ville="Tours"/> <marker lat="47.382602" lng="0.726686" type="alpha" nom="Société Éros" adresse="rue Grands Mortiers|ZA Grands Mortiers" codepostal="37700" ville="Saint-Pierre-des-Corps"/> <marker lat="47.382602" lng="0.726686" type="bravo" nom="Société Héméra" adresse="rue Gustave Eiffel|Z.I. N° 1" codepostal="37300" ville="Joué-les-Tours"/> <marker lat="47.419094" lng="0.693244" type="alpha" nom="Société Nyx" adresse="avenue Andre Maginot" codepostal="37100" ville="Tours"/> <marker lat="47.419972" lng="0.662138" type="alpha" nom="Société Érèbe" adresse="boulevard Charles de Gaulle" codepostal="37540" ville="Saint-Cyr-sur-Loire"/> <marker lat="47.419722" lng="0.661333" type="alpha" nom="Société Thanatos" adresse="rue Pierre de Coubertin" codepostal="37540" ville="Saint-Cyr-sur-Loire"/> <marker lat="47.419777" lng="0.661055" type="alpha" nom="Société Hypnos" adresse="rue Pierre de Coubertin" codepostal="37540" ville="Saint-Cyr-sur-Loire"/> <marker lat="47.354685" lng="0.673428" type="alpha" nom="Société Éther" adresse="rue de Chambray" codepostal="37300" ville="Joué-les-Tours"/> <marker lat="47.395328" lng="0.746727" type="bravo" nom="Société Ouranos" adresse="ld Louche Saint Martin" codepostal="37700" ville="la-Ville-aux-Dames"/> <marker lat="47.358755" lng="0.734775" type="bravo" nom="Société Ouréa" adresse="rue Camusière" codepostal="37550" ville="Saint-Avertin"/> <marker lat="47.387418" lng="0.760717" type="bravo" nom="Société Pontos" adresse="rue Louise de la Vallière" codepostal="37700" ville="la-Ville-aux-Dames"/> <marker lat="47.459477" lng="0.674672" type="charlie" nom="Société Nérée" adresse="Z.I Les Gaudières" codepostal="37390" ville="Mettray"/> <marker lat="47.338365" lng="0.616983" type="charlie" nom="Société Thaumas" adresse="boulevard Jean Jaurès" codepostal="37510" ville="Ballan-Miré"/> <marker lat="47.464388" lng="0.773388" type="delta" nom="Société Phorcys" adresse="La Petite Baltière" codepostal="37210" ville="Rochecorbon"/> <marker lat="47.345453" lng="0.542879" type="alpha" nom="Société Céto" adresse="boulevard de Chinon" codepostal="37510" ville="Ballan-Miré"/> <marker lat="47.253136" lng="0.543823" type="charlie" nom="Société Eurybie" adresse="chemin des Aunays" codepostal="37190" ville="Saché"/> <marker lat="47.323465" lng="0.918732" type="delta" nom="Société Tartare" adresse="Aérodrome de Tours-Sorigny" codepostal="37250" ville="Sorigny"/> <marker lat="47.352780" lng="0.952377" type="delta" nom="Société Échidna" adresse="Aérodrome d'Amboise Dierre" codepostal="37150" ville="Dierre"/> <marker lat="47.547799" lng="0.546355" type="charlie" nom="Société Typhon" adresse="Le Moulin de Pérran" codepostal="37360" ville="Neuillé-Pont-Pierre"/> <marker lat="47.547799" lng="0.546355" type="alpha" nom="Société Coéos" adresse="route de Loches" codepostal="37170" ville="Chambray-lès-Tours"/> <marker lat="47.201180" lng="0.652281" type="bravo" nom="Société Crios" adresse="La Laurière - D21" codepostal="37260" ville="37260"/> <marker lat="47.424277" lng="0.982107" type="delta" nom="Société Japet" adresse="rue du Colombier" codepostal="37530" ville="Pocé-sur-Cisse"/> <marker lat="47.398349" lng="1.005764" type="alpha" nom="Société Hypérion" adresse="Boulevard Saint Denis Hors (D31)" codepostal="37400" ville="Amboise"/> <marker lat="47.617273" lng="0.595322" type="delta" nom="Société Océan" adresse="Héliport de Belleville" codepostal="37370" ville="Neuvy-le-Roi"/> <marker lat="47.164742" lng="0.786381" type="delta" nom="Société Cronos" adresse="Le Louroux" codepostal="37240" ville="Le-Louroux"/> <marker lat="47.451308" lng="0.320320" type="delta" nom="Société Thémis" adresse="Les Champs Marquis" codepostal="37340" ville="Savigné-sur-Lathan"/> <marker lat="47.254184" lng="0.300922" type="charlie" nom="Société Mnémosyne" adresse="rue Principale" codepostal="37420" ville="Rigny-Ussé"/> <marker lat="47.154945" lng="1.010517" type="delta" nom="Société Théia" adresse="Les Jolletières" codepostal="37600" ville="Loches"/> <marker lat="47.285197" lng="1.159358" type="delta" nom="Société Rhéa" adresse="Les Bruyères" codepostal="41400" ville="Saint-Georges-sur-Cher"/> <marker lat="47.343083" lng="1.185086" type="delta" nom="Société Téthys" adresse="rue Nationale" codepostal="41400" ville="Montrichard"/> <marker lat="47.063808" lng="0.492325" type="charlie" nom="Société Brontès" adresse="le Village du Bois" codepostal="37220" ville="Rilly-sur-Vienne"/> <marker lat="47.504830" lng="1.196705" type="delta" nom="Société Stéropès" adresse="route de Chouzy" codepostal="41150" ville="Onzain"/> <marker lat="47.166573" lng="0.239178" type="alpha" nom="Société Argès" adresse="rue du Commerce" codepostal="37500" ville="Chinon"/> </markers>
<?xml version="1.0" encoding="utf-8"?>
<!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" xml:lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>TouraineVerte ma première carte</title>
<!-- Chargement du script Google AJAX APIs en précisant votre clé -->
<script type="text/javascript" src="http://www.google.com/jsapi?key=Inserez_Votre_Clef_API_Ici"></script>
<script type="text/javascript">
//<![CDATA[
/* 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 = [];
/* 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 "urlXml" : Elle contient le chemin et le nom du fichier XML contenant les données des sociétés, nécessaire à la construction de la carte. */
/* Il est impératif que le document qui execute ce code soit sur le même serveur que le fichier contenant les données (data.xml). */
/* Veuillez IMPÉRATIVEMENT modifier l'Url ci-dessous afin qu'elle pointe vers votre fichier data.xml */
var urlXml = "http://www.votre-serveur.fr/votre-chemin/votre-fichier-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 <div> 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(47.391174,0.722265), 9);
/* 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é : urlXml */
/* Le mode de transmission de la requête : true = asynchrone */
requeteHTTP.open("GET", urlXml + "?" + 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 <ul> */
contenuListe += '<ul>';
/* On va faire une boucle sur "marqueurs" pour en extraire les différentes données */
/* marqueurs.length permet de connaître le nombre de balises <marker> contenues dans "http://www.touraineverte.com/Google-Maps/data.xml" */
for (var x = 0; x < marqueurs.length; x++) {
/* Création de la variable "latitude" qui prend la valeur de l'attribut "lat" contenu dans la balise <marker> numéro "x" contenue dans "http://www.touraineverte.com/Google-Maps/data.xml" */
var latitude = parseFloat(marqueurs[i].getAttribute("lat"));
/* Création de la variable "longitude" qui prend la valeur de l'attribut "lng" contenu dans la balise <marker> numéro "x" contenue dans "http://www.touraineverte.com/Google-Maps/data.xml" */
var longitude = parseFloat(marqueurs[i].getAttribute("lng"));
/* Création de la variable "point" qui correspond au point ayant pour coodonnées GPS "latitude" et "longitude" */
var point = new google.maps.LatLng(latitude,longitude);
/* Création de la variable "type" qui prend la valeur de l'attribut "type" contenu dans la balise <marker> numéro "x" contenue dans "http://www.touraineverte.com/Google-Maps/data.xml" */
var type = marqueurs[i].getAttribute("type");
/* Création de la variable "nom" qui prend la valeur de l'attribut "nom" contenu dans la balise <marker> numéro "x" contenue dans "http://www.touraineverte.com/Google-Maps/data.xml" */
var nom = marqueurs[i].getAttribute("nom");
var adresse = marqueurs[i].getAttribute("adresse");
var codepostal = marqueurs[i].getAttribute("codepostal");
var ville = marqueurs[i].getAttribute("ville");
/* Création de la variable "marqueur" par appelle de la fonction "CreationInfoBulle" en lui transmettant les variables "point" "nom" et "type" */
var marqueur = CreationInfoBulle(point,latitude,longitude,nom,adresse,codepostal,ville,type);
}
/* Ajout à la variable "contenuListe" la balise </ul> */
contenuListe += '</ul>';
/* 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,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;
/* On ajoute le lien javascript vers la société dans "contenuListe" */
contenuListe += '<li><a href="javascript:actionClickLien(' + i + ')">' + nom + '</a></li>';
/* 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 = "<b>Catégorie</b> : "+tableauTypes[i]
+"<br /><b>Société</b> : "+tableauNoms[i]
+"<br /><b>Adresse</b> : "+tableauAdresses[i]
+"<br /><b>Code postal</b> : "+tableauCodePostaux[i]
+"<br /><b>Ville</b> : "+tableauVilles[i]
+"<br /><b>Société</b> : "+tableauNoms[i]
+"<br /><b>Coordonnées GPS</b> : "+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);
//]]>
</script>
<style type="text/css">
<!--
.EncadrementDeMaCarte {
position:relative;
background-color:#ccc;
border:none;
width:100%px;
height:400px;
}
#Container {
position:relative;
border:none;
width:100%;
height:400px;
z-index:2;
}
#EmplacementDeCarteGlobale {
float: left;
width: 60%;
height: 400px;
border: none;
}
#EmplacementDeLaListe {
overflow: auto;
float: right;
position: relative;
width: 40%;
height: 400px;
border: none;
background-color: #fff;
}
#EmplacementDeLaListe a{text-decoration:none;}
-->
</style>
</head>
<body>
<div class="EncadrementDeMaCarte">
<!-- la balise <div> ayant pour identifiant id = "container" -->
<!-- contient la carte et la liste des sociétés placées côte à côte -->
<div id="container">
<!-- La carte nommée "maCarte", va venir s'afficher à l' intérieur de -->
<!-- la balise <div> ayant pour identifiant id="EmplacementDeCarteGlobale". -->
<div id="EmplacementDeCarteGlobale"></div>
<!-- La liste des sociétés va venir s'afficher à l' intérieur de -->
<!-- la balise <div> ayant pour identifiant id="EmplacementDeLaListe". -->
<div id="EmplacementDeLaListe"></div>
</div>
</div>
</body>
</html>
<?xml version="1.0" encoding="utf-8"?>
<!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" xml:lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>TouraineVerte ma première carte</title>
<!-- Chargement du script Google Maps, version 2.x, en précisant votre clé -->
<script src="http://maps.google.com/maps?file=api&v=2.x&key=Inserez_Votre_Clef_API_Ici&sensor=false"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
/* 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 = [];
/* 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 "urlXml" : Elle contient le chemin et le nom du fichier XML contenant les données des sociétés, nécessaire à la construction de la carte. */
/* Il est impératif que le document qui execute ce code soit sur le même serveur que le fichier contenant les données (data.xml). */
/* Veuillez IMPÉRATIVEMENT modifier l'Url ci-dessous afin qu'elle pointe vers votre fichier data.xml */
var urlXml = "http://www.votre-serveur.fr/votre-chemin/votre-fichier-data.xml";
/* Fonction initialize() */
function initialize() {
/* Si le navigateur est compatible avec l'API de Google Maps ... */
if (GBrowserIsCompatible()) {
/* ... Création d'une nouvelle carte nommée "maCarte" qui s'affichera à l'intérieur de la balise <div> ayant pour identifiant id="EmplacementDeMaCarte" ... */
maCarte = new GMap2(document.getElementById("EmplacementDeCarteGlobale"));
maCarte.addControl(new GSmallMapControl());
maCarte.addControl(new GMenuMapTypeControl());
/* ... 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 GLatLng(47.391174,0.722265), 9);
/* 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 = GXmlHttp.create();
/* On spécifie pour la requete nommée "requeteHTTP" : */
/* Le type de requête : "GET" */
/* Le chemin/fichier ciblé : urlXml */
/* Le mode de transmission de la requête : true = asynchrone */
requeteHTTP.open("GET", urlXml + "?" + 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 <ul> */
contenuListe += '<ul>';
/* On va faire une boucle sur "marqueurs" pour en extraire les différentes données */
/* marqueurs.length permet de connaître le nombre de balises <marker> contenues dans "http://www.touraineverte.com/Google-Maps/data.xml" */
for (var x = 0; x < marqueurs.length; x++) {
/* Création de la variable "latitude" qui prend la valeur de l'attribut "lat" contenu dans la balise <marker> numéro "x" contenue dans "http://www.touraineverte.com/Google-Maps/data.xml" */
var latitude = parseFloat(marqueurs[i].getAttribute("lat"));
/* Création de la variable "longitude" qui prend la valeur de l'attribut "lng" contenu dans la balise <marker> numéro "x" contenue dans "http://www.touraineverte.com/Google-Maps/data.xml" */
var longitude = parseFloat(marqueurs[i].getAttribute("lng"));
/* Création de la variable "point" qui correspond au point ayant pour coodonnées GPS "latitude" et "longitude" */
var point = new GLatLng(latitude,longitude);
/* Création de la variable "type" qui prend la valeur de l'attribut "type" contenu dans la balise <marker> numéro "x" contenue dans "http://www.touraineverte.com/Google-Maps/data.xml" */
var type = marqueurs[i].getAttribute("type");
/* Création de la variable "nom" qui prend la valeur de l'attribut "nom" contenu dans la balise <marker> numéro "x" contenue dans "http://www.touraineverte.com/Google-Maps/data.xml" */
var nom = marqueurs[i].getAttribute("nom");
var adresse = marqueurs[i].getAttribute("adresse");
var codepostal = marqueurs[i].getAttribute("codepostal");
var ville = marqueurs[i].getAttribute("ville");
/* Création de la variable "marqueur" par appelle de la fonction "CreationInfoBulle" en lui transmettant les variables "point" "nom" et "type" */
var marqueur = CreationInfoBulle(point,latitude,longitude,nom,adresse,codepostal,ville,type);
}
/* Ajout à la variable "contenuListe" la balise </ul> */
contenuListe += '</ul>';
/* 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,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;
/* On ajoute le lien javascript vers la société dans "contenuListe" */
contenuListe += '<li><a href="javascript:actionClickLien(' + i + ')">' + nom + '</a></li>';
/* 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 = "<b>Catégorie</b> : "+tableauTypes[i]
+"<br /><b>Société</b> : "+tableauNoms[i]
+"<br /><b>Adresse</b> : "+tableauAdresses[i]
+"<br /><b>Code postal</b> : "+tableauCodePostaux[i]
+"<br /><b>Ville</b> : "+tableauVilles[i]
+"<br /><b>Société</b> : "+tableauNoms[i]
+"<br /><b>Coordonnées GPS</b> : "+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);
}
//]]>
</script>
<style type="text/css">
<!--
.EncadrementDeMaCarte {
position:relative;
background-color:#ccc;
border:none;
width:100%px;
height:400px;
}
#Container {
position:relative;
border:none;
width:100%;
height:400px;
z-index:2;
}
#EmplacementDeCarteGlobale {
float: left;
width: 60%;
height: 400px;
border: none;
}
#EmplacementDeLaListe {
overflow: auto;
float: right;
position: relative;
width: 40%;
height: 400px;
border: none;
background-color: #fff;
}
#EmplacementDeLaListe a{text-decoration:none;}
-->
</style>
</head>
<!-- Une fois la page chargée la fonction initialize() est exécutée. -->
<!-- A la fermeture de la page , la fonction GUnload() est exécutée. -->
<body onload="initialize()" onunload="GUnload()">
<div class="EncadrementDeMaCarte">
<!-- la balise <div> ayant pour identifiant id = "container" -->
<!-- contient la carte et la liste des sociétés placées côte à côte -->
<div id="container">
<!-- La carte nommée "maCarte", va venir s'afficher à l' intérieur de -->
<!-- la balise <div> ayant pour identifiant id="EmplacementDeCarteGlobale". -->
<div id="EmplacementDeCarteGlobale"></div>
<!-- La liste des sociétés va venir s'afficher à l' intérieur de -->
<!-- la balise <div> ayant pour identifiant id="EmplacementDeLaListe". -->
<div id="EmplacementDeLaListe"></div>
</div>
</div>
</body>
</html>
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.
