Api Google Maps flèche Controle flèche Créer une liste de marqueurs à partir des données contenues dans un fichier .xml.

CREEZ UNE LISTE DE MARQUEURS A PARTIR D'UN FICHIER .XML

Article créé le : 30/01/2009
 

Présentation

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 :

  • déclenche l'ouverture de son info-bulle.

Tout click sur un marqueur situé sur la carte :

  • déclenche l'ouverture de son info-bulle associée.

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>

Carte

Code : Avec Google Ajax API Loader

  • <?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=Insérez_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>

Code : Sans Google Ajax API Loader

  • <?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=Insérez_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>

Remarque(s)

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.