Controle
Créer une liste de marqueurs à partir des données contenues dans un fichier .xml.
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 un lien dans la liste de sociétés :
Tout click sur un marqueur situé sur la carte :
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 */
var contenuListe = "";
var tableauMarqueurs = [];
var tableauInfoBulle = [];
var i = 0;
var miniIconeVert;
var maCarte;
/* 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()) {
/* ... Paramétrage du mini icône vert nommé "miniIconeVert" ... */
miniIconeVert = new google.maps.Icon();
miniIconeVert.image = "http://labs.google.com/ridefinder/images/mm_20_green.png";
miniIconeVert.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
miniIconeVert.iconSize = new google.maps.Size(12, 20);
miniIconeVert.shadowSize = new google.maps.Size(22, 20);
miniIconeVert.iconAnchor = new google.maps.Point(6, 20);
miniIconeVert.infoWindowAnchor = new google.maps.Point(5, 1);
/* ... 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"));
/* ... La carte nommée "maCarte" est centrée sur la Latitude 47.341571, la Longitude 0.514233, avec un niveau de zoom égal à 13 ... */
maCarte.setCenter(new google.maps.LatLng(47.391174,0.722265), 9);
/* ... Ajout à la carte nommée "maCarte" du bouton "SmallMapControl" : Déplacement et Zoom ... */
maCarte.addControl(new google.maps.SmallMapControl());
/* ... Ajout à la carte nommée "maCarte" du bouton "MenuMapTypeControl" : Menu Type de carte ... */
maCarte.addControl(new google.maps.MenuMapTypeControl());
/* ... A l'aide de google.maps.XmlHttp on construit, puis on envoie une requête, de type GET, pour charger les données contenues dans ... */
/* ... "http://www.votreserveur.fr/votrerepertoire/data.xml" et récupérer les caractéristiques de ... */
/* ... chaque marqueur (lat, lng, point, type, nom) nécessaire à sa construction ... */
var requete = google.maps.XmlHttp.create();
requete.open("GET", urlXml, true);
/* ... Spécifie la fonction à appeler lorsque la propriété readyState varie ... */
requete.onreadystatechange = function() {
/* ... Si l'état d'avancement de la requête est égal à 4 : autrement dit si la requête à parfaitement fonctionné, ... */
/* ... que les données ont été correctement téléchargées et que celles-ci sont disponibles pour être exploitées ... */
if (requete.readyState == 4) {
/* ... "xmlDoc" contient la réponse de la requête au format XML ... */
var xmlDoc = requete.responseXML;
/* ... "marqueurs" : est un tableau contenant toutes les balises <marker /> du fichier "data.xml" ... */
var marqueurs = xmlDoc.documentElement.getElementsByTagName("marker");
/* ... Construction de la liste de sociétés : Début ... */
contenuListe += '<ol>';
/* ... On fait une boucle sur "marqueurs" pour extraire les caractéristiques de chaque marqueur ... */
/* ... et permettre l'affichage de ceux-ci sur la carte ainsi que la construction de la liste . ... */
for (var i = 0; i < marqueurs.length; i++) {
/* ... lat : Latitude du marqueur ... */
var lat = parseFloat(marqueurs[i].getAttribute("lat"));
/* ... lng : Longitude du marqueur ... */
var lng = parseFloat(marqueurs[i].getAttribute("lng"));
/* ... pointSoc : point d'ancrage du marqueur, aux coordonnées "lat" et "lng" ... */
var pointSoc = new GLatLng(lat,lng);
/* ... typeSoc : Catégorie d'appartenance du marqueur ... */
var typeSoc = marqueurs[i].getAttribute("type");
/* ... nomSoc : Nom de la société correspondant au marqueur ... */
var nomSoc = marqueurs[i].getAttribute("nom");
/* ... adresseSoc : Adresse postale de la société correspondant au marqueur ... */
var adresseSoc = marqueurs[i].getAttribute("adresse");
/* ... codepostalSoc : Code postal de la société correspondant au marqueur ... */
var codepostalSoc = marqueurs[i].getAttribute("codepostal");
/* ... villeSoc : Ville de la société correspondant au marqueur ... */
var villeSoc = marqueurs[i].getAttribute("ville");
/* ... Création du marqueur nommé "marqueur" par appel de la fonction "creationMarqueur()" ... */
/* ... en lui transmettant les données : lat, lng, pointSoc, typeSoc, nomSoc ... */
var marqueur = creationMarqueur(lat,lng,pointSoc,typeSoc,nomSoc,adresseSoc,codepostalSoc,villeSoc);
/* ... Affiche sur la carte nommée "maCarte", le marqueur nommé "marqueur" ... */
maCarte.addOverlay(marqueur);
}
contenuListe += '</ol>';
document.getElementById("EmplacementDeLaListe").innerHTML = contenuListe;
}
}
requete.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 creationMarqueur() */
function creationMarqueur(lat,lng,pointSoc,typeSoc,nomSoc,adresseSoc,codepostalSoc,villeSoc) {
/* ... Création d'un marqueur nommé marqueur" ancré sur "point" et représenté par l'icône nommé "miniIconeVert" ... */
var marqueur = new google.maps.Marker(pointSoc,miniIconeVert);
/* ... contenuInfoBulle : construction du code HTML destiné à s'afficher dans l'info-bulle du marqueur ... */
var contenuInfoBulle = '<b>Société</b> : '+nomSoc+'<br />'
+'<b>Catégorie</b> : '+typeSoc+'<br />'
+'<b>Adresse</b> : '+adresseSoc+'<br />'
+'<b>Code postal</b> : '+codepostalSoc+'<br />'
+'<b>Ville</b> : '+villeSoc+'<br />'
+'<b>Latitude</b> : '+lat+'<br />'
+'<b>Longitude</b> : '+lng;
/* ... Ajout d'un observateur d'événement au marqueur nommé marqueur" ... */
/* ... L'événement observé est le "click". Quant un "click" sera détecté ... */
/* ... sur le marqueur nommé "marqueur" alors ... */
google.maps.Event.addListener(marqueur, "click", function() {
/* ... Ouverture de l'info-bulle liée au marqueur nommé "marqueur" et ... */
/* ... affichage à l'intérieur de celle-ci du code HTML "contenuInfoBulle" ... */
marqueur.openInfoWindowHtml(contenuInfoBulle);
});
/* ... Insère le marqueur nommé "marqueur" dans le tableau nommé "tableauMarqueurs" à l'indice "i" ... */
tableauMarqueurs[i] = marqueur;
/* ... Insère le code HTML "contenuInfoBulle" dans le tableau nommé "tableauInfoBulle" à l'indice "i" ... */
tableauInfoBulle[i] = contenuInfoBulle;
/* ... Ajout à "contenuListe" du lien javascript correspondant à la société ... */
contenuListe += '<li><a href="javascript:clickLien(' + i + ')">' + nomSoc + '</a></li>';
/* ... Incrémente "i" ... */
i++;
return marqueur;
}
/* Fonction clickLien() */
function clickLien(i) {
/* ... Tout click sur le lien ayant pour indice "i", va déclencher l'ouverture de l'info-bulle ... */
/* ... liée au marqueur d'indice "i" contenu dans le tableau "tableauMarqueurs[i]" et afficher ... */
/* ... à l'intérieur de celle-ci, le code HTML d'indice "i" contenu dans le tableau tableauInfoBulle[i] ... */
tableauMarqueurs[i].openInfoWindowHtml(tableauInfoBulle[i]);
}
/* Appelle la fonction "initialize" lorsque la page web sera chargée. */
google.setOnLoadCallback(initialize);
//]]>
</script>
<style type="text/css">
<!--
#Container {
position:relative;
width:100%;
height:400px;
border: none;
}
#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>
<!-- La carte nommée "maCarte", va venir s'afficher à l' intérieur de -->
<!-- la balise <div> ayant pour identifiant id="EmplacementDeCarteGlobale". -->
<!-- La liste des sociétés va s'afficher dans la balise <div> ayant pour identifiant id="EmplacementDeLaListe".. -->
<div class="EncadrementDeMaCarte">
<div id="Container">
<div id="EmplacementDeCarteGlobale"></div>
<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 */
var contenuListe = "";
var tableauMarqueurs = [];
var tableauInfoBulle = [];
var i = 0;
var miniIconeVert;
var maCarte;
/* 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()) {
/* ... Paramétrage du mini icône vert nommé "miniIconeVert" ... */
miniIconeVert = new GIcon();
miniIconeVert.image = "http://labs.google.com/ridefinder/images/mm_20_green.png";
miniIconeVert.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
miniIconeVert.iconSize = new GSize(12, 20);
miniIconeVert.shadowSize = new GSize(22, 20);
miniIconeVert.iconAnchor = new GPoint(6, 20);
miniIconeVert.infoWindowAnchor = new GPoint(5, 1);
/* ... 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"));
/* ... La carte nommée "maCarte" est centrée sur la Latitude 47.341571, la Longitude 0.514233, avec un niveau de zoom égal à 13 ... */
maCarte.setCenter(new GLatLng(47.391174,0.722265), 9);
/* ... Ajout à la carte nommée "maCarte" du bouton "SmallMapControl" : Déplacement et Zoom ... */
maCarte.addControl(new GSmallMapControl());
/* ... Ajout à la carte nommée "maCarte" du bouton "MenuMapTypeControl" : Menu Type de carte ... */
maCarte.addControl(new GMenuMapTypeControl());
/* ... A l'aide de GXmlHttp on construit, puis on envoie une requête, de type GET, pour charger les données contenues dans ... */
/* ... "http://www.votreserveur.fr/votrerepertoire/data.xml" et récupérer les caractéristiques de ... */
/* ... chaque marqueur (lat, lng, point, type, nom) nécessaire à sa construction ... */
var requete = GXmlHttp.create();
requete.open("GET", urlXml, true);
/* ... Spécifie la fonction à appeler lorsque la propriété readyState varie ... */
requete.onreadystatechange = function() {
/* ... Si l'état d'avancement de la requête est égal à 4 : autrement dit si la requête à parfaitement fonctionné, ... */
/* ... que les données ont été correctement téléchargées et que celles-ci sont disponibles pour être exploitées ... */
if (requete.readyState == 4) {
/* ... "xmlDoc" contient la réponse de la requête au format XML ... */
var xmlDoc = requete.responseXML;
/* ... "marqueurs" : est un tableau contenant toutes les balises <marker /> du fichier "data.xml" ... */
var marqueurs = xmlDoc.documentElement.getElementsByTagName("marker");
/* ... Construction de la liste de sociétés : Début ... */
contenuListe += '<ol>';
/* ... On fait une boucle sur "marqueurs" pour extraire les caractéristiques de chaque marqueur ... */
/* ... et permettre l'affichage de ceux-ci sur la carte ainsi que la construction de la liste . ... */
for (var i = 0; i < marqueurs.length; i++) {
/* ... lat : Latitude du marqueur ... */
var lat = parseFloat(marqueurs[i].getAttribute("lat"));
/* ... lng : Longitude du marqueur ... */
var lng = parseFloat(marqueurs[i].getAttribute("lng"));
/* ... pointSoc : point d'ancrage du marqueur, aux coordonnées "lat" et "lng" ... */
var pointSoc = new GLatLng(lat,lng);
/* ... typeSoc : Catégorie d'appartenance du marqueur ... */
var typeSoc = marqueurs[i].getAttribute("type");
/* ... nomSoc : Nom de la société correspondant au marqueur ... */
var nomSoc = marqueurs[i].getAttribute("nom");
/* ... adresseSoc : Adresse postale de la société correspondant au marqueur ... */
var adresseSoc = marqueurs[i].getAttribute("adresse");
/* ... codepostalSoc : Code postal de la société correspondant au marqueur ... */
var codepostalSoc = marqueurs[i].getAttribute("codepostal");
/* ... villeSoc : Ville de la société correspondant au marqueur ... */
var villeSoc = marqueurs[i].getAttribute("ville");
/* ... Création du marqueur nommé "marqueur" par appel de la fonction "creationMarqueur()" ... */
/* ... en lui transmettant les données : lat, lng, pointSoc, typeSoc, nomSoc ... */
var marqueur = creationMarqueur(lat,lng,pointSoc,typeSoc,nomSoc,adresseSoc,codepostalSoc,villeSoc);
/* ... Affiche sur la carte nommée "maCarte", le marqueur nommé "marqueur" ... */
maCarte.addOverlay(marqueur);
}
contenuListe += '</ol>';
document.getElementById("EmplacementDeLaListe").innerHTML = contenuListe;
}
}
requete.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 creationMarqueur() */
function creationMarqueur(lat,lng,pointSoc,typeSoc,nomSoc,adresseSoc,codepostalSoc,villeSoc) {
/* ... Création d'un marqueur nommé marqueur" ancré sur "point" et représenté par l'icône nommé "miniIconeVert" ... */
var marqueur = new GMarker(pointSoc, miniIconeVert);
/* ... contenuInfoBulle : construction du code HTML destiné à s'afficher dans l'info-bulle du marqueur ... */
var contenuInfoBulle = '<b>Société</b> : '+nomSoc+'<br />'
+'<b>Catégorie</b> : '+typeSoc+'<br />'
+'<b>Adresse</b> : '+adresseSoc+'<br />'
+'<b>Code postal</b> : '+codepostalSoc+'<br />'
+'<b>Ville</b> : '+villeSoc+'<br />'
+'<b>Latitude</b> : '+lat+'<br />'
+'<b>Longitude</b> : '+lng;
/* ... Ajout d'un observateur d'événement au marqueur nommé marqueur" ... */
/* ... L'événement observé est le "click". Quant un "click" sera détecté ... */
/* ... sur le marqueur nommé "marqueur" alors ... */
GEvent.addListener(marqueur, "click", function() {
/* ... Ouverture de l'info-bulle liée au marqueur nommé "marqueur" et ... */
/* ... affichage à l'intérieur de celle-ci du code HTML "contenuInfoBulle" ... */
marqueur.openInfoWindowHtml(contenuInfoBulle);
});
/* ... Insère le marqueur nommé "marqueur" dans le tableau nommé "tableauMarqueurs" à l'indice "i" ... */
tableauMarqueurs[i] = marqueur;
/* ... Insère le code HTML "contenuInfoBulle" dans le tableau nommé "tableauInfoBulle" à l'indice "i" ... */
tableauInfoBulle[i] = contenuInfoBulle;
/* ... Ajout à "contenuListe" du lien javascript correspondant à la société ... */
contenuListe += '<li><a href="javascript:clickLien(' + i + ')">' + nomSoc + '</a></li>';
/* ... Incrémente "i" ... */
i++;
return marqueur;
}
/* Fonction clickLien() */
function clickLien(i) {
/* ... Tout click sur le lien ayant pour indice "i", va déclencher l'ouverture de l'info-bulle ... */
/* ... liée au marqueur d'indice "i" contenu dans le tableau "tableauMarqueurs[i]" et afficher ... */
/* ... à l'intérieur de celle-ci, le code HTML d'indice "i" contenu dans le tableau tableauInfoBulle[i] ... */
tableauMarqueurs[i].openInfoWindowHtml(tableauInfoBulle[i]);
}
//]]>
</script>
<style type="text/css">
<!--
#Container {
position:relative;
width:100%;
height:400px;
border: none;
}
#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()">
<!-- La carte nommée "maCarte", va venir s'afficher à l' intérieur de -->
<!-- la balise <div> ayant pour identifiant id="EmplacementDeCarteGlobale". -->
<!-- La liste des sociétés va s'afficher dans la balise <div> ayant pour identifiant id="EmplacementDeLaListe".. -->
<div class="EncadrementDeMaCarte">
<div id="Container">
<div id="EmplacementDeCarteGlobale"></div>
<div id="EmplacementDeLaListe"></div>
</div>
</div>
</body>
</html>
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.
