Controle
Case à cocher - Sélection des Marqueurs - Listes thématiques - Données extraites d'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.
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>
|
alpha
 |
bravo
 |
charlie
 |
delta
 |
|---|---|---|---|
<?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>
<title>Touraineverte.com - Cases à cocher et listes thématiques</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<!-- 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">
/* Chargement du module "maps" dans sa version "2.x" */
google.load("maps", "2.x",{"other_params":"sensor=false"});
/* Déclaration des variables globales */
var maCarte;
/* tableauMarqueurs : est un tableau destiné à contenir tous les marqueurs */
var tableauMarqueurs = [];
/* tableauIcones : est un tableau destiné à contenir toutes les catégorie d'icônes */
var tableauIcones = [];
/* 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 creationDuMarqueur() */
/* point : point d'ancrage du marqueur */
/* nom : nom du marqueur */
/* html : contenu de l'info-bulle liée au marqueur */
/* categorie : catégorie d'appartenance du marqueur */
function creationDuMarqueur(point, nom, html, categorie) {
/* Création d'un "marqueur" ancré sur "point" et représenté par l'icône "tableauIcones[categorie]" */
var marqueur = new google.maps.Marker(point, tableauIcones[categorie]);
/* Association de la "categorie" au "marqueur" */
marqueur.marqueurCategorie = categorie;
/* Association du "nom" au "marqueur" */
marqueur.marqueurNom = nom;
/* Création d'un observateur d'événement lié au "marqueur" */
/* L'événement observé est le "click" */
google.maps.Event.addListener(marqueur, "click", function() {
/* Si "marqueur" n'est pas masqué */
if(!marqueur.isHidden()){
/* ouverture de l'info-bulle liée au "marqueur" */
/* "html" correspond au contenu de l'info-bulle */
marqueur.openInfoWindowHtml(html);
}
});
/* Insertion du "marqueur" dans le tableau nommé "tableauMarqueurs" */
tableauMarqueurs.push(marqueur);
/* */
return marqueur;
}
/* Fonction afficheCategorie() */
/* categorie : catégorie d'appartenance du marqueur */
/* Cette fonction permet d'afficher tous les marqueurs appartenant à la catégorie "categorie" */
function afficheCategorie(categorie) {
/* Création d'une boucle sur tous les marqueurs contenus dans le tableau nommé "tableauMarqueurs" */
for (var i=0; i<tableauMarqueurs.length; i++) {
/* Si la catégorie du marqueur "tableauMarqueurs[i]" est égale à la catégorie recherchée */
if (tableauMarqueurs[i].marqueurCategorie == categorie) {
/* Affichage le marqueur "tableauMarqueurs[i]" sur la carte */
tableauMarqueurs[i].show();
}
}
/* la balise <div> ayant pour identifiant "listeSelection"+categorie est affichée */
document.getElementById("listeSelection"+categorie).style.display = "";
/* La case à cocher ayant pour identifiant "case"+categorie est cochée */
document.getElementById("case"+categorie).checked = true;
}
/* Fonction masqueCategorie() */
/* categorie : catégorie d'appartenance du marqueur */
/* Cette fonction permet de masquer tous les marqueurs appartenant à la catégorie "categorie" */
function masqueCategorie(categorie) {
/* Création d'une boucle sur tous les marqueurs contenus dans le tableau nommé "tableauMarqueurs" */
for (var i=0; i<tableauMarqueurs.length; i++) {
/* Si la catégorie du marqueur "tableauMarqueurs[i]" est égale à la catégorie recherchée */
if (tableauMarqueurs[i].marqueurCategorie == categorie) {
/* Masque le marqueur "tableauMarqueurs[i]" sur la carte */
tableauMarqueurs[i].hide();
}
}
/* la balise <div> ayant pour identifiant "listeSelection"+categorie est masquée */
document.getElementById("listeSelection"+categorie).style.display = "none";
/* La case à cocher ayant pour identifiant "case"+categorie est décochée */
document.getElementById("case"+categorie).checked = false;
/* Fermeture de toutes les info-bulles situées sur la carte nommée "maCarte" */
maCarte.closeInfoWindow();
}
/* Fonction clickCaseACocher() */
function clickCaseACocher(caseClick, categorie) {
/* Si "caseClick" est cochée */
if (caseClick.checked) {
/* Appel de la fonction afficheCategorie() en lui transmettant entre parenthèses la catégorie à afficher */
afficheCategorie(categorie);
} else {
/* Sinon, appel de la fonction masqueCategorie() en lui transmettant entre parenthèses la catégorie à masquer */
masqueCategorie(categorie);
}
}
/* Fonction clickLienListe() */
/* i : index du marqueur dans le tableau tableauMarqueurs[i] */
function clickLienListe(i) {
/* Déclenche un "click" sur le marqueur "tableauMarqueurs[i]" */
google.maps.Event.trigger(tableauMarqueurs[i],"click");
}
/* Fonction creationDeLaListeDeSelection() */
function creationDeLaListeDeSelection() {
/* htmlalpha : Création de "htmlalpha" (chaine vide) devant contenir la liste des noms correspondant à la catégorie "alpha" */
var htmlalpha = "";
/* htmlbravo : Création de "htmlbravo" (chaine vide) devant contenir la liste des noms correspondant à la catégorie "bravo" */
var htmlbravo = "";
/* htmlcharlie : Création de "htmlcharlie" (chaine vide) devant contenir la liste des noms correspondant à la catégorie "charlie" */
var htmlcharlie = "";
/* htmldelta : Création de "htmldelta" (chaine vide) devant contenir la liste des noms correspondant à la catégorie "delta" */
var htmldelta = "";
/* Création d'une boucle sur tous les marqueurs contenus dans le tableau nommé "tableauMarqueurs" */
for (var i=0; i<tableauMarqueurs.length; i++) {
/* Si la catégorie du marqueur "tableauMarqueurs[i]" est égal à la catégorie "alpha" */
if (tableauMarqueurs[i].marqueurCategorie=="alpha") {
/* Alors on ajoute à "htmlalpha" le nom du marqueur sous la forme d'un lien javascript */
htmlalpha += '<div><a href="javascript:clickLienListe(' + i + ')">' + tableauMarqueurs[i].marqueurNom + '</a></div>';
}
/* Si la catégorie du marqueur "tableauMarqueurs[i]" est égal à la catégorie "bravo" */
if (tableauMarqueurs[i].marqueurCategorie=="bravo") {
/* Alors on ajoute à "htmlbravo" le nom du marqueur sous la forme d'un lien javascript */
htmlbravo += '<div><a href="javascript:clickLienListe(' + i + ')">' + tableauMarqueurs[i].marqueurNom + '</a></div>';
}
/* Si la catégorie du marqueur "tableauMarqueurs[i]" est égal à la catégorie "charlie" */
if (tableauMarqueurs[i].marqueurCategorie=="charlie") {
/* Alors on ajoute à "htmlcharlie" le nom du marqueur sous la forme d'un lien javascript */
htmlcharlie += '<div><a href="javascript:clickLienListe(' + i + ')">' + tableauMarqueurs[i].marqueurNom + '</a></div>';
}
/* Si la catégorie du marqueur "tableauMarqueurs[i]" est égal à la catégorie "delta" */
if (tableauMarqueurs[i].marqueurCategorie=="delta") {
/* Alors on ajoute à "htmldelta" le nom du marqueur sous la forme d'un lien javascript */
htmldelta += '<div><a href="javascript:clickLienListe(' + i + ')">' + tableauMarqueurs[i].marqueurNom + '</a></div>';
}
}
/* Le contenu de la balise <div> ayant pour identifiant id="listeSelectionalpha" est égal à "htmlalpha" */
document.getElementById("listeSelectionalpha").innerHTML = htmlalpha;
/* Le contenu de la balise <div> ayant pour identifiant id="listeSelectionbravo" est égal à "htmlbravo" */
document.getElementById("listeSelectionbravo").innerHTML = htmlbravo;
/* Le contenu de la balise <div> ayant pour identifiant id="listeSelectioncharlie" est égal à "htmlcharlie" */
document.getElementById("listeSelectioncharlie").innerHTML = htmlcharlie;
/* Le contenu de la balise <div> ayant pour identifiant id="listeSelectiondelta" est égal à "htmldelta" */
document.getElementById("listeSelectiondelta").innerHTML = htmldelta;
}
/* Fonction initialize() */
function initialize() {
/* Configuration du miniIcone */
miniIcone = new google.maps.Icon();
miniIcone.iconSize=new google.maps.Size(12,20);
miniIcone.shadowSize=new google.maps.Size(20,22);
miniIcone.iconAnchor=new google.maps.Point(6,20);
miniIcone.infoWindowAnchor=new google.maps.Point(5,1);
/* On insère dans le tableau "tableauIcones" les différents icônes (un icône par catégorie) */
/* tableauIcones["alpha"] : contient les caratéristiques de l'icône correspondant à la catégorie "alpha" : icône rouge */
tableauIcones["alpha"] = new google.maps.Icon(miniIcone, "http://labs.google.com/ridefinder/images/mm_20_red.png", null, "http://labs.google.com/ridefinder/images/mm_20_shadow.png");
/* tableauIcones["bravo"] : contient les caratéristiques de l'icône correspondant à la catégorie "bravo" : icône vert */
tableauIcones["bravo"] = new google.maps.Icon(miniIcone, "http://labs.google.com/ridefinder/images/mm_20_green.png", null, "http://labs.google.com/ridefinder/images/mm_20_shadow.png");
/* tableauIcones["charlie"] : contient les caratéristiques de l'icône correspondant à la catégorie "charlie" : icône bleu */
tableauIcones["charlie"] = new google.maps.Icon(miniIcone, "http://labs.google.com/ridefinder/images/mm_20_blue.png", null, "http://labs.google.com/ridefinder/images/mm_20_shadow.png");
/* tableauIcones["delta"] : contient les caratéristiques de l'icône correspondant à la catégorie "delta" : icône orange */
tableauIcones["delta"] = new google.maps.Icon(miniIcone, "http://labs.google.com/ridefinder/images/mm_20_orange.png", null, "http://labs.google.com/ridefinder/images/mm_20_shadow.png");
/* Création d'une nouvelle carte nommée "maCarte" qui s'affichera dans la <div> ayant pour identifiant id="EmplacementDeMaCarte" */
maCarte = new google.maps.Map2(document.getElementById("EmplacementDeMaCarte"));
/* Ajout à la carte nommée "maCarte" d'un nouveau contrôle : Déplacement + Zoom */
maCarte.addControl(new google.maps.LargeMapControl());
/* Ajout à la carte nommée "maCarte" d'un nouveau contrôle : Menu déroulant pour sélectionner le type de carte */
maCarte.addControl(new google.maps.MenuMapTypeControl());
/* Centre la carte nommée "maCarte" sur la latitude : 47.382544 et la longitude : 0.690765 avec un niveau de zoom égal à 9 */
maCarte.setCenter(new google.maps.LatLng(47.382544, 0.690765), 9);
/* */
google.maps.DownloadUrl(urlXml, function(doc) {
/* */
var xmlDoc = google.maps.Xml.parse(doc);
/* */
var marqueurs = xmlDoc.documentElement.getElementsByTagName("marker");
/* */
for (var i = 0; i < marqueurs.length; i++) {
/* nom : nom du marqueur */
var nom = marqueurs[i].getAttribute("nom");
/* adresse : adresse postale du marqueur */
var adresse = marqueurs[i].getAttribute("adresse");
/* longitude : longitude du marqueur */
var longitude = parseFloat(marqueurs[i].getAttribute("lng"));
/* latitude : latitude du marqueur */
var latitude = parseFloat(marqueurs[i].getAttribute("lat"));
/* categorie : catégorie à laquelle le marqueur appartient */
var categorie = marqueurs[i].getAttribute("type");
/* point : point d'ancrage du marqueur */
var point = new google.maps.LatLng(latitude,longitude);
/* html : texte contenu dans l'info-bulle */
var html = "<b>" + nom + "</b><br />"
+ "<b>Adresse</b> : " + adresse + "<br /><br />"
+ "<b>Catégorie</b> : " + categorie + "<br />"
+ "<b>Latitude</b> : " + latitude + "<br />"
+ "<b>Longitude</b> : " + longitude;
/* Création du "marqueur" par appel de la fonction "creationDuMarqueur()" */
/* en lui transmettant les données du marqueur : point, nom, html, categorie */
var marqueur = creationDuMarqueur(point, nom, html, categorie);
/* Affichage du "marqueur" sur la carte n ommée "maCarte" */
maCarte.addOverlay(marqueur);
/* Tri du tableau nommé "tableauMarqueurs" */
tableauMarqueurs.sort();
}
/* Appel de la fonction afficheCategorie("charlie") pour afficher tous les marqueurs de la catégorie "charlie" */
afficheCategorie("charlie");
/* Appel de la fonction masqueCategorie("alpha") pour masquer tous les marqueurs de la catégorie "alpha" */
masqueCategorie("alpha");
/* Appel de la fonction masqueCategorie("bravo") pour masquer tous les marqueurs de la catégorie "bravo" */
masqueCategorie("bravo");
/* Appel de la fonction masqueCategorie("delta") pour masquer tous les marqueurs de la catégorie "delta" */
masqueCategorie("delta");
/* Appel de la fonction masqueCategorie() pour */
creationDeLaListeDeSelection();
});
}
/* Appelle la fonction "initialize" lorsque la page web sera chargée */
google.setOnLoadCallback(initialize);
</script>
</head>
<body>
<!-- La carte nommée "maCarte", va venir s'afficher à l' intérieur de -->
<!-- la balise <div> ayant pour identifiant id="EmplacementDeMaCarte". -->
<!-- Elle fera donc 100% de large et 400 pixels de haut. -->
<div id="EmplacementDeMaCarte" style="width: 100%; height: 400px"></div>
<table width="100%">
<tr>
<th width="25%">
<div align="center">alpha <img src="http://labs.google.com/ridefinder/images/mm_20_red.png" alt="marqueur rouge" /> <input type="checkbox" id="casealpha" onClick="clickCaseACocher(this,'alpha')" /></div>
</th>
<th width="25%">
<div align="center">bravo <img src="http://labs.google.com/ridefinder/images/mm_20_green.png" alt="marqueur vert" /> <input type="checkbox" id="casebravo" onClick="clickCaseACocher(this,'bravo')" /></div>
</th>
<th width="25%">
<div align="center">charlie <img src="http://labs.google.com/ridefinder/images/mm_20_blue.png" alt="marqueur bleu" /> <input type="checkbox" id="casecharlie" onClick="clickCaseACocher(this,'charlie')" /></div>
</th>
<th width="25%">
<div align="center">delta <img src="http://labs.google.com/ridefinder/images/mm_20_orange.png" alt="marqueur orange" /> <input type="checkbox" id="casedelta" onClick="clickCaseACocher(this,'delta')" /></div>
</th>
</tr>
<tr>
<td height="150" valign="top" style="text-decoration: none; color: #000; overflow: auto;">
<div id="listeSelectionalpha" style="width:150px; height: 150px; overflow: auto;"></div>
</td>
<td height="150" valign="top" style="text-decoration: none; color: #000; overflow: auto;">
<div id="listeSelectionbravo" style="width:150px; height: 150px; overflow: auto;"></div>
</td>
<td height="150" valign="top" style="text-decoration: none; color: #000; overflow: auto;">
<div id="listeSelectioncharlie" style="width:150px; height: 150px; overflow: auto;"></div>
</td>
<td height="150" valign="top" style="text-decoration: none; color: #000; overflow: auto;">
<div id="listeSelectiondelta" style="width:150px; height: 150px; overflow: auto;"></div>
</td>
</tr>
</table>
<!-- Si JavaScript n'est pas activé sur votre navigateur, le message d'alerte situé entre les balises <noscript></noscript> s'affichera -->
<noscript>
<p>Attention : </p>
<p>Afin de pouvoir utiliser Google Maps, JavaScript doit être activé.</p>
<p>Or, il semble que JavaScript est désactivé ou qu'il n'est pas supporté par votre navigateur.</p>
<p>Pour afficher Google Maps, activez JavaScript en modifiant les options de votre navigateur, puis essayez à nouveau.</p>
</noscript>
</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>
<title>Touraineverte.com - Cases à cocher et listes thématiques</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<!-- 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">
/* Déclaration des variables globales */
var maCarte;
/* tableauMarqueurs : est un tableau destiné à contenir tous les marqueurs */
var tableauMarqueurs = [];
/* tableauIcones : est un tableau destiné à contenir toutes les catégorie d'icônes */
var tableauIcones = [];
/* 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 creationDuMarqueur() */
/* point : point d'ancrage du marqueur */
/* nom : nom du marqueur */
/* html : contenu de l'info-bulle liée au marqueur */
/* categorie : catégorie d'appartenance du marqueur */
function creationDuMarqueur(point, nom, html, categorie) {
/* Création d'un "marqueur" ancré sur "point" et représenté par l'icône "tableauIcones[categorie]" */
var marqueur = new GMarker(point, tableauIcones[categorie]);
/* Association de la "categorie" au "marqueur" */
marqueur.marqueurCategorie = categorie;
/* Association du "nom" au "marqueur" */
marqueur.marqueurNom = nom;
/* Création d'un observateur d'événement lié au "marqueur" */
/* L'événement observé est le "click" */
GEvent.addListener(marqueur, "click", function() {
/* Si "marqueur" n'est pas masqué */
if(!marqueur.isHidden()){
/* ouverture de l'info-bulle liée au "marqueur" */
/* "html" correspond au contenu de l'info-bulle */
marqueur.openInfoWindowHtml(html);
}
});
/* Insertion du "marqueur" dans le tableau nommé "tableauMarqueurs" */
tableauMarqueurs.push(marqueur);
/* */
return marqueur;
}
/* Fonction afficheCategorie() */
/* categorie : catégorie d'appartenance du marqueur */
/* Cette fonction permet d'afficher tous les marqueurs appartenant à la catégorie "categorie" */
function afficheCategorie(categorie) {
/* Création d'une boucle sur tous les marqueurs contenus dans le tableau nommé "tableauMarqueurs" */
for (var i=0; i<tableauMarqueurs.length; i++) {
/* Si la catégorie du marqueur "tableauMarqueurs[i]" est égale à la catégorie recherchée */
if (tableauMarqueurs[i].marqueurCategorie == categorie) {
/* Affichage le marqueur "tableauMarqueurs[i]" sur la carte */
tableauMarqueurs[i].show();
}
}
/* la balise <div> ayant pour identifiant "listeSelection"+categorie est affichée */
document.getElementById("listeSelection"+categorie).style.display = "";
/* La case à cocher ayant pour identifiant "case"+categorie est cochée */
document.getElementById("case"+categorie).checked = true;
}
/* Fonction masqueCategorie() */
/* categorie : catégorie d'appartenance du marqueur */
/* Cette fonction permet de masquer tous les marqueurs appartenant à la catégorie "categorie" */
function masqueCategorie(categorie) {
/* Création d'une boucle sur tous les marqueurs contenus dans le tableau nommé "tableauMarqueurs" */
for (var i=0; i<tableauMarqueurs.length; i++) {
/* Si la catégorie du marqueur "tableauMarqueurs[i]" est égale à la catégorie recherchée */
if (tableauMarqueurs[i].marqueurCategorie == categorie) {
/* Masque le marqueur "tableauMarqueurs[i]" sur la carte */
tableauMarqueurs[i].hide();
}
}
/* la balise <div> ayant pour identifiant "listeSelection"+categorie est masquée */
document.getElementById("listeSelection"+categorie).style.display = "none";
/* La case à cocher ayant pour identifiant "case"+categorie est décochée */
document.getElementById("case"+categorie).checked = false;
/* Fermeture de toutes les info-bulles situées sur la carte nommée "maCarte" */
maCarte.closeInfoWindow();
}
/* Fonction clickCaseACocher() */
function clickCaseACocher(caseClick, categorie) {
/* Si "caseClick" est cochée */
if (caseClick.checked) {
/* Appel de la fonction afficheCategorie() en lui transmettant entre parenthèses la catégorie à afficher */
afficheCategorie(categorie);
} else {
/* Sinon, appel de la fonction masqueCategorie() en lui transmettant entre parenthèses la catégorie à masquer */
masqueCategorie(categorie);
}
}
/* Fonction clickLienListe() */
/* i : index du marqueur dans le tableau tableauMarqueurs[i] */
function clickLienListe(i) {
/* Déclenche un "click" sur le marqueur "tableauMarqueurs[i]" */
GEvent.trigger(tableauMarqueurs[i],"click");
}
/* Fonction creationDeLaListeDeSelection() */
function creationDeLaListeDeSelection() {
/* htmlalpha : Création de "htmlalpha" (chaine vide) devant contenir la liste des noms correspondant à la catégorie "alpha" */
var htmlalpha = "";
/* htmlbravo : Création de "htmlbravo" (chaine vide) devant contenir la liste des noms correspondant à la catégorie "bravo" */
var htmlbravo = "";
/* htmlcharlie : Création de "htmlcharlie" (chaine vide) devant contenir la liste des noms correspondant à la catégorie "charlie" */
var htmlcharlie = "";
/* htmldelta : Création de "htmldelta" (chaine vide) devant contenir la liste des noms correspondant à la catégorie "delta" */
var htmldelta = "";
/* Création d'une boucle sur tous les marqueurs contenus dans le tableau nommé "tableauMarqueurs" */
for (var i=0; i<tableauMarqueurs.length; i++) {
/* Si la catégorie du marqueur "tableauMarqueurs[i]" est égal à la catégorie "alpha" */
if (tableauMarqueurs[i].marqueurCategorie=="alpha") {
/* Alors on ajoute à "htmlalpha" le nom du marqueur sous la forme d'un lien javascript */
htmlalpha += '<div><a href="javascript:clickLienListe(' + i + ')">' + tableauMarqueurs[i].marqueurNom + '</a></div>';
}
/* Si la catégorie du marqueur "tableauMarqueurs[i]" est égal à la catégorie "bravo" */
if (tableauMarqueurs[i].marqueurCategorie=="bravo") {
/* Alors on ajoute à "htmlbravo" le nom du marqueur sous la forme d'un lien javascript */
htmlbravo += '<div><a href="javascript:clickLienListe(' + i + ')">' + tableauMarqueurs[i].marqueurNom + '</a></div>';
}
/* Si la catégorie du marqueur "tableauMarqueurs[i]" est égal à la catégorie "charlie" */
if (tableauMarqueurs[i].marqueurCategorie=="charlie") {
/* Alors on ajoute à "htmlcharlie" le nom du marqueur sous la forme d'un lien javascript */
htmlcharlie += '<div><a href="javascript:clickLienListe(' + i + ')">' + tableauMarqueurs[i].marqueurNom + '</a></div>';
}
/* Si la catégorie du marqueur "tableauMarqueurs[i]" est égal à la catégorie "delta" */
if (tableauMarqueurs[i].marqueurCategorie=="delta") {
/* Alors on ajoute à "htmldelta" le nom du marqueur sous la forme d'un lien javascript */
htmldelta += '<div><a href="javascript:clickLienListe(' + i + ')">' + tableauMarqueurs[i].marqueurNom + '</a></div>';
}
}
/* Le contenu de la balise <div> ayant pour identifiant id="listeSelectionalpha" est égal à "htmlalpha" */
document.getElementById("listeSelectionalpha").innerHTML = htmlalpha;
/* Le contenu de la balise <div> ayant pour identifiant id="listeSelectionbravo" est égal à "htmlbravo" */
document.getElementById("listeSelectionbravo").innerHTML = htmlbravo;
/* Le contenu de la balise <div> ayant pour identifiant id="listeSelectioncharlie" est égal à "htmlcharlie" */
document.getElementById("listeSelectioncharlie").innerHTML = htmlcharlie;
/* Le contenu de la balise <div> ayant pour identifiant id="listeSelectiondelta" est égal à "htmldelta" */
document.getElementById("listeSelectiondelta").innerHTML = htmldelta;
}
/* Fonction initialize() */
function initialize() {
/* Configuration du miniIcone */
miniIcone = new GIcon();
miniIcone.iconSize=new GSize(12,20);
miniIcone.shadowSize=new GSize(20,22);
miniIcone.iconAnchor=new GPoint(6,20);
miniIcone.infoWindowAnchor=new GPoint(5,1);
/* On insère dans le tableau "tableauIcones" les différents icônes (un icône par catégorie) */
/* tableauIcones["alpha"] : contient les caratéristiques de l'icône correspondant à la catégorie "alpha" : icône rouge */
tableauIcones["alpha"] = new GIcon(miniIcone, "http://labs.google.com/ridefinder/images/mm_20_red.png", null, "http://labs.google.com/ridefinder/images/mm_20_shadow.png");
/* tableauIcones["bravo"] : contient les caratéristiques de l'icône correspondant à la catégorie "bravo" : icône vert */
tableauIcones["bravo"] = new GIcon(miniIcone, "http://labs.google.com/ridefinder/images/mm_20_green.png", null, "http://labs.google.com/ridefinder/images/mm_20_shadow.png");
/* tableauIcones["charlie"] : contient les caratéristiques de l'icône correspondant à la catégorie "charlie" : icône bleu */
tableauIcones["charlie"] = new GIcon(miniIcone, "http://labs.google.com/ridefinder/images/mm_20_blue.png", null, "http://labs.google.com/ridefinder/images/mm_20_shadow.png");
/* tableauIcones["delta"] : contient les caratéristiques de l'icône correspondant à la catégorie "delta" : icône orange */
tableauIcones["delta"] = new GIcon(miniIcone, "http://labs.google.com/ridefinder/images/mm_20_orange.png", null, "http://labs.google.com/ridefinder/images/mm_20_shadow.png");
/* Création d'une nouvelle carte nommée "maCarte" qui s'affichera dans la <div> ayant pour identifiant id="EmplacementDeMaCarte" */
maCarte = new GMap2(document.getElementById("EmplacementDeMaCarte"));
/* Ajout à la carte nommée "maCarte" d'un nouveau contrôle : Déplacement + Zoom */
maCarte.addControl(new GLargeMapControl());
/* Ajout à la carte nommée "maCarte" d'un nouveau contrôle : Menu déroulant pour sélectionner le type de carte */
maCarte.addControl(new GMenuMapTypeControl());
/* Centre la carte nommée "maCarte" sur la latitude : 47.382544 et la longitude : 0.690765 avec un niveau de zoom égal à 9 */
maCarte.setCenter(new GLatLng(47.382544, 0.690765), 9);
/* */
GDownloadUrl(urlXml, function(doc) {
/* */
var xmlDoc = GXml.parse(doc);
/* */
var marqueurs = xmlDoc.documentElement.getElementsByTagName("marker");
/* */
for (var i = 0; i < marqueurs.length; i++) {
/* nom : nom du marqueur */
var nom = marqueurs[i].getAttribute("nom");
/* adresse : adresse postale du marqueur */
var adresse = marqueurs[i].getAttribute("adresse");
/* longitude : longitude du marqueur */
var longitude = parseFloat(marqueurs[i].getAttribute("lng"));
/* latitude : latitude du marqueur */
var latitude = parseFloat(marqueurs[i].getAttribute("lat"));
/* categorie : catégorie à laquelle le marqueur appartient */
var categorie = marqueurs[i].getAttribute("type");
/* point : point d'ancrage du marqueur */
var point = new GLatLng(latitude,longitude);
/* html : texte contenu dans l'info-bulle */
var html = "<b>" + nom + "</b><br />"
+ "<b>Adresse</b> : " + adresse + "<br /><br />"
+ "<b>Catégorie</b> : " + categorie + "<br />"
+ "<b>Latitude</b> : " + latitude + "<br />"
+ "<b>Longitude</b> : " + longitude;
/* Création du "marqueur" par appel de la fonction "creationDuMarqueur()" */
/* en lui transmettant les données du marqueur : point, nom, html, categorie */
var marqueur = creationDuMarqueur(point, nom, html, categorie);
/* Affichage du "marqueur" sur la carte n ommée "maCarte" */
maCarte.addOverlay(marqueur);
/* Tri du tableau nommé "tableauMarqueurs" */
tableauMarqueurs.sort();
}
/* Appel de la fonction afficheCategorie("charlie") pour afficher tous les marqueurs de la catégorie "charlie" */
afficheCategorie("charlie");
/* Appel de la fonction masqueCategorie("alpha") pour masquer tous les marqueurs de la catégorie "alpha" */
masqueCategorie("alpha");
/* Appel de la fonction masqueCategorie("bravo") pour masquer tous les marqueurs de la catégorie "bravo" */
masqueCategorie("bravo");
/* Appel de la fonction masqueCategorie("delta") pour masquer tous les marqueurs de la catégorie "delta" */
masqueCategorie("delta");
/* Appel de la fonction masqueCategorie() pour */
creationDeLaListeDeSelection();
});
}
</script>
</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="EmplacementDeMaCarte". -->
<!-- Elle fera donc 100% de large et 400 pixels de haut. -->
<div id="EmplacementDeMaCarte" style="width: 100%; height: 400px"></div>
<table width="100%">
<tr>
<th width="25%">
<div align="center">alpha <img src="http://labs.google.com/ridefinder/images/mm_20_red.png" alt="marqueur rouge" /> <input type="checkbox" id="casealpha" onClick="clickCaseACocher(this,'alpha')" /></div>
</th>
<th width="25%">
<div align="center">bravo <img src="http://labs.google.com/ridefinder/images/mm_20_green.png" alt="marqueur vert" /> <input type="checkbox" id="casebravo" onClick="clickCaseACocher(this,'bravo')" /></div>
</th>
<th width="25%">
<div align="center">charlie <img src="http://labs.google.com/ridefinder/images/mm_20_blue.png" alt="marqueur bleu" /> <input type="checkbox" id="casecharlie" onClick="clickCaseACocher(this,'charlie')" /></div>
</th>
<th width="25%">
<div align="center">delta <img src="http://labs.google.com/ridefinder/images/mm_20_orange.png" alt="marqueur orange" /> <input type="checkbox" id="casedelta" onClick="clickCaseACocher(this,'delta')" /></div>
</th>
</tr>
<tr>
<td height="150" valign="top" style="text-decoration: none; color: #000; overflow: auto;">
<div id="listeSelectionalpha" style="width:150px; height: 150px; overflow: auto;"></div>
</td>
<td height="150" valign="top" style="text-decoration: none; color: #000; overflow: auto;">
<div id="listeSelectionbravo" style="width:150px; height: 150px; overflow: auto;"></div>
</td>
<td height="150" valign="top" style="text-decoration: none; color: #000; overflow: auto;">
<div id="listeSelectioncharlie" style="width:150px; height: 150px; overflow: auto;"></div>
</td>
<td height="150" valign="top" style="text-decoration: none; color: #000; overflow: auto;">
<div id="listeSelectiondelta" style="width:150px; height: 150px; overflow: auto;"></div>
</td>
</tr>
</table>
<!-- Si JavaScript n'est pas activé sur votre navigateur, le message d'alerte situé entre les balises <noscript></noscript> s'affichera -->
<noscript>
<p>Attention : </p>
<p>Afin de pouvoir utiliser Google Maps, JavaScript doit être activé.</p>
<p>Or, il semble que JavaScript est désactivé ou qu'il n'est pas supporté par votre navigateur.</p>
<p>Pour afficher Google Maps, activez JavaScript en modifiant les options de votre navigateur, puis essayez à nouveau.</p>
</noscript>
</body>
</html>
La fonction GDownloadUrl permet de récupérer simplement, via une URL, des données de façon asynchrone.
Attention :
GDownloadUrl utilise XMLHttpRequest pour exécuter la requête, il est donc impératif que le document qui execute ce code soit sur le même serveur que le fichier contenant les données (data.xml).
Exemple :
Si vous copiez le code de cet exemple, et que vous l'installez sur votre serveur à l'adresse suivante :
http://www.votreserveur.fr/votre_chemin/carte_avec_cases_a_cocher.htm
veillez à installer votre fichier data.xml sur le même serveur et à modifier la ligne var urlXml pour qu'elle cible votre fichier data.xml :
var urlXml = "http://www.votreserveur.fr/votre_chemin/data.xml";
Dans le cas contraire, l'accès au fichier data.xml sera impossible et aucun marqueur ne viendra s'afficher sur votre carte.
