Api Google Maps Version 2
Controle
MARQUEURS SELECTIONNES VIA DES CASES A COCHER
DONNEES EXTRAITES D'UN FICHIER XML

MARQUEURS SELECTIONNES VIA DES CASES A COCHER
DONNEES EXTRAITES D'UN FICHIER XML

Présentation

Nous allons créer une carte sur laquelle s'afficheront des marqueurs en fonction de la (ou les) case(s) à cocher sélectionnée(s).

Les "case à cocher" sont au nombre de quatre :

• alpha
• bravo
• charlie
• delta

A chaque marqueur est liée une info bulle contenant :

• Le nom de la société
• Son Adresse
• Son Code Postal
• Sa Ville

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>

Résultat

Cliquez sur les "cases à cocher" ci-dessous pour faire apparaitre ou disparaitre les marqueurs.
En cliquant sur chaque marqueur, une info-bulle contenant les coordonnées de la société s'affiche.

| alpha | bravo | charlie | delta |

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.com : Exemples et tutoriels sur l'API Google Maps</title>
<!-- Chargement du script Google AJAX APIs en précisant votre clé -->
<script type="text/javascript" src="http://www.google.com/jsapi?key=Inserez_Votre_Clef_API_Ici"></script>
<script type="text/javascript">
/* Chargement du module "maps" dans sa version "2.x" */
google.load("maps", "2.x",{"other_params":"sensor=false"});
var maCarte;
var iconeAlpha;
var iconeBravo;
var iconeCharlie;
var iconeDelta;
var TousMesMarqueurs = [];
/* 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()) {
		var ToutesLesBalisesInput = document.getElementsByTagName("input");
		baseIcon = new google.maps.Icon();
		baseIcon.iconSize=new google.maps.Size(12,20);
		baseIcon.shadowSize=new google.maps.Size(20,22);
		baseIcon.iconAnchor=new google.maps.Point(6,20);
		baseIcon.infoWindowAnchor=new google.maps.Point(5,1);
		iconeAlpha = new google.maps.Icon(baseIcon, "http://labs.google.com/ridefinder/images/mm_20_red.png", null, "http://labs.google.com/ridefinder/images/mm_20_shadow.png");
		iconeBravo = new google.maps.Icon(baseIcon, "http://labs.google.com/ridefinder/images/mm_20_green.png", null, "http://labs.google.com/ridefinder/images/mm_20_shadow.png");
		iconeCharlie = new google.maps.Icon(baseIcon, "http://labs.google.com/ridefinder/images/mm_20_blue.png", null, "http://labs.google.com/ridefinder/images/mm_20_shadow.png");
		iconeDelta = new google.maps.Icon(baseIcon, "http://labs.google.com/ridefinder/images/mm_20_orange.png", null, "http://labs.google.com/ridefinder/images/mm_20_shadow.png");
/* ... Création d'une nouvelle carte nommée "maCarte" qui s'affichera à l'intérieur de la <div> ayant pour identifiant id="EmplacementDeMaCarte" ... */
		maCarte = new google.maps.Map2(document.getElementById("EmplacementDeMaCarte"));
		maCarte.addControl(new google.maps.LargeMapControl());
		maCarte.addControl(new google.maps.MenuMapTypeControl());
/* ... La carte nommée "maCarte" est centrée sur la Latitude 47.38254402467962, la Longitude 0.690765380859375, avec un niveau de zoom égal à 9 ... */
		maCarte.setCenter(new google.maps.LatLng(47.382544, 0.690765), 9);
		if(ToutesLesBalisesInput != null){
			for(var i = 0; i < ToutesLesBalisesInput.length; i++){
				if(ToutesLesBalisesInput[i].type == "checkbox"){
					ToutesLesBalisesInput[i].onclick=function(){EnvoiLoisir(this);}
				}
			}
		}
/* 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');
	}
}
 
function CreationDuMarqueur(point, nom, adresse, codepostal, ville, type, i) { 
	if(type=="alpha"){icone = iconeAlpha;} 
	if(type=="bravo"){icone = iconeBravo;} 
	if(type=="charlie"){icone = iconeCharlie;} 
	if(type=="delta"){icone = iconeDelta;} 
	var marker = new google.maps.Marker(point,icone); 
	TousMesMarqueurs[i] = marker;
	google.maps.Event.addListener(marker, "click", function(){
		marker.openInfoWindowHtml("<b>" + nom + "</b><br/>" + adresse + "<br/>" + codepostal + " " + ville ); 
	}); 
	return marker; 
}
 
function EnvoiLoisir(val){
	if(val == null){return;}
	var loisirselec = val.value;
	/* ... Si la case est cochée ... */
	if(val.checked == true){
		google.maps.DownloadUrl(urlXml+"?"+Math.random(), function(data) {
			var xml = google.maps.Xml.parse(data);
			var markers = xml.documentElement.getElementsByTagName("marker");
			for (var i = 0; i < markers.length; i++) {
				var type = markers[i].getAttribute("type");
				/* ... Si les marqueurs correspondant à la catégorie sélectionnée ... */
				if(type == loisirselec){
					var point = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")));
					var nom = markers[i].getAttribute("nom");
					var adresse = markers[i].getAttribute("adresse");
					var codepostal = markers[i].getAttribute("codepostal");
					var ville = markers[i].getAttribute("ville");
					var type = markers[i].getAttribute("type");
					var marker = CreationDuMarqueur(point, nom, adresse, codepostal, ville, type, i);
					/* ... on ajout le marqueur à la carte nommée "maCarte". */
					maCarte.addOverlay(marker);
				}
			}
		});
	}
	/* ... Si la case est décochée ... */
	if(val.checked == false){
		google.maps.DownloadUrl(urlXml+"?"+Math.random(), function(data) {
			var xml = google.maps.Xml.parse(data);
			var markers = xml.documentElement.getElementsByTagName("marker");
			for (var i = 0; i < markers.length; i++) {
				var type = markers[i].getAttribute("type");
				/* ... Si les marqueurs correspondant à la catégorie sélectionnée ... */
				if(type == loisirselec){
					/* ... alors ils sont supprimés de la carte nommée "maCarte". */
					maCarte.removeOverlay(TousMesMarqueurs[i]);
				}
			}
		});
	}	
}
/* Appelle la fonction "initialize" lorsque la page web sera chargée */
google.setOnLoadCallback(initialize);
</script>
<style type="text/css">
<!--
.cadre {width: 100%; margin: 1em 0; padding:1em 0; height: auto; border: 1px solid #B8D6C2; text-align:center; background-color: #F6FCEC;}
-->
</style>
</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>
<div class="cadre">
Cliquez sur les "cases à cocher" ci-dessous pour faire apparaitre ou disparaitre les marqueurs.<br />
En cliquant sur chaque marqueur, une info-bulle contenant les coordonnées de la société s'affiche.<br /><br />
<div>
| <input type="checkbox" name="loisir" value="alpha" /><img src="http://labs.google.com/ridefinder/images/mm_20_red.png" alt="marqueur rouge" /> alpha 
| <input type="checkbox" name="loisir" value="bravo" /><img src="http://labs.google.com/ridefinder/images/mm_20_green.png" alt="marqueur vert" /> bravo 
| <input type="checkbox" name="loisir" value="charlie" /><img src="http://labs.google.com/ridefinder/images/mm_20_blue.png" alt="marqueur bleu" /> charlie 
| <input type="checkbox" name="loisir" value="delta" /><img src="http://labs.google.com/ridefinder/images/mm_20_orange.png" alt="marqueur orange" /> delta |
</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>

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.com : Exemples et tutoriels sur l'API Google Maps</title>
<!-- Chargement du script Google Maps, version 2.x, en précisant votre clé -->
<script src="http://maps.google.com/maps?file=api&v=2.x&key=Inserez_Votre_Clef_API_Ici&sensor=false"
type="text/javascript"></script>
<script type="text/javascript">
var maCarte;
var iconeAlpha;
var iconeBravo;
var iconeCharlie;
var iconeDelta;
var TousMesMarqueurs = [];
/* 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()) {
		var ToutesLesBalisesInput = document.getElementsByTagName("input");
		baseIcon = new GIcon();
		baseIcon.iconSize=new GSize(12,20);
		baseIcon.shadowSize=new GSize(20,22);
		baseIcon.iconAnchor=new GPoint(6,20);
		baseIcon.infoWindowAnchor=new GPoint(5,1);
		iconeAlpha = new GIcon(baseIcon, "http://labs.google.com/ridefinder/images/mm_20_red.png", null, "http://labs.google.com/ridefinder/images/mm_20_shadow.png");
		iconeBravo = new GIcon(baseIcon, "http://labs.google.com/ridefinder/images/mm_20_green.png", null, "http://labs.google.com/ridefinder/images/mm_20_shadow.png");
		iconeCharlie = new GIcon(baseIcon, "http://labs.google.com/ridefinder/images/mm_20_blue.png", null, "http://labs.google.com/ridefinder/images/mm_20_shadow.png");
		iconeDelta = new GIcon(baseIcon, "http://labs.google.com/ridefinder/images/mm_20_orange.png", null, "http://labs.google.com/ridefinder/images/mm_20_shadow.png");
/* ... Création d'une nouvelle carte nommée "maCarte" qui s'affichera à l'intérieur de la <div> ayant pour identifiant id="EmplacementDeMaCarte" ... */
		maCarte = new GMap2(document.getElementById("EmplacementDeMaCarte"));
		maCarte.addControl(new GLargeMapControl());
		maCarte.addControl(new GMenuMapTypeControl());
/* ... La carte nommée "maCarte" est centrée sur la Latitude 47.38254402467962, la Longitude 0.690765380859375, avec un niveau de zoom égal à 9 ... */
		maCarte.setCenter(new GLatLng(47.382544, 0.690765), 9);
		if(ToutesLesBalisesInput != null){
			for(var i = 0; i < ToutesLesBalisesInput.length; i++){
				if(ToutesLesBalisesInput[i].type == "checkbox"){
					ToutesLesBalisesInput[i].onclick=function(){EnvoiLoisir(this);}
				}
			}
		}
/* 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');
	}
}
 
function CreationDuMarqueur(point, nom, adresse, codepostal, ville, type, i) { 
	if(type=="alpha"){icone = iconeAlpha;} 
	if(type=="bravo"){icone = iconeBravo;} 
	if(type=="charlie"){icone = iconeCharlie;} 
	if(type=="delta"){icone = iconeDelta;} 
	var marker = new GMarker(point,icone); 
	TousMesMarqueurs[i] = marker;
	GEvent.addListener(marker, "click", function(){
		marker.openInfoWindowHtml("<b>" + nom + "</b><br/>" + adresse + "<br/>" + codepostal + " " + ville ); 
	}); 
	return marker; 
}
 
function EnvoiLoisir(val){
	if(val == null){return;}
	var loisirselec = val.value;
	/* ... Si la case est cochée ... */
	if(val.checked == true){
		GDownloadUrl(urlXml+"?"+Math.random(), function(data) {
			var xml = GXml.parse(data);
			var markers = xml.documentElement.getElementsByTagName("marker");
			for (var i = 0; i < markers.length; i++) {
				var type = markers[i].getAttribute("type");
				/* ... Si les marqueurs correspondant à la catégorie sélectionnée ... */
				if(type == loisirselec){
					var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")));
					var nom = markers[i].getAttribute("nom");
					var adresse = markers[i].getAttribute("adresse");
					var codepostal = markers[i].getAttribute("codepostal");
					var ville = markers[i].getAttribute("ville");
					var type = markers[i].getAttribute("type");
					var marker = CreationDuMarqueur(point, nom, adresse, codepostal, ville, type, i);
					/* ... on ajout le marqueur à la carte nommée "maCarte". */
					maCarte.addOverlay(marker);
				}
			}
		});
	}
	/* ... Si la case est décochée ... */
	if(val.checked == false){
		GDownloadUrl(urlXml+"?"+Math.random(), function(data) {
			var xml = GXml.parse(data);
			var markers = xml.documentElement.getElementsByTagName("marker");
			for (var i = 0; i < markers.length; i++) {
				var type = markers[i].getAttribute("type");
				/* ... Si les marqueurs correspondant à la catégorie sélectionnée ... */
				if(type == loisirselec){
					/* ... alors ils sont supprimés de la carte nommée "maCarte". */
						maCarte.removeOverlay(TousMesMarqueurs[i]);
				}
			}
		});
	}	
}
</script>
<style type="text/css">
<!--
.cadre {width: 100%; margin: 1em 0; padding:1em 0; height: auto; border: 1px solid #B8D6C2; text-align:center; background-color: #F6FCEC;}
-->
</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="EmplacementDeMaCarte". -->
<!-- Elle fera donc 100% de large et 400 pixels de haut. -->
<div id="EmplacementDeMaCarte" style="width: 100%; height: 400px"></div>
<div class="cadre">
Cliquez sur les "cases à cocher" ci-dessous pour faire apparaitre ou disparaitre les marqueurs.<br />
En cliquant sur chaque marqueur, une info-bulle contenant les coordonnées de la société s'affiche.<br /><br />
<div>
| <input type="checkbox" name="loisir" value="alpha" /><img src="http://labs.google.com/ridefinder/images/mm_20_red.png" alt="marqueur rouge" /> alpha 
| <input type="checkbox" name="loisir" value="bravo" /><img src="http://labs.google.com/ridefinder/images/mm_20_green.png" alt="marqueur vert" /> bravo 
| <input type="checkbox" name="loisir" value="charlie" /><img src="http://labs.google.com/ridefinder/images/mm_20_blue.png" alt="marqueur bleu" /> charlie 
| <input type="checkbox" name="loisir" value="delta" /><img src="http://labs.google.com/ridefinder/images/mm_20_orange.png" alt="marqueur orange" /> delta |
</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>

Remarque(s)

La fonction GDownloadUrl permet de récupérer simplement, via une URL, des données de façon asynchrone.

Attention :

GDownloadUrl utilise XMLHttpRequest pour exécuter la requête, il est donc impératif que le document qui execute ce code soit sur le même serveur que le fichier contenant les données (data.xml).

Exemple :

Si vous copiez le code de cet exemple, et que vous l'installez sur votre serveur à l'adresse suivante :

  http://www.votreserveur.fr/votre_chemin/carte_avec_cases_a_cocher.htm

veillez à installer votre fichier data.xml sur le même serveur et à modifier la ligne var urlXml pour qu'elle cible votre fichier data.xml :

  var urlXml = "http://www.votreserveur.fr/votre_chemin/data.xml";

Dans le cas contraire, l'accès au fichier data.xml sera impossible et aucun marqueur ne viendra s'afficher sur votre carte.

Navigation

• Accueil
• Carte - Map
• Contrôle - Bouton
• Marqueur - Marker
• Polyline - Lignes
• Polygone - Polygon
• Info-bulle - Fenêtre
• Itinéraire - Direction
• Street View
• Googlebar - Google Bar
• Géocodeur - Geocoder
• Kml - Kmz
• Truc & Astuce
• Lien Internet
• Articles
• Vidéos
• Les News

Forum d'aide

• Forum d'aide Google Maps

Traduction - Translate

Géo Web Actu

• La modernisation de la défense

Evolutions et Bugs

• Mise à jour API
• Rapport sur les bugs

Groupe d'Aide Blog Anglais

• Google Maps API Discussion
• Lat Long Blog
• Google Geo Developers Blog

Référence en Français

  La classe " Essentielle "

• GMap2

  Les classes de " Base "

• G_API_VERSION
• GBounds
• GBrowserIsCompatible
• GDraggableObject
• GDraggableObjectOptions
• GInfoWindow
• GInfoWindowOptions
• GInfoWindowTab
• GKeyboardHandler
• GLanguage
• GLatLng
• GLatLngBounds
• GLog
• GMapOptions
• GMapPane
• GPoint
• GSize
• GUnload

  Les classes " Événement "

• GEvent
• GEventListener

  Les classes " Contrôle "

• GControl
• GControlAnchor
• GControlImpl
• GControlPosition
• GHierarchicalMapTypeControl
• GMapType
• GMapTypeControl
• GMapTypeOptions
• GMapUIOptions
• GMenuMapTypeControl
• GNavLabelControl

  Les classes " Couche "

• GCopyright
• GCopyrightCollection
• GGroundOverlay
• GIcon
• GLayer
• GMarker
• GMarkerManager
• GMarkerManagerOptions
• GMarkerOptions
• GMercatorProjection
• GObliqueMercator
• GOverlay
• GPolyEditingOptions
• GPolygon
• GPolygonOptions
• GPolyline
• GPolylineOptions
• GPolyStyleOptions
• GProjection
• GScreenOverlay
• GScreenPoint
• GScreenSize
• GTileLayer
• GTileLayerOptions
• GTileLayerOverlay
• GTileLayerOverlayOptions

  Les classes " Service "

• GAdsManager
• GAdsManagerOptions
• GAdsManagerStyle
• GClientGeocoder
• GDirections
• GDirectionsOptions
• GDownloadUrl
• GFactualGeocodeCache
• GGeoAddressAccuracy
• GGeocodeCache
• GGeoStatusCode
• GGeoXml
• GGoogleBar
• GGoogleBarAdsOptions
• GGoogleBarLinkTarget
• GGoogleBarListingTypes
• GGoogleBarOptions
• GGoogleBarResultList
• GPhotoSpec
• GPov
• GRoute
• GStep
• GStreetviewClient
• GStreetviewClient.ReturnValues
• GStreetviewData
• GStreetviewFeatures
• GStreetviewLink
• GStreetviewLocation
• GStreetviewOverlay
• GStreetviewPanorama
• GStreetviewPanorama.ErrorValues
• GStreetviewPanoramaOptions
• GStreetviewUserPhotosOptions
• GTrafficOverlay
• GTrafficOverlayOptions
• GTravelModes
• GXml
• GXmlHttp
• GXslt