Api Google Maps Version 2
Controle
MARQUEURS SELECTIONNES VIA DES BOUTONS RADIO
DONNEES EXTRAITES D'UN FICHIER XML

MARQUEURS SELECTIONNES VIA DES BOUTONS RADIO
DONNEES EXTRAITES D'UN FICHIER XML

Présentation

Nous allons créer une carte sur laquelle s'affichent des marqueurs en fonction du "bouton radio" sélectionné.

Les "bouton radio" 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 "boutons radio" ci-dessous pour faire apparaître ou disparaître 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"/>
<!-- 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"> 
<!--
google.load("maps", "2.x",{"other_params":"sensor=false"});
var maCarte;
var baseIcon;
var urlXml = "http://www.votre-serveur.fr/votre-chemin/votre-fichier-data.xml";
 
function initialize() {
if (google.maps.BrowserIsCompatible()) {
 
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);
 
var 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');
var 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');
var 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');
var 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 de la Carte */
maCarte = new google.maps.Map2(document.getElementById('EmplacementDeMaCarte'));
maCarte.addControl(new google.maps.LargeMapControl());
maCarte.addControl(new google.maps.MenuMapTypeControl());
maCarte.setCenter(new google.maps.LatLng(47.38254402467962, 0.690765380859375), 9);
 
var ToutesLesBalisesInput = document.getElementsByTagName('input');
if(ToutesLesBalisesInput != null){
	for(var i = 0; i < ToutesLesBalisesInput.length; i++){
		if(ToutesLesBalisesInput[i].type == 'radio'){
		ToutesLesBalisesInput[i].onclick=function(){EnvoiLoisir(this);}
		}
	}
}
	
function EnvoiLoisir(val){
	if(val == null){return;}
	if(val.checked){
		loisirselec=val.value;
		google.maps.DownloadUrl(urlXml+"?"+Math.random(), function(data) {
 
			maCarte.clearOverlays();
			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');
				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 = creerMarker(point, nom, adresse, codepostal, ville, type);
					maCarte.addOverlay(marker);
				}
			}
		});
	}	
}
	
function creerMarker(point, nom, adresse, codepostal, ville, type) { 
	if(type=='alpha'){var icone = iconeAlpha;} 
	if(type=='bravo'){var icone = iconeBravo;} 
	if(type=='charlie'){var icone = iconeCharlie;} 
	if(type=='delta'){var icone = iconeDelta;} 
	var marker = new google.maps.Marker(point,icone); 
	google.maps.Event.addListener(marker, 'click', function() { 
		marker.openInfoWindowHtml('<b>' + nom + '</b><br/>' + adresse + '<br/>' + codepostal + ' ' + ville ); 
	}); 
	return marker; 
}
 
}else{
alert("Désolé, mais votre navigateur n\'est pas compatible avec Google Maps");
}
}
google.setOnLoadCallback(initialize);
//-->
</script> 
<style type="text/css">
<!--
.cadre{margin:1em 0;padding:1em 0;height:auto;border:1px solid #513a0b;text-align:center;background-color:#e7e3d7;}
-->
</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="radio" name="loisir" value="alpha" /><img src="http://labs.google.com/ridefinder/images/mm_20_red.png" alt="marqueur rouge" /> alpha
| <input type="radio" name="loisir" value="bravo" /><img src="http://labs.google.com/ridefinder/images/mm_20_green.png" alt="marqueur vert" /> bravo
| <input type="radio" name="loisir" value="charlie" /><img src="http://labs.google.com/ridefinder/images/mm_20_blue.png" alt="marqueur bleu" /> charlie
| <input type="radio" 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"/>
<!-- Chargement du script Google AJAX APIs en précisant votre clé -->
<script type="text/javascript" src="http://www.google.com/maps?file=api&v=2.x&key=Inserez_Votre_Clef_API_Ici&sensor=false"></script>
<script type="text/javascript"> 
<!--
var maCarte;
var baseIcon;
var urlXml = "http://www.votre-serveur.fr/votre-chemin/votre-fichier-data.xml";
 
function initialize() {
if (GBrowserIsCompatible()) {
 
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);
 
var 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');
var 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');
var 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');
var 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 de la Carte */
maCarte = new GMap2(document.getElementById('EmplacementDeMaCarte'));
maCarte.addControl(new GLargeMapControl());
maCarte.addControl(new GMenuMapTypeControl());
maCarte.setCenter(new GLatLng(47.38254402467962, 0.690765380859375), 9);
 
var ToutesLesBalisesInput = document.getElementsByTagName('input');
if(ToutesLesBalisesInput != null){
	for(var i = 0; i < ToutesLesBalisesInput.length; i++){
		if(ToutesLesBalisesInput[i].type == 'radio'){
		ToutesLesBalisesInput[i].onclick=function(){EnvoiLoisir(this);}
		}
	}
}
	
function EnvoiLoisir(val){
	if(val == null){return;}
	if(val.checked){
		loisirselec=val.value;
		GDownloadUrl(urlXml+"?"+Math.random(), function(data) {
 
			maCarte.clearOverlays();
			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');
				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 = creerMarker(point, nom, adresse, codepostal, ville, type);
					maCarte.addOverlay(marker);
				}
			}
		});
	}	
}
	
function creerMarker(point, nom, adresse, codepostal, ville, type) { 
	if(type=='alpha'){var icone = iconeAlpha;} 
	if(type=='bravo'){var icone = iconeBravo;} 
	if(type=='charlie'){var icone = iconeCharlie;} 
	if(type=='delta'){var icone = iconeDelta;} 
	var marker = new GMarker(point,icone); 
	GEvent.addListener(marker, 'click', function() { 
		marker.openInfoWindowHtml('<b>' + nom + '</b><br/>' + adresse + '<br/>' + codepostal + ' ' + ville ); 
	}); 
	return marker; 
}
 
}else{
alert("Désolé, mais votre navigateur n\'est pas compatible avec Google Maps");
}
}
//-->
</script> 
<style type="text/css">
<!--
.cadre{margin:1em 0;padding:1em 0;height:auto;border:1px solid #513a0b;text-align:center;background-color:#e7e3d7;}
-->
</style>
</head>
 
<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="radio" name="loisir" value="alpha" /><img src="http://labs.google.com/ridefinder/images/mm_20_red.png" alt="marqueur rouge" /> alpha
| <input type="radio" name="loisir" value="bravo" /><img src="http://labs.google.com/ridefinder/images/mm_20_green.png" alt="marqueur vert" /> bravo
| <input type="radio" name="loisir" value="charlie" /><img src="http://labs.google.com/ridefinder/images/mm_20_blue.png" alt="marqueur bleu" /> charlie
| <input type="radio" 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