Polygone
Surligner un marqueur à l'aide d'un cercle de couleur et lors de sa sélection dans une liste.
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 surligner, à l'aide d'un disque rouge, le marqueur, lorsque celui-ci est survolé par le curseur, ou bien lorsque son lien, situé dans une liste, est survolé.
Les caractéristiques de ce disque sont :
De plus, tout click sur le marqueur, ou sur son lien situé dans une liste, déclenchera l'ouverture de l'info-bulle associée à ce lien.
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>
<title>Touraineverte.com - Surligner marqueur - Marqueur et Liste</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;
var monMarqueur;
var listeHTML = "";
var cercleSurligneur;
var tableauMarqueurs = [];
/* 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";
/* Caractéristiques du disque permettant de surligner le marqueur */
var cercleCouleur = "#ff0000";
var cercleEpaisseur = "1";
var cercleOpacite = ".9";
var disqueCouleur = "#ff0000";
var disqueOpacite = ".4";
/* Fonction initialize() */
function initialize(){
/* Si le navigateur est compatible avec l'API de Google Maps ... */
if (google.maps.BrowserIsCompatible()) {
/* ... Fixe les caractéristiques de l'icône nommé "miniIconeRouge" ... */
miniIconeRouge = new google.maps.Icon();
miniIconeRouge.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
miniIconeRouge.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
miniIconeRouge.iconSize = new google.maps.Size(12, 20);
miniIconeRouge.shadowSize = new google.maps.Size(22, 20);
miniIconeRouge.iconAnchor = new google.maps.Point(6, 20);
miniIconeRouge.infoWindowAnchor = new google.maps.Point(5, 1);
/* ... Création d'une nouvelle carte ayant pour nom "maCarte" et qui se situera en lieu et place de la <div> ayant pour identifiant id="EmplacementDeCarteGlobale" ... */
maCarte = new google.maps.Map2(document.getElementById("EmplacementDeCarteGlobale"));
/* ... Desactivation du double click sur la carte nommée "maCarte" permettant de zoomer ... */
maCarte.disableDoubleClickZoom();
/* ... Ajout à la carte nommée "maCarte" du contrôle SmallMapControl : Petit contrôle ... */
maCarte.addControl(new google.maps.SmallMapControl());
/* ... Ajout à la carte nommée "maCarte" du contrôle MenuMapTypeControl : Menu déroulant type de carte ... */
maCarte.addControl(new google.maps.MenuMapTypeControl());
/* ... La carte nommée "MaCarte" est centrée sur la Latitude 47.391174, la Longitude 0.722265, avec un niveau de zoom égal à 9 ... */
maCarte.setCenter(new google.maps.LatLng(47.391174,0.722265), 9);
/* ... Ajout d'un observateur d'événement à la carte nommée "MaCarte" ... */
/* ... L'événement observé est "zoomend" ... */
google.maps.Event.addListener(maCarte, "zoomend", function() {
/* ... Si L'événement "zoomend" est déclenché, on appelle de la fonction surligne() ... */
surligne();
});
/* ... A l'aide de GXmlHttp on construit, puis on envoie une requête, de type GET, pour charger ... */
/* ... les données contenues dans urlXml et récupérer les caractéristiques de ... */
/* ... chaque marqueur (lat, lng, point, type, nom) nécessaire à sa construction ... */
var request = google.maps.XmlHttp.create();
request.open("GET", urlXml, true);
/* ... Spécifie la fonction à appeler lorsque la propriété readyState varie ... */
request.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 (request.readyState == 4) {
/* ... "xmlDoc" contient la réponse de la requête au format XML ... */
var xmlDoc = request.responseXML;
/* ... "marqueurs" : est un tableau contenant toutes les balises <marker /> du fichier "data.xml" ... */
var marqueurs = xmlDoc.documentElement.getElementsByTagName("marker");
listeHTML += '<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. ... */
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"));
/* ... point : point d'ancrage du marqueur, aux coordonnées "lat" et "lng" ... */
var point = new google.maps.LatLng(lat,lng);
/* ... type : Catégorie d'appartenance du marqueur ... */
var type = marqueurs[i].getAttribute("type");
/* ... nom : Nom de la société correspondant au marqueur ... */
var nom = marqueurs[i].getAttribute("nom");
/* ... Création du marqueur nommé "marqueur" par appel de la fonction "creationMarqueur()" ... */
/* ... en lui transmettant les données : point, nom, type, lat, lng, i ... */
var marqueur = creationMarqueur(point,nom,type,lat,lng,i);
/* ... Affiche sur la carte nommée "maCarte", le marqueur nommé "marqueur" ... */
maCarte.addOverlay(marqueur);
}
listeHTML += '</ol>';
/* ... Affiche la liste "listeHTML" à l'intérieur de la balise <div> ayant pour identifiant id = "EmplacementDeLaListe" ... */
document.getElementById("EmplacementDeLaListe").innerHTML = listeHTML;
}
}
request.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 surligneMarqueurActuel() */
function surligneMarqueurActuel(marqueur){
/* ... marqueurPoint : récupère les coordonnées du marqueur nommé "marqueur" ... */
var marqueurPoint = marqueur.getPoint();
/* ... Création d'un tableau nommé "pointsCercle". Ce tableau est destiné à contenir ... */
/* ... tous les points nécessaires à la construction du cercle nommé "cercleSurligneur" ... */
var pointsCercle = [];
/* ... Si un cercle nommé "cercleSurligneur" existe déjà ... */
if (cercleSurligneur) {
/* ... Alors on efface de la carte nommée "maCarte" le cercle nommé "cercleSurligneur" ... */
maCarte.removeOverlay(cercleSurligneur);
}
/* ... Paramètrage et enregistrements des points, nécessaires à la construction ... */
/* ... du cercle nommé "cercleSurligneur" dans le tableau nommé "pointsCercle" ... */
var maCarteNormalProj = G_NORMAL_MAP.getProjection();
var maCarteZoom = maCarte.getZoom();
var clickedPixel = maCarteNormalProj.fromLatLngToPixel(marqueurPoint, maCarteZoom);
var polySmallRadius = 20;
var polyNumSides = 20;
var polySideLength = 18;
for (var a = 0; a<(polyNumSides+1); a++) {
var aRad = polySideLength*a*(Math.PI/180);
var polyRadius = polySmallRadius;
var pixelX = clickedPixel.x + polyRadius * Math.cos(aRad);
var pixelY = clickedPixel.y + polyRadius * Math.sin(aRad);
var polyPixel = new google.maps.Point(pixelX,pixelY);
var polyPoint = maCarteNormalProj.fromPixelToLatLng(polyPixel,maCarteZoom);
pointsCercle.push(polyPoint);
}
/* ... "cercleSurligneur" est un polygone construit à partir des points enregistrés dans le tableau nommé "pointsCercle" ... */
/* ... Ce polygone reprèsente en fait le cercle qui permet de surligner un maqueur et dont les caractéristiques sont ... */
/* ... fixées par les paramètres suivants : cercleCouleur, cercleEpaisseur, cercleOpacite, disqueCouleur, disqueOpacite ... */
cercleSurligneur = new google.maps.Polygon(pointsCercle,cercleCouleur,cercleEpaisseur,cercleOpacite,disqueCouleur,disqueOpacite);
/* ... Ajout, à la carte nommée "maCarte" le polygone nommé "cercleSurligneur" (c'est à dire le cercle situé à la base du marqueur). */
maCarte.addOverlay(cercleSurligneur);
}
/* Fonction creationMarqueur() */
/* point : Point sur lequel le marqueur est ancré */
/* nom : Nom de la société */
/* html : Texte contenu dans l'info-bulle liée au marqueur */
/* lat : Latitude */
/* lng : Longitude */
/* i : Indice */
function creationMarqueur(point, nom, html, lat, lng, i) {
/* ... La variable "texteInfobulle" contient les informations s'affichant dans l'info-bulle ... */
var texteInfobulle = "<b>Société</b> : " + nom + "<br /><b>Catégorie</b> : " + html + "<br /><b>Latitude</b> : " + lat + "<br /><b>Longitude</b> : " + lng;
/* ... Création d'un nouveau marqueur nommé "marqueur" ancré sur le point "point" et représenté par l'icône "miniIconeRouge" ... */
var marqueur = new google.maps.Marker(point, miniIconeRouge);
/* ... Ajoute au marqueur nommé "marqueur" une propriété "cotenuInfobulle" dont la valeur est égale à "texteInfobulle" ... */
marqueur.contenuInfobulle = texteInfobulle;
/* ... Ajout d'un observateur d'événement marqueur nommé "marqueur" ... */
/* ... L'événement observé est "click" ... */
/* ... Lorsque vous cliquez sur le marqueur nommé "marqueur", la fonction située entre les {} sera alors executée ... */
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 de "marqueur.contenuInfobulle" c'est à dire "texteInfobulle" ... */
marqueur.openInfoWindowHtml(marqueur.contenuInfobulle);
/* ... Appel la fonction "surligneMarqueurActuel" en lui transmettant le marqueur nommé "marqueur" afin de le surligner ... */
surligneMarqueurActuel(marqueur);
});
/* ... Ajout d'un observateur d'événement au marqueur nommé "marqueur" ... */
/* ... L'événement observé est "mouseover" ... */
/* ... Lorsque le curseur de votre souris est sur le marqueur nommé "marqueur", la fonction située entre les {} sera alors executée ... */
google.maps.Event.addListener(marqueur, "mouseover", function() {
/* ... Appel la fonction "surligneMarqueurActuel" en lui transmettant le marqueur nommé "marqueur" afin de le surligner ... */
surligneMarqueurActuel(marqueur);
});
/* ... Ajout d'un observateur d'événement marqueur nommé "marqueur" ... */
/* ... L'événement observé est "mouseout" ... */
/* ... Lorsque le curseur de votre souris quitte le marqueur nommé "marqueur", la fonction située entre les {} sera alors executée ... */
google.maps.Event.addListener(marqueur, "mouseout", function() {
/* ... Si le cercle nommé "cercleSurligneur" existe, alors ... */
if (cercleSurligneur) {
/* ... On efface, de la carte nommée "maCarte", le cercle nommé "cercleSurligneur" ... */
maCarte.removeOverlay(cercleSurligneur);
}
});
/* ... Ajout du marqueur nommé "marqueur" dans le tableau nommé "tableauMarqueurs" avec l'indice "i" ... */
tableauMarqueurs[i] = marqueur;
/* ... Création et ajout du lien dans "listeHTML" ... */
listeHTML += '<li><a href="javascript:clickLien(' + i + ')" onmouseover="surligne(' + i + ')" onmouseout="maCarte.removeOverlay(cercleSurligneur)">' + nom+ '</a></li>';
/* ... On retourne le marqueur ... */
return marqueur;
}
/* Fonction clickLien() */
/* Cette fonction permet d'ouvrir l'info-bulle liée au marqueur lorsque l'on clique sur son lien inclus dans la liste */
/* i : index du marqueur dans le tableau */
function clickLien(i) {
/* ... Ouverture de l'info-bulle liée au marqueur placé dans le tableau nommé "tableauMarqueurs" avec l'index "i" ... */
/* ... Le contenu de l'info-bulle est égal au contenu placé dans le tableau "tableauMarqueurs[i].contenuInfobulle" ... */
tableauMarqueurs[i].openInfoWindowHtml(tableauMarqueurs[i].contenuInfobulle);
}
/* Fonction surligne() */
/* Cette fonction permet de surligner le marqueur "tableauMarqueurs[i]" lorsque l'on survole son lien inclus dans la liste */
/* i : index du marqueur dans le tableau */
function surligne(i){
/* ... Surligne le marqueur "tableauMarqueurs[i]" en appelant la fonction "surligneMarqueurActuel()" ... */
surligneMarqueurActuel(tableauMarqueurs[i]);
}
google.setOnLoadCallback(initialize);
</script>
<style type="text/css">
<!--
#Container {
position:relative;
width:100%;
height:400px;
margin:-5px 5px 5px -5px;
z-index:2;
}
#EmplacementDeCarteGlobale {
float: left;
width: 60%;
height: 400px;
border: none;
}
#EmplacementDeLaListe {
overflow: auto;
float: right;
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>
<!-- 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 - Surligner marqueur - Marqueur et Liste</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 type="text/javascript" src="http://maps.google.com/maps?file=api&v=2.x&key=Inserez_Votre_Clef_API_Ici&sensor=false"></script>
<script type="text/javascript">
/* Déclaration des variables globales */
var maCarte;
var monMarqueur;
var listeHTML = "";
var cercleSurligneur;
var tableauMarqueurs = [];
/* 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";
/* Caractéristiques du disque permettant de surligner le marqueur */
var cercleCouleur = "#ff0000";
var cercleEpaisseur = "1";
var cercleOpacite = ".9";
var disqueCouleur = "#ff0000";
var disqueOpacite = ".4";
/* Fonction initialize() */
function initialize(){
/* Si le navigateur est compatible avec l'API de Google Maps ... */
if (GBrowserIsCompatible()) {
/* ... Fixe les caractéristiques de l'icône nommé "miniIconeRouge" ... */
miniIconeRouge = new GIcon();
miniIconeRouge.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
miniIconeRouge.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
miniIconeRouge.iconSize = new GSize(12, 20);
miniIconeRouge.shadowSize = new GSize(22, 20);
miniIconeRouge.iconAnchor = new GPoint(6, 20);
miniIconeRouge.infoWindowAnchor = new GPoint(5, 1);
/* ... Création d'une nouvelle carte ayant pour nom "maCarte" et qui se situera en lieu et place de la <div> ayant pour identifiant id="EmplacementDeCarteGlobale" ... */
maCarte = new GMap2(document.getElementById("EmplacementDeCarteGlobale"));
/* ... Desactivation du double click sur la carte nommée "maCarte" permettant de zoomer ... */
maCarte.disableDoubleClickZoom();
/* ... Ajout à la carte nommée "maCarte" du contrôle SmallMapControl : Petit contrôle ... */
maCarte.addControl(new GSmallMapControl());
/* ... Ajout à la carte nommée "maCarte" du contrôle MenuMapTypeControl : Menu déroulant type de carte ... */
maCarte.addControl(new GMenuMapTypeControl());
/* ... La carte nommée "MaCarte" est centrée sur la Latitude 47.391174, la Longitude 0.722265, avec un niveau de zoom égal à 9 ... */
maCarte.setCenter(new GLatLng(47.391174,0.722265), 9);
/* ... Ajout d'un observateur d'événement à la carte nommée "MaCarte" ... */
/* ... L'événement observé est "zoomend" ... */
GEvent.addListener(maCarte, "zoomend", function() {
/* ... Si L'événement "zoomend" est déclenché, on appelle de la fonction surligneMarqueurActuel() ... */
surligneMarqueurActuel();
});
/* ... A l'aide de GXmlHttp on construit, puis on envoie une requête, de type GET, pour charger ... */
/* ... les données contenues dans urlXml et récupérer les caractéristiques de ... */
/* ... chaque marqueur (lat, lng, point, type, nom) nécessaire à sa construction ... */
var request = GXmlHttp.create();
request.open("GET", urlXml, true);
/* ... Spécifie la fonction à appeler lorsque la propriété readyState varie ... */
request.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 (request.readyState == 4) {
/* ... "xmlDoc" contient la réponse de la requête au format XML ... */
var xmlDoc = request.responseXML;
/* ... "marqueurs" : est un tableau contenant toutes les balises <marker /> du fichier "data.xml" ... */
var marqueurs = xmlDoc.documentElement.getElementsByTagName("marker");
listeHTML += '<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. ... */
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"));
/* ... point : point d'ancrage du marqueur, aux coordonnées "lat" et "lng" ... */
var point = new GLatLng(lat,lng);
/* ... type : Catégorie d'appartenance du marqueur ... */
var type = marqueurs[i].getAttribute("type");
/* ... nom : Nom de la société correspondant au marqueur ... */
var nom = marqueurs[i].getAttribute("nom");
/* ... Création du marqueur nommé "marqueur" par appel de la fonction "creationMarqueur()" ... */
/* ... en lui transmettant les données : point, nom, type, lat, lng, i ... */
var marqueur = creationMarqueur(point,nom,type,lat,lng,i);
/* ... Affiche sur la carte nommée "maCarte", le marqueur nommé "marqueur" ... */
maCarte.addOverlay(marqueur);
}
listeHTML += '</ol>';
/* ... Affiche la liste "listeHTML" à l'intérieur de la balise <div> ayant pour identifiant id = "EmplacementDeLaListe" ... */
document.getElementById("EmplacementDeLaListe").innerHTML = listeHTML;
}
}
request.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 surligneMarqueurActuel() */
function surligneMarqueurActuel(marqueur){
/* ... marqueurPoint : récupère les coordonnées du marqueur nommé "marqueur" ... */
var marqueurPoint = marqueur.getPoint();
/* ... Création d'un tableau nommé "pointsCercle". Ce tableau est destiné à contenir ... */
/* ... tous les points nécessaires à la construction du cercle nommé "cercleSurligneur" ... */
var pointsCercle = [];
/* ... Si un cercle nommé "cercleSurligneur" existe déjà ... */
if (cercleSurligneur) {
/* ... Alors on efface de la carte nommée "maCarte" le cercle nommé "cercleSurligneur" ... */
maCarte.removeOverlay(cercleSurligneur);
}
/* ... Paramètrage et enregistrements des points, nécessaires à la construction ... */
/* ... du cercle nommé "cercleSurligneur" dans le tableau nommé "pointsCercle" ... */
var maCarteNormalProj = G_NORMAL_MAP.getProjection();
var maCarteZoom = maCarte.getZoom();
var clickedPixel = maCarteNormalProj.fromLatLngToPixel(marqueurPoint, maCarteZoom);
var polySmallRadius = 20;
var polyNumSides = 20;
var polySideLength = 18;
for (var a = 0; a<(polyNumSides+1); a++) {
var aRad = polySideLength*a*(Math.PI/180);
var polyRadius = polySmallRadius;
var pixelX = clickedPixel.x + polyRadius * Math.cos(aRad);
var pixelY = clickedPixel.y + polyRadius * Math.sin(aRad);
var polyPixel = new GPoint(pixelX,pixelY);
var polyPoint = maCarteNormalProj.fromPixelToLatLng(polyPixel,maCarteZoom);
pointsCercle.push(polyPoint);
}
/* ... "cercleSurligneur" est un polygone construit à partir des points enregistrés dans le tableau nommé "pointsCercle" ... */
/* ... Ce polygone reprèsente en fait le cercle qui permet de surligner un maqueur et dont les caractéristiques sont ... */
/* ... fixées par les paramètres suivants : cercleCouleur, cercleEpaisseur, cercleOpacite, disqueCouleur, disqueOpacite ... */
cercleSurligneur = new GPolygon(pointsCercle,cercleCouleur,cercleEpaisseur,cercleOpacite,disqueCouleur,disqueOpacite);
/* ... Ajout, à la carte nommée "maCarte" le polygone nommé "cercleSurligneur" (c'est à dire le cercle situé à la base du marqueur). */
maCarte.addOverlay(cercleSurligneur);
}
/* Fonction creationMarqueur() */
/* point : Point sur lequel le marqueur est ancré */
/* nom : Nom de la société */
/* html : Texte contenu dans l'info-bulle liée au marqueur */
/* lat : Latitude */
/* lng : Longitude */
/* i : Indice */
function creationMarqueur(point, nom, html, lat, lng, i) {
/* ... La variable "texteInfobulle" contient les informations s'affichant dans l'info-bulle ... */
var texteInfobulle = "<b>Société</b> : " + nom + "<br /><b>Catégorie</b> : " + html + "<br /><b>Latitude</b> : " + lat + "<br /><b>Longitude</b> : " + lng;
/* ... Création d'un nouveau marqueur nommé "marqueur" ancré sur le point "point" et représenté par l'icône "miniIconeRouge" ... */
var marqueur = new GMarker(point, miniIconeRouge);
/* ... Ajoute au marqueur nommé "marqueur" une propriété "cotenuInfobulle" dont la valeur est égale à "texteInfobulle" ... */
marqueur.contenuInfobulle = texteInfobulle;
/* ... Ajout d'un observateur d'événement marqueur nommé "marqueur" ... */
/* ... L'événement observé est "click" ... */
/* ... Lorsque vous cliquez sur le marqueur nommé "marqueur", la fonction située entre les {} sera alors executée ... */
GEvent.addListener(marqueur, "click", function() {
/* ... Ouverture de l'info-bulle liée au marqueur nommé "marqueur", et affichage à l'intérieur de celle-ci de "marqueur.contenuInfobulle" c'est à dire "texteInfobulle" ... */
marqueur.openInfoWindowHtml(marqueur.contenuInfobulle);
/* ... Appel la fonction "surligneMarqueurActuel" en lui transmettant le marqueur nommé "marqueur" afin de le surligner ... */
surligneMarqueurActuel(marqueur);
});
/* ... Ajout d'un observateur d'événement au marqueur nommé "marqueur" ... */
/* ... L'événement observé est "mouseover" ... */
/* ... Lorsque le curseur de votre souris est sur le marqueur nommé "marqueur", la fonction située entre les {} sera alors executée ... */
GEvent.addListener(marqueur, "mouseover", function() {
/* ... Appel la fonction "surligneMarqueurActuel" en lui transmettant le marqueur nommé "marqueur" afin de le surligner ... */
surligneMarqueurActuel(marqueur);
});
/* ... Ajout d'un observateur d'événement marqueur nommé "marqueur" ... */
/* ... L'événement observé est "mouseout" ... */
/* ... Lorsque le curseur de votre souris quitte le marqueur nommé "marqueur", la fonction située entre les {} sera alors executée ... */
GEvent.addListener(marqueur, "mouseout", function() {
/* ... Si le cercle nommé "cercleSurligneur" existe, alors ... */
if (cercleSurligneur) {
/* ... On efface, de la carte nommée "maCarte", le cercle nommé "cercleSurligneur" ... */
maCarte.removeOverlay(cercleSurligneur);
}
});
/* ... Ajout du marqueur nommé "marqueur" dans le tableau nommé "tableauMarqueurs" avec l'indice "i" ... */
tableauMarqueurs[i] = marqueur;
/* ... Création et ajout du lien dans "listeHTML" ... */
listeHTML += '<li><a href="javascript:clickLien(' + i + ')" onmouseover="surligne(' + i + ')" onmouseout="maCarte.removeOverlay(cercleSurligneur)">' + nom+ '</a></li>';
/* ... On retourne le marqueur ... */
return marqueur;
}
/* Fonction clickLien() */
/* Cette fonction permet d'ouvrir l'info-bulle liée au marqueur lorsque l'on clique sur son lien inclus dans la liste */
/* i : index du marqueur dans le tableau */
function clickLien(i) {
/* ... Ouverture de l'info-bulle liée au marqueur placé dans le tableau nommé "tableauMarqueurs" avec l'index "i" ... */
/* ... Le contenu de l'info-bulle est égal au contenu placé dans le tableau "tableauMarqueurs[i].contenuInfobulle" ... */
tableauMarqueurs[i].openInfoWindowHtml(tableauMarqueurs[i].contenuInfobulle);
}
/* Fonction surligne() */
/* Cette fonction permet de surligner le marqueur "tableauMarqueurs[i]" lorsque l'on survole son lien inclus dans la liste */
/* i : index du marqueur dans le tableau */
function surligne(i){
/* ... Surligne le marqueur "tableauMarqueurs[i]" en appelant la fonction "surligneMarqueurActuel()" ... */
surligneMarqueurActuel(tableauMarqueurs[i]);
}
</script>
<style type="text/css">
<!--
#Container {
position:relative;
width:100%;
height:400px;
margin:-5px 5px 5px -5px;
z-index:2;
}
#EmplacementDeCarteGlobale {
float: left;
width: 60%;
height: 400px;
border: none;
}
#EmplacementDeLaListe {
overflow: auto;
float: right;
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>
<!-- 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>
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.
Pour modifier les caractéristiques du disque surlignant le marqueur, il vous suffit de modifier les paramètres suivants :
var cercleCouleur : Couleur du cercle autour du disque : #ff0000
var cercleEpaisseur : Épaisseur du trait du cercle autour du disque : 1
var cercleOpacite : Opacité du cercle autour du disque : .9 ( valeur de 0 à 1 )
var disqueCouleur : Couleur du disque : #ff0000
var disqueOpacite : Opacité du disque : .4 ( valeur de 0 à 1 )