Polygone
Surligner un marqueur à l'aide un cercle de couleur sur la carte.
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.
Les caractéristiques de ce disque sont :
Les données, nécessaires à la construction de la carte, sont extraites du fichier data.xml :
<?xml version="1.0" encoding="UTF-8"?> <markers> <marker lat="47.391174" lng="0.722265" type="alpha" nom="Société Zeus" adresse="avenue de le République" codepostal="37700" ville="Saint-Pierre-des-Corps"/> <marker lat="47.417692" lng="0.691023" type="alpha" nom="Société Gaïa" adresse="avenue Maginot" codepostal="37100" ville="Tours"/> <marker lat="47.382602" lng="0.726686" type="alpha" nom="Société Éros" adresse="rue Grands Mortiers|ZA Grands Mortiers" codepostal="37700" ville="Saint-Pierre-des-Corps"/> <marker lat="47.382602" lng="0.726686" type="bravo" nom="Société Héméra" adresse="rue Gustave Eiffel|Z.I. N° 1" codepostal="37300" ville="Joué-les-Tours"/> <marker lat="47.419094" lng="0.693244" type="alpha" nom="Société Nyx" adresse="avenue Andre Maginot" codepostal="37100" ville="Tours"/> <marker lat="47.419972" lng="0.662138" type="alpha" nom="Société Érèbe" adresse="boulevard Charles de Gaulle" codepostal="37540" ville="Saint-Cyr-sur-Loire"/> <marker lat="47.419722" lng="0.661333" type="alpha" nom="Société Thanatos" adresse="rue Pierre de Coubertin" codepostal="37540" ville="Saint-Cyr-sur-Loire"/> <marker lat="47.419777" lng="0.661055" type="alpha" nom="Société Hypnos" adresse="rue Pierre de Coubertin" codepostal="37540" ville="Saint-Cyr-sur-Loire"/> <marker lat="47.354685" lng="0.673428" type="alpha" nom="Société Éther" adresse="rue de Chambray" codepostal="37300" ville="Joué-les-Tours"/> <marker lat="47.395328" lng="0.746727" type="bravo" nom="Société Ouranos" adresse="ld Louche Saint Martin" codepostal="37700" ville="la-Ville-aux-Dames"/> <marker lat="47.358755" lng="0.734775" type="bravo" nom="Société Ouréa" adresse="rue Camusière" codepostal="37550" ville="Saint-Avertin"/> <marker lat="47.387418" lng="0.760717" type="bravo" nom="Société Pontos" adresse="rue Louise de la Vallière" codepostal="37700" ville="la-Ville-aux-Dames"/> <marker lat="47.459477" lng="0.674672" type="charlie" nom="Société Nérée" adresse="Z.I Les Gaudières" codepostal="37390" ville="Mettray"/> <marker lat="47.338365" lng="0.616983" type="charlie" nom="Société Thaumas" adresse="boulevard Jean Jaurès" codepostal="37510" ville="Ballan-Miré"/> <marker lat="47.464388" lng="0.773388" type="delta" nom="Société Phorcys" adresse="La Petite Baltière" codepostal="37210" ville="Rochecorbon"/> <marker lat="47.345453" lng="0.542879" type="alpha" nom="Société Céto" adresse="boulevard de Chinon" codepostal="37510" ville="Ballan-Miré"/> <marker lat="47.253136" lng="0.543823" type="charlie" nom="Société Eurybie" adresse="chemin des Aunays" codepostal="37190" ville="Saché"/> <marker lat="47.323465" lng="0.918732" type="delta" nom="Société Tartare" adresse="Aérodrome de Tours-Sorigny" codepostal="37250" ville="Sorigny"/> <marker lat="47.352780" lng="0.952377" type="delta" nom="Société Échidna" adresse="Aérodrome d'Amboise Dierre" codepostal="37150" ville="Dierre"/> <marker lat="47.547799" lng="0.546355" type="charlie" nom="Société Typhon" adresse="Le Moulin de Pérran" codepostal="37360" ville="Neuillé-Pont-Pierre"/> <marker lat="47.547799" lng="0.546355" type="alpha" nom="Société Coéos" adresse="route de Loches" codepostal="37170" ville="Chambray-lès-Tours"/> <marker lat="47.201180" lng="0.652281" type="bravo" nom="Société Crios" adresse="La Laurière - D21" codepostal="37260" ville="37260"/> <marker lat="47.424277" lng="0.982107" type="delta" nom="Société Japet" adresse="rue du Colombier" codepostal="37530" ville="Pocé-sur-Cisse"/> <marker lat="47.398349" lng="1.005764" type="alpha" nom="Société Hypérion" adresse="Boulevard Saint Denis Hors (D31)" codepostal="37400" ville="Amboise"/> <marker lat="47.617273" lng="0.595322" type="delta" nom="Société Océan" adresse="Héliport de Belleville" codepostal="37370" ville="Neuvy-le-Roi"/> <marker lat="47.164742" lng="0.786381" type="delta" nom="Société Cronos" adresse="Le Louroux" codepostal="37240" ville="Le-Louroux"/> <marker lat="47.451308" lng="0.320320" type="delta" nom="Société Thémis" adresse="Les Champs Marquis" codepostal="37340" ville="Savigné-sur-Lathan"/> <marker lat="47.254184" lng="0.300922" type="charlie" nom="Société Mnémosyne" adresse="rue Principale" codepostal="37420" ville="Rigny-Ussé"/> <marker lat="47.154945" lng="1.010517" type="delta" nom="Société Théia" adresse="Les Jolletières" codepostal="37600" ville="Loches"/> <marker lat="47.285197" lng="1.159358" type="delta" nom="Société Rhéa" adresse="Les Bruyères" codepostal="41400" ville="Saint-Georges-sur-Cher"/> <marker lat="47.343083" lng="1.185086" type="delta" nom="Société Téthys" adresse="rue Nationale" codepostal="41400" ville="Montrichard"/> <marker lat="47.063808" lng="0.492325" type="charlie" nom="Société Brontès" adresse="le Village du Bois" codepostal="37220" ville="Rilly-sur-Vienne"/> <marker lat="47.504830" lng="1.196705" type="delta" nom="Société Stéropès" adresse="route de Chouzy" codepostal="41150" ville="Onzain"/> <marker lat="47.166573" lng="0.239178" type="alpha" nom="Société Argès" adresse="rue du Commerce" codepostal="37500" ville="Chinon"/> </markers>
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xml:lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<!-- 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 i = 0;
var maCarte;
var monMarqueur;
var listeHTML;
var cercleSurligneur;
var marqueurActuel;
var tableauMarqueurs = [];
var tableauHtmls = [];
/* 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="EmplacementDeMaCarte" ... */
maCarte = new google.maps.Map2(document.getElementById("EmplacementDeMaCarte"));
/* ... 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 surligneMarqueurActuel() ... */
surligneMarqueurActuel();
});
/* ... 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 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;
/* ... "markers" : est un tableau contenant toutes les balises <marker /> du fichier "data.xml" ... */
var markers = xmlDoc.documentElement.getElementsByTagName("marker");
listeHTML += '<ol>';
/* ... On fait une boucle sur "markers" pour extraire les caractéristiques de chaque marqueur ... */
/* ... et permettre l'affichage de ceux-ci sur la carte. ... */
for (var i = 0; i < markers.length; i++) {
/* ... lat : Latitude du marqueur ... */
var lat = parseFloat(markers[i].getAttribute("lat"));
/* ... lng : Longitude du marqueur ... */
var lng = parseFloat(markers[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 = markers[i].getAttribute("type");
/* ... nom : Nom de la société correspondant au marqueur ... */
var nom = markers[i].getAttribute("nom");
/* ... Création du marqueur nommé "marker" par appel de la fonction "creationMarqueur()" ... */
/* ... en lui transmettant les données : point, nom, type, lat, lng ... */
var marker = creationMarqueur(point,nom,type,lat,lng);
/* ... Affiche sur la carte nommée "maCarte", le marqueur nommé "marker" ... */
maCarte.addOverlay(marker);
}
listeHTML += '</ol>';
document.getElementById("maListe").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(){
/* ... marqueurPoint : récupère les coordonnées du marqueur nommé "marqueurActuel" ... */
var marqueurPoint = marqueurActuel.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 = Array();
/* ... 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é */
/* name : Nom de la société */
/* html : Texte contenu dans l'info-bulle liée au marqueur */
/* lat : Latitude */
/* lng : Longitude */
function creationMarqueur(point,nom,html,lat,lng) {
/* ... Création d'un nouveau marqueur nommé "marker" ancré sur le point "point" et représenté par l'icône "miniIconeRouge" ... */
var marker = new google.maps.Marker(point,miniIconeRouge);
/* ... Ajout d'un observateur d'événement marqueur nommé "marker" ... */
/* ... L'événement observé est "click" ... */
/* ... Lorsque vous cliquez sur le marqueur nommé "marker", la fonction située entre les {} sera alors executée ... */
google.maps.Event.addListener(marker, "click", function() {
/* ... Si L'événement "click" est déclenché, la variable "texteInfobulle" contient les informations devant figurer dans l'info-bulle ... */
texteInfobulle = "<b>Société</b> : "+nom+"<br /><b>Catégorie</b> : "+html+"<br /><b>Latitude</b> : "+lat+"<br /><b>Longitude</b> : "+lng;
/* ... Ouverture de l'info-bulle liée au marqueur nommé "marker", et affichage à l'intérieur de celle-ci de "texteInfobulle" ... */
marker.openInfoWindowHtml(texteInfobulle);
/* ... On indique que "marqueurActuel" est égal à "marker" ... */
marqueurActuel = marker;
/* ... Appel de la fonction "surligneMarqueurActuel()" pour surligner le "marqueurActuel"... */
surligneMarqueurActuel();
});
/* ... Ajout d'un observateur d'événement marqueur nommé "marker" ... */
/* ... L'événement observé est "mouseover" ... */
/* ... Lorsque le curseur de votre souris est sur le marqueur nommé "marker", la fonction située entre les {} sera alors executée ... */
google.maps.Event.addListener(marker, "mouseover", function() {
/* ... Indique que "marqueurActuel" est égal à "marker" ... */
marqueurActuel = marker;
/* ... Appel de la fonction "surligneMarqueurActuel()" pour surligner le "marqueurActuel"... */
surligneMarqueurActuel();
});
/* ... Ajout d'un observateur d'événement marqueur nommé "marker" ... */
/* ... L'événement observé est "mouseout" ... */
/* ... Lorsque le curseur de votre souris quitte le marqueur nommé "marker", la fonction située entre les {} sera alors executée ... */
google.maps.Event.addListener(marker, "mouseout", function() {
/* ... Si le cercle nommé "cercleSurligneur" existe, alors ... */
if (cercleSurligneur) {
/* ... Efface, de la carte nommée "maCarte", le cercle nommé "cercleSurligneur" ... */
maCarte.removeOverlay(cercleSurligneur);
}
});
/* ... Ajout du marqueur nommé "marker" dans le tableau nommé "tableauMarqueurs" avec l'indice "i" ... */
tableauMarqueurs[i] = marker;
/* ... Ajout de "html" dans le tableau nommé "tableauHtmls" avec l'indice "i" ... */
tableauHtmls[i] = html;
/* ... Création et ajout du lien dans "listeHTML" ... */
listeHTML += '<li><a href="javascript:myclick(' + i + ')" onmouseover="surligneOn(' + i + ')" onmouseout="maCarte.removeOverlay(cercleSurligneur)">' + name + '</a></li>';
/* ... On incrémente "i" ... */
i++;
return marker;
}
/* Fonction myclick() */
/* Cette fonction permet d'ouvrir l'info-bulle liée au marqueur lorsque l'on clique son lien correspondant dans la liste */
/* i : index du marqueur dans le tableau */
function myclick(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 nommé "tableauHtmls" avec l'index "i" ... */
tableauMarqueurs[i].openInfoWindowHtml(tableauHtmls[i]);
}
/* Fonction surligneOn() */
/* Cette fonction permet de surligner le marqueur lorsque l'on survole son lien correspondant dans la liste */
/* i : index du marqueur dans le tableau */
function surligneOn(i){
/* ... marqueurActuel : est égal au marqueur situé dans le tableau nommé "tableauMarqueurs" àvec l'index "i" ... */
marqueurActuel = tableauMarqueurs[i];
/* ... Surligne le "marqueurActuel" en appelant la fonction "surligneMarqueurActuel()" ... */
surligneMarqueurActuel();
}
/* Fonction surligneOut() */
/* Cette fonction permet de supprimer le disque surlignant le marqueur lorsque l'on cesse de survoler son lien correspondant dans la liste */
/* i : index du marqueur dans le tableau */
function surligneOut(i){
/* ... Si le cercle nommé "cercleSurligneur" existe ... */
if (cercleSurligneur) {
/* ... Alors on supprime de la carte nommée "maCarte le cercle nommé "cercleSurligneur" ... */
maCarte.removeOverlay(cercleSurligneur);
}
}
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>
<!-- 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>
<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>
/* Déclaration des variables globales */
var i = 0;
var maCarte;
var monMarqueur;
var listeHTML;
var cercleSurligneur;
var marqueurActuel;
var tableauMarqueurs = [];
var tableauHtmls = [];
/* 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="EmplacementDeMaCarte" ... */
maCarte = new GMap2(document.getElementById("EmplacementDeMaCarte"));
/* ... 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 ... */
/* ... "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 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;
/* ... "markers" : est un tableau contenant toutes les balises <marker /> du fichier "data.xml" ... */
var markers = xmlDoc.documentElement.getElementsByTagName("marker");
listeHTML += '<ol>';
/* ... On fait une boucle sur "markers" pour extraire les caractéristiques de chaque marqueur ... */
/* ... et permettre l'affichage de ceux-ci sur la carte. ... */
for (var i = 0; i < markers.length; i++) {
/* ... lat : Latitude du marqueur ... */
var lat = parseFloat(markers[i].getAttribute("lat"));
/* ... lng : Longitude du marqueur ... */
var lng = parseFloat(markers[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 = markers[i].getAttribute("type");
/* ... nom : Nom de la société correspondant au marqueur ... */
var nom = markers[i].getAttribute("nom");
/* ... Création du marqueur nommé "marker" par appel de la fonction "creationMarqueur()" ... */
/* ... en lui transmettant les données : point, nom, type, lat, lng ... */
var marker = creationMarqueur(point,nom,type,lat,lng);
/* ... Affiche sur la carte nommée "maCarte", le marqueur nommé "marker" ... */
maCarte.addOverlay(marker);
}
listeHTML += '</ol>';
document.getElementById("maListe").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(){
/* ... marqueurPoint : récupère les coordonnées du marqueur nommé "marqueurActuel" ... */
var marqueurPoint = marqueurActuel.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 = Array();
/* ... 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é */
/* name : Nom de la société */
/* html : Texte contenu dans l'info-bulle liée au marqueur */
/* lat : Latitude */
/* lng : Longitude */
function creationMarqueur(point,nom,html,lat,lng) {
/* ... Création d'un nouveau marqueur nommé "marker" ancré sur le point "point" et représenté par l'icône "miniIconeRouge" ... */
var marker = new GMarker(point,miniIconeRouge);
/* ... Ajout d'un observateur d'événement marqueur nommé "marker" ... */
/* ... L'événement observé est "click" ... */
/* ... Lorsque vous cliquez sur le marqueur nommé "marker", la fonction située entre les {} sera alors executée ... */
GEvent.addListener(marker, "click", function() {
/* ... Si L'événement "click" est déclenché, la variable "texteInfobulle" contient les informations devant figurer dans l'info-bulle ... */
texteInfobulle = "<b>Société</b> : "+nom+"<br /><b>Catégorie</b> : "+html+"<br /><b>Latitude</b> : "+lat+"<br /><b>Longitude</b> : "+lng;
/* ... Ouverture de l'info-bulle liée au marqueur nommé "marker", et affichage à l'intérieur de celle-ci de "texteInfobulle" ... */
marker.openInfoWindowHtml(texteInfobulle);
/* ... On indique que "marqueurActuel" est égal à "marker" ... */
marqueurActuel = marker;
/* ... Appel de la fonction "surligneMarqueurActuel()" pour surligner le "marqueurActuel"... */
surligneMarqueurActuel();
});
/* ... Ajout d'un observateur d'événement marqueur nommé "marker" ... */
/* ... L'événement observé est "mouseover" ... */
/* ... Lorsque le curseur de votre souris est sur le marqueur nommé "marker", la fonction située entre les {} sera alors executée ... */
GEvent.addListener(marker, "mouseover", function() {
/* ... Indique que "marqueurActuel" est égal à "marker" ... */
marqueurActuel = marker;
/* ... Appel de la fonction "surligneMarqueurActuel()" pour surligner le "marqueurActuel"... */
surligneMarqueurActuel();
});
/* ... Ajout d'un observateur d'événement marqueur nommé "marker" ... */
/* ... L'événement observé est "mouseout" ... */
/* ... Lorsque le curseur de votre souris quitte le marqueur nommé "marker", la fonction située entre les {} sera alors executée ... */
GEvent.addListener(marker, "mouseout", function() {
/* ... Si le cercle nommé "cercleSurligneur" existe, alors ... */
if (cercleSurligneur) {
/* ... Efface, de la carte nommée "maCarte", le cercle nommé "cercleSurligneur" ... */
maCarte.removeOverlay(cercleSurligneur);
}
});
/* ... Ajout du marqueur nommé "marker" dans le tableau nommé "tableauMarqueurs" avec l'indice "i" ... */
tableauMarqueurs[i] = marker;
/* ... Ajout de "html" dans le tableau nommé "tableauHtmls" avec l'indice "i" ... */
tableauHtmls[i] = html;
/* ... Création et ajout du lien dans "listeHTML" ... */
listeHTML += '<li><a href="javascript:myclick(' + i + ')" onmouseover="surligneOn(' + i + ')" onmouseout="maCarte.removeOverlay(cercleSurligneur)">' + name + '</a></li>';
/* ... On incrémente "i" ... */
i++;
return marker;
}
/* Fonction myclick() */
/* Cette fonction permet d'ouvrir l'info-bulle liée au marqueur lorsque l'on clique son lien correspondant dans la liste */
/* i : index du marqueur dans le tableau */
function myclick(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 nommé "tableauHtmls" avec l'index "i" ... */
tableauMarqueurs[i].openInfoWindowHtml(tableauHtmls[i]);
}
/* Fonction surligneOn() */
/* Cette fonction permet de surligner le marqueur lorsque l'on survole son lien correspondant dans la liste */
/* i : index du marqueur dans le tableau */
function surligneOn(i){
/* ... marqueurActuel : est égal au marqueur situé dans le tableau nommé "tableauMarqueurs" àvec l'index "i" ... */
marqueurActuel = tableauMarqueurs[i];
/* ... Surligne le "marqueurActuel" en appelant la fonction "surligneMarqueurActuel()" ... */
surligneMarqueurActuel();
}
/* Fonction surligneOut() */
/* Cette fonction permet de supprimer le disque surlignant le marqueur lorsque l'on cesse de survoler son lien correspondant dans la liste */
/* i : index du marqueur dans le tableau */
function surligneOut(i){
/* ... Si le cercle nommé "cercleSurligneur" existe ... */
if (cercleSurligneur) {
/* ... Alors on supprime de la carte nommée "maCarte le cercle nommé "cercleSurligneur" ... */
maCarte.removeOverlay(cercleSurligneur);
}
}
</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>
<!-- 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 )