Google
 

GOOGLE MAPS : MARQUEURS MULTIPLES - CALCUL D'ITINERAIRE DANS CHAQUE INFO-BULLE

PRESENTATION

Le but est d'insérer un formulaire dans l'info-bulle de chaque marqueur, afin de calculer, via Google-Maps, un itinéraire routier.

Le survol du marqueur permet d'afficher le nom de la société.

Le client clique sur un marqueur, saisit son adresse de départ, puis valide en cliquant sur le bouton "Calculer l'tinéraire avec Google Maps". Une nouvelle fenêtre, générée par Google Maps, s'ouvre à l'intérieur de laquelle s'affiche l'itinéraire demandé.

L'adresse d'arrivée est fixe (elle correspond à celle du magasin sélectionné).

Elle est paramétrée sous la forme de coordonnées GPS ( Latitude - Longitude ).

La couleur de fond du formulaire varie en fonction de la couleur du marqueur.

Les données sont extraites du fichier data.xml.

RESULTAT



En survolant un marqueur, le nom de la société s'affiche.
Cliquez sur un marqueur, saisissez votre adresse dans l'info-bulle et validez.
Vous obtenez l'itinéraire, via Google Maps, vous conduisant jusqu'au magasin.

Moto Moto - Moto Quad - Moto Aéro - Moto Karting

CODE

   [1] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   [2] <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
   [3] <head>
   [4] <title>Google Maps - Marqueurs multiples avec Itinéraire intégré dans une info-bulle</title>
   [5] <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   [6] <script src="http://maps.google.com/maps?file=api&v=2.x&key= Mettez Votre Clef API Ici " type="text/javascript"></script>
   [7] <script type='text/javascript'>
   [8] //<![CDATA[
   [9] 	function load() {
  [10] 		if (GBrowserIsCompatible()) {
  [11] 	
  [12] 			var baseIcon = new GIcon();
  [13] 			baseIcon.iconSize=new GSize(12,20);
  [14] 			baseIcon.shadowSize=new GSize(20,22);
  [15] 			baseIcon.iconAnchor=new GPoint(6,20);
  [16] 			baseIcon.infoWindowAnchor=new GPoint(5,1);
  [17] 			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');
  [18] 			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');
  [19] 			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');
  [20] 			var karting = new GIcon(baseIcon, 'http://labs.google.com/ridefinder/images/mm_20_yellow.png', null, 'http://labs.google.com/ridefinder/images/mm_20_shadow.png');
  [21] 	
  [22] 			// Création de la carte et de ses contrôles //
  [23] 			var MaCarte = new GMap2(document.getElementById('EmplacementDeMacarte'));
  [24] 			MaCarte.addControl(new GSmallMapControl());
  [25] 			MaCarte.addControl(new GMapTypeControl());
  [26] 			MaCarte.setCenter(new GLatLng(47.394921,0.680401), 9);
  [27] 
  [28] 			GDownloadUrl("http://www.touraineverte.com/Google-Maps/data.xml", function(data) {
  [29] 				var FormulaireItineraire = [];
  [30] 				var latcoord = [];
  [31] 				var lngcoord = [];
  [32] 				var couleurfond = [];
  [33] 				var xml = GXml.parse(data);
  [34] 				var markers = xml.documentElement.getElementsByTagName("marker");
  [35] 				for (var i = 0; i < markers.length; i++) {
  [36] 					latcoord[i] = parseFloat(markers[i].getAttribute("lat"));
  [37] 					lngcoord[i] = parseFloat(markers[i].getAttribute("lng"));
  [38] 					var point = new GLatLng(latcoord[i], lngcoord[i]);
  [39] 					var type = markers[i].getAttribute("type");
  [40] 
  [41] 					var NomSociete = markers[i].getAttribute("nom");
  [42] 					var AdresseSociete = markers[i].getAttribute("adresse");
  [43] 					var CodePostalSociete = markers[i].getAttribute("codepostal");
  [44] 					var VilleSociete = markers[i].getAttribute("ville");
  [45] 
  [46] 					// Couleur du fond du Formulaire Itinéraire //
  [47] 					if(type=='Moto'){couleurfond[i] = "#ffefef";} 
  [48] 					if(type=='Quad'){couleurfond[i] = "#efffef";} 
  [49] 					if(type=='Aero'){couleurfond[i] = "#efefff";}
  [50] 					if(type=='Karting'){couleurfond[i] = "#ffffcc";}
  [51] 				
  [52] 					// Formulaire Itinéraire //
  [53] 					FormulaireItineraire[i] ='<div style="width:350px; height:200px; border: 1px solid #ccc; text-align:center; background:'+couleurfond[i]+'; font: 14px \'trebuchet ms\',verdana, helvetica, sans-serif;">' +
  [54] 					'<br /><b>Indiquez votre adresse de départ ci-dessous : </b>' +
  [55] 					'<form action="http://maps.google.com/maps" method="get" target="_blank" style="margin:0;padding;0">' +
  [56] 					'<input type="text" name="saddr" id="saddr" value="" style="width:300px; height:20px; border:1px solid grey;" /><br /><br />' +
  [57] 					'<b>Adresse d\'arrivée : </b><br />'+NomSociete+'<br />'+AdresseSociete+'<br />'+CodePostalSociete+' '+VilleSociete+'<br /><br />' +
  [58] 					'<input value="Calculez votre itinéraire avec Google Maps" type="submit">' +
  [59] 					'<input type="hidden" name="daddr" value="'+latcoord[i]+','+lngcoord[i]+'"/>'+
  [60] 					'</form>' +
  [61] 					'</div>';
  [62] 
  [63] 					var marker = createMarker(point,type,NomSociete,FormulaireItineraire[i]);
  [64] 					MaCarte.addOverlay(marker);
  [65] 				}
  [66] 			});
  [67] 						
  [68] 			// Fonction permettant la création du marqueur //
  [69] 			function createMarker(point,type,nomsociete,itineraire) {
  [70] 				if(type=='Moto'){var icone = moto;} 
  [71] 				if(type=='Quad'){var icone = quad;} 
  [72] 				if(type=='Aero'){var icone = aero;}
  [73] 				if(type=='Karting'){var icone = karting;}
  [74] 				var marker = new GMarker(point,{icon:icone, title:nomsociete});
  [75] 				GEvent.addListener(marker, 'click', function() {
  [76] 					marker.openInfoWindowHtml(itineraire);
  [77] 				});
  [78] 				return marker;
  [79] 			}
  [80] 
  [81] 		}else{
  [82] 			alert('Désolé, mais votre navigateur n\'est pas compatible avec Google Maps');
  [83] 		}
  [84] 	}
  [85]     //]]>
  [86]     </script>	<link rel="stylesheet" type="text/css" href="http://www.touraineverte.com/Google-Maps/style.css"></link>
  [87] </head>
  [88] 
  [89] <body onload="load()" onunload="GUnload()"><center>
  [90] 	<center>
  [91] 		<div id="EmplacementDeMacarte" style="width: 740px; height: 400px"></div>
  [92] 	</center>
  [93] </body>
  [94] </html>
Pour télécharger / copier le code cliquez ici, et n'oubliez pas de remplacer la clef API par la vôtre.

REMARQUES

Néant

REMARQUES

L'adresse saisie peut revêtir plusieurs formes :

  • Coordonnées GPS (Latitude, Longitude : en degrés décimaux) : 47.34547,0.54287
  • Coordonnées GPS (Latitude, Longitude : en degrés minutes secondes) : +47° 20' 43.69", +0° 32' 34.33"
  • Adresse postale : rue Bretonneau 37000 Tours
|  http://www.touraineverte.com  |  © 2008  |  fadamaps37arobasegmailpointcom