Google
 

MARQUEURS SELECTIONNES VIA LES BOUTONS RADIO - DONNEES = FICHIER XML

PRESENTATION

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

Les "bouton radio" sont au nombre de trois :

  • Moto
  • Quad
  • Aéro

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 sont extraites d'un fichier XML dont voici le contenu :

Attention : si vous copier ce code pour ensuite le coller dans le "bloc note" par exemple, assurez-vous que vous enregistrez ce fichier avec un codage UTF-8 (et non ANSI). Dans le cas contraire les caractères accentués seront remplacés par des caratères bizarroïdes, et votre fichier XML fonctionnera sous FireFox, mais pas sous Internet Explorer.

<?xml version="1.0" encoding="utf-8"?>
<markers>
	<marker lat="47.391174" lng="0.722265" type="Moto" nom="Honda Moto Tours" adresse="108-110, avenue de le République" codepostal="37700" ville="Saint-Pierre-des-Corps" />
	<marker lat="47.417692" lng="0.691023" type="Moto" nom="Kawasaki Tours Touraine Moto" adresse="142, avenue Maginot" codepostal="37100" ville="Tours" />
	<marker lat="47.382602" lng="0.726686" type="Moto" nom="Pocket Bike Mania" adresse="51, rue Grands Mortiers|ZA Grands Mortiers" codepostal="37700" ville="Saint-Pierre-des-Corps" />
	<marker lat="47.382602" lng="0.726686" type="Karting" nom="Pole Karting Services" adresse="6, rue Gustave Eiffel - Z.I. N°1" codepostal="37300" ville="Joué-les-Tours" />
	<marker lat="47.419094" lng="0.693244" type="Moto" nom="Team Deletang" adresse="143-147, avenue Andre Maginot" codepostal="37100" ville="Tours" />
	<marker lat="47.419972" lng="0.662138" type="Moto" nom="Bellanger Motos" adresse="220, boulevard Charles de Gaulle" codepostal="37540" ville="Saint-Cyr-sur-Loire" />
	<marker lat="47.419722" lng="0.661333" type="Moto" nom="Déclic'Motos" adresse="1, rue Pierre de Coubertin" codepostal="37540" ville="Saint-Cyr-sur-Loire" />
	<marker lat="47.419777" lng="0.661055" type="Moto" nom="FD Moto Shop" adresse="3, rue Pierre de Coubertin" codepostal="37540" ville="Saint-Cyr-sur-Loire" />
	<marker lat="47.354685" lng="0.673428" type="Moto" nom="New Motorz" adresse="5 bis, rue de Chambray" codepostal="37300" ville="Joué-les-Tours" />
	<marker lat="47.395328" lng="0.746727" type="Karting" nom="Fun Kart Loisirs" adresse="ld Louche Saint Martin" codepostal="37700" ville="la-Ville-aux-Dames" />
	<marker lat="47.358755" lng="0.734775" type="Karting" nom="Karting Club du Ripault" adresse="6 rue Camusière" codepostal="37550" ville="Saint-Avertin" />
	<marker lat="47.387418" lng="0.760717" type="Karting" nom="Gokart" adresse="rue Louise de la Vallière" codepostal="37700" ville="la-Ville-aux-Dames" />
	<marker lat="47.459477" lng="0.674672" type="Quad" nom="Fun Quad Evasion" adresse="Z.I Les Gaudières" codepostal="37390" ville="Mettray" />
	<marker lat="47.338365" lng="0.616983" type="Quad" nom="Dom Quad Motoculture" adresse="9, bis boulevard Jean Jaurès" codepostal="37510" ville="Ballan-Miré" />
	<marker lat="47.464388" lng="0.773388" type="Aero" nom="Touraine Montgolfière" adresse="La Petite Baltière" codepostal="37210" ville="Rochecorbon" />
	<marker lat="47.345453" lng="0.542879" type="Moto" nom="Dakota" adresse="boulevard de Chinon|Autoroute A85 sortie N°" codepostal="37510" ville="Ballan-Miré" />
	<marker lat="47.253136" lng="0.543823" type="Quad" nom="Team Quad 37" adresse="22, chemin des Aunays" codepostal="37190" ville="Saché" />
	<marker lat="47.323465" lng="0.918732" type="Aero" nom="Air Ouest ULM" adresse="Aérodrome de Tours-Sorigny" codepostal="37250" ville="Sorigny" />
	<marker lat="47.352780" lng="0.952377" type="Aero" nom="Ailes Tourangelles" adresse="Aérodrome d'Amboise Dierre" codepostal="37150" ville="Dierre" />
	<marker lat="47.547799" lng="0.546355" type="Quad" nom="SARL Plé" adresse="Le Moulin de Pérran" codepostal="37360" ville="Neuillé-Pont-Pierre" />
	<marker lat="47.547799" lng="0.546355" type="Moto" nom="SP Moto 37" adresse="RN 143 route de Loches" codepostal="37170" ville="Chambray-lès-Tours" />
	<marker lat="47.201180" lng="0.652281" type="Karting" nom="Formule Kart Touraine" adresse="Les Circuits de Touraine|La Laurière - D21" codepostal="37260" ville="37260" />
	<marker lat="47.424277" lng="0.982107" type="Aero" nom="Balloon Revolution" adresse="3, rue du Colombier" codepostal="37530" ville="Pocé-sur-Cisse" />
	<marker lat="47.398349" lng="1.005764" type="Moto" nom="Olivier Motos Quads" adresse="Boulevard Saint Denis Hors (D31)" codepostal="37400" ville="Amboise" />
	<marker lat="47.617273" lng="0.595322" type="Aero" nom="Air Touraine Hélicoptère" adresse="Héliport de Belleville" codepostal="37370" ville="Neuvy-le-Roi" />
	<marker lat="47.164742" lng="0.786381" type="Aero" nom="Touraine Planeur" adresse="Le Louroux" codepostal="37240" ville="Le-Louroux" />
	<marker lat="47.451308" lng="0.320320" type="Aero" nom="Aeroclub de Savigne" adresse="Les Champs Marquis" codepostal="37340" ville="Savigné-sur-Lathan" />
	<marker lat="47.254184" lng="0.300922" type="Quad" nom="Le Clos d'Ussé" adresse="7, rue Principale" codepostal="37420" ville="Rigny-Ussé" />
	<marker lat="47.154945" lng="1.010517" type="Aero" nom="Natur'Ailes" adresse="Base ULM 'Les Jolletières'" codepostal="37600" ville="Loches" />
	<marker lat="47.285197" lng="1.159358" type="Aero" nom="Art Montgolfières" adresse="Les Bruyères" codepostal="41400" ville="Saint-Georges-sur-Cher" />
	<marker lat="47.343083" lng="1.185086" type="Aero" nom="France Montgolfières - Balloon Flights" adresse="24, rue Nationale" codepostal="41400" ville="Montrichard" />
	<marker lat="47.063808" lng="0.492325" type="Quad" nom="Loca - Quads" adresse="le Village du Bois" codepostal="37220" ville="Rilly-sur-Vienne" />
	<marker lat="47.504830" lng="1.196705" type="Aero" nom="Aérocom" adresse="36, route de Chouzy" codepostal="41150" ville="Onzain" />
	<marker lat="47.166573" lng="0.239178" type="Moto" nom="Chinon Motos" adresse="31-33, rue du Commerce" codepostal="37500" ville="Chinon" />
</markers>

RESULTAT



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.

| Moto | Quad | Aero |

CODE

Attention : si vous copier ce code pour ensuite le coller dans le "bloc note" par exemple, assurez-vous que vous enregistrez ce fichier avec un codage UTF-8 (et non ANSI). Dans le cas contraire les caractères accentués seront remplacés par des caratères bizarroïdes, et votre fichier XML fonctionnera sous FireFox, mais pas sous Internet Explorer.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
	<title>Google Maps - Bouton radio - Sélection des Marqueurs  - Données extraites d'un fichier XML</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=ABQIAAAATndsWAV5Q2y7pRRi-22W_hTxw9fvAnrsiYejTsRxd4b0cj9HKxSNCXUxAANaoACDzXWznNLVPto_jA" type="text/javascript"></script>
	<script language='JavaScript' type='text/JavaScript'>
		var MaCarte = null;
		function load (){
			var 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 moto = 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 quad = 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 aero = new GIcon(baseIcon, 'http://labs.google.com/ridefinder/images/mm_20_blue.png', null, 'http://labs.google.com/ridefinder/images/mm_20_shadow.png');
		
			// Création de la Carte 
			var MaCarte = new GMap2(document.getElementById('EmplacementDeMacarte'));
			MaCarte.addControl(new GLargeMapControl());
			MaCarte.addControl(new GMapTypeControl());
			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('http://www.touraineverte.com/Google-Maps/data.xml', 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=='Moto'){var icone = moto;} 
				if(type=='Quad'){var icone = quad;} 
				if(type=='Aero'){var icone = aero;} 
				var marker = new GMarker(point,icone); 
				GEvent.addListener(marker, 'click', function() { 
					marker.openInfoWindowHtml('<b>' + nom + '</b><br/>' + adresse + '<br/>' + codepostal + ' ' + ville ); 
				}); 
				return marker; 
			}
		};
	</script>
	<style type="text/css">
		<!--
			#cadre {margin: 0; padding:10px 0 5px 0; width: 740px; height: auto; border: 1px solid #B8D6C2;text-align:center; background-color: #F6FCEC;}
			#EmplacementDeMacarte {border: 1px solid #B8D6C2;}
		-->
	</style>
</head>

<body onload="load()" onunload="GUnload()"><center>
	<div id="EmplacementDeMacarte" style="width: 740px; height: 400px"></div>
	<br />
	<div id="cadre">
		Cliquez sur les "boutons radio" ci-dessous pour faire apparaître ou disparaître les marqueurs.</br>
		En cliquant sur chaque marqueur, une info-bulle contenant les coordonnées de la société s'affiche.</br>
		<br />
		<form>
			| <input type="radio" name="loisir" value="Moto"> <img src="http://labs.google.com/ridefinder/images/mm_20_red.png"> Moto 
			| <input type="radio" name="loisir" value="Quad"> <img src="http://labs.google.com/ridefinder/images/mm_20_green.png"> Quad 
			| <input type="radio" name="loisir" value="Aero"> <img src="http://labs.google.com/ridefinder/images/mm_20_blue.png"> Aero 
			|
		</form>
	</div>
</body>
</html>


Cliquez ci-après, pour Télécharger les fichiers de l'exemple : Google Maps API : Selectionner des marqueurs à l'aide de boutons radio


|  http://www.touraineverte.com  |  © 2008  |  fadamaps37arobasegmailpointcom