Les exemples

Classe de basee qui est utilée avec toutes les autres classes de ce framework. Vous pouvez avec cette classe créer une map, ajouter des markers, gérer les map... Certaines fonctions présentent dans cette classe utilise les classes Gmap que vous pouvez découvrir ici : http://code.google.com/p/google-maps-utility-library-v3/

Ci dessous vous trouverez les extraits de code qui ont été utilisés pour créer les exemples ci dessous :

Créer un map basique

Déclaration de l'objet Map

            
var myOpt = {
	zoom : 2,
	center : {
		lat : 56.5,
		lng : 5.3
	},
	type :'SATELLITE', //HYBRID, ROADMAP, SATELLITE, TERRAIN
	deplacement:50
};

var myControl = {
	hidden : true,
	scale: false,
	type : false,
	dblClickZoomDisable: false
}
map = new Map("map_canvas",myOpt,myControl);
    
    
                       

Custom map

Vous devez au préalable créer l'interface HTML. Chaque controlleur doit avoir un identifiant unique afin de le transmettre aux divertes méthodes de la classe Map afin de personnalisé les controlleur de la map

            
    
map.initZoom("zoomPlus", "zoomMoins");
map.initTypeControl("controlC", "controlS", "controlH", "controlT");
map.initScrollZoom("cursorScroll","fondScroll");
map.initDeplacementControl("controlUp","controlRight","controlDown","controlLeft");


// exemple HTML pour la jauge.
<div class="controlPersoGmap" style="left:10px;bottom:10px;width:10px;height:100px;" id="fondScroll">
	<div style="background-color:#3366cc;height:50px;width:10px;bottom:0px;position:absolute;"  id="cursorScroll"></div>
</div>
                       

Outils map

Plusieurs outils sont mis à votre disposition : création de marker, markerHTML, polyline, ... et vous trouverez aussi plusieurs rédefinitions des méthodes de la classe Map

            
var opt = {
				borderColor: "red",
				widthBorder : 2,
				alpha:"0.35",
				backColor:"black"
			}
			
map.initDragZoom(opt);


		
var option = {
	alpha : 1,
	size:2,
	color:"#3366cc"
}
//ajout polyline
poly = map.addPolyline([new google.maps.LatLng(45.3,5.3),new google.maps.LatLng(41.3,5.3),new google.maps.LatLng(43.3,5.5),new google.maps.LatLng(43.3,9.3)],option);

//centrer la map avec un polyline
map.centerWithPoly(poly)

//obtenir les valeurs de l\élévation des coordonnées passées en paramétre.
map.getElevation(t_import,function);


                       

Les marqueurs

Marker classique, marker custom, tout est ici !!!

            



//marker classique et bulle classique
var myOpt = {
	lat : 21.5,
	lng : 24,
	text :"<div>Ma bulle non custom</div>"
};
var marker1 = map.addMarker(myOpt);


//marker custom et bulle custom
var myOpt = {
				lat : 23.5,
				lng : 24,
				title : 'marqueur 1 ',
				img: 'images/mm_20_green.png',
				width:10,
				height:20,
				ancreX : 0,
				ancreY : 0,
				infoBulle : {
					text : "<div style='background-color:#000000;width:300px;height:100px;padding:0px;margin:0px;'><div style='position:absolute;top:0px;left:0px;width:30px;height:30px;background-color:white;' id='croixFermeture' onclick='marker2.bulle.setMap(null)'>f</div><textarea style='margin-left:50px;z-index:9999999;' onclick='this.focus();setCursor(this,getCaret(this),getCaret(this));'></textarea></div>",
					ancreX : 0,
					ancreY : 0
				}
			};
var marker2 = map.addMarker(myOpt);
			
			
	
//marker non custom et bulle custom			
var myOpt = {
	lat : 21.5,
	lng : 22,
	infoBulle : {
		text : "<p style='color:#000000;width:100px;height:50px;background-color:#e5ecf9;background-color:#e5ecf9;#e5ecf9;border:solid 1px #3366cc;'><span style='font-size:20px;line-height:20px;padding;2px;width:20px;' onclick='marker4.bulle.setMap(null);'>X</span> marker non custom et bulle custom </p> ",
		ancreX : 0,
		ancreY : 0
	}
};
var marker3 = map.addMarker(myOpt);
			
			
//marker custom et bulle non custom		
var myOpt = {
	lat : 24.5,
	lng : 25.5,
	title : 'marqueur 1 0',
	img: 'images/marker.png',
	width:16,
	height:16,
	ancreX : 0,
	ancreY : 0,
	text : "Marker custom et bulle non custom"
};
var marker4 = map.addMarker(myOpt);
                       

Gestion ouverture/fermeture pour un marker avec une bulle custom

Declaration du marker, on utilise le code suivant "marker.bulle.setMap(null);" afin de fermer la bulle

            
var myOpt = {
	lat : 23.5,
	lng : 26,
	title : 'marqueur 1 0',
	img: 'images/marker.png',
	width:16,
	height:16,
	ancreX : 0,
	ancreY : 0,
	infoBulle : {
		text : "<p style='color:#000000;width:100px;height:50px;background-color:#e5ecf9;background-color:#e5ecf9;#e5ecf9;border:solid 1px #3366cc;'><span style='font-size:20px;line-height:20px;padding;2px;width:20px;' onclick='marker.bulle.setMap(null);'>X</span> coucou </p> ",
		ancreX : 0,
		ancreY : 0
	}
};
var marker = map.addMarker(myOpt);
                       

Utiliser la fonction suivante afin d'ouvrir les bulles de marker custom

            
				
map.ouvreBulleCustom(marker);	
				
                       

Gestion ouverture/fermeture des bulles custom pour un Import

configurer le fichier xml de la manière du code ci-dessous, et mettez le code suivant {!#FERMER#!} sur le onclick de la croix pour fermer l'infobulle

            
									
/*
html_de_la_bulle = <p style='color:#000000;width:100px;height:50px;background-color:#e5ecf9;background-color:#e5ecf9;#e5ecf9;border:solid 1px #3366cc;'><span style='font-size:20px;line-height:20px;padding;2px;width:20px;' onclick='{!#FERMER#!}'>X</span> coucou </p>								
*/

<?xml version="1.0" encoding="utf-8"?>
<markers>	 
	<marker title="mon titre" icon="lien image"  width="largeur" height="hauteur" ancreX="ancre_x_icone"  ancreY="ancre_y_icone" lat="latitude" lng="longitude" html="html_de_la_bulle" ancreXbulle="ancre_x_bulle" ancreYbulle="ancre_y_bulle" onclick="code_js_onclick" openBulle="true_or_false"/>
</markers>	 

                       

Utiliser les fonctions suivantes afin de fermer et ouvrir (sans cliquer sur le marker) les bulles de l'import

            
//gestion de la fermeture des bulles avec le code {!#FERMER#!}
function fermeBulleImportKML(indice){
		imp.list_marker[indice].bulle.setMap(null); // imp correspond à l'objet (class Import) utilisé pour l'import
}

//indice correspond au éieme marker importé dans votre fichier XML
function ouvreBulleImport(indice){
	map.ouvreBulleCustom(imp.list_marker[indice]);	
}
		 

                       

Les exemples

Class Import [Exemple]

Ci dessous vous trouverez les extraits de code qui ont été utilisés pour créer les exemples de ce site :

Import JS

Voici les différents imports JS à mettre dans votre page afin d'utiliser la classe Import

            
<script type='text/javascript' src='js/classe/Utils.js'></script>
<script type='text/javascript' src='js/classe/Map.js'></script>
<script type='text/javascript' src='js/classe/Import.js'></script>

                       

Initialisation

Vous pouvez importer des fichiers xml contenant les informations des markers. Pour un import, vous pouvez centrer l'import suite à celui-ci et regrouper les icones en fonction du zoom.

            
imp = new Import(map2, {
	centre : true,
	regroup : true
});

                       

Redéfinir le style de regroupement

En ce qui concerne le regroupment vous pouvez définir le style de chaque type d'icone importée. Vous ciblez donc une url d'image et vous lui attachez une autre images ainsi que plusieurs propriétés afin de définir l'image utilisée pour le regroupement

            
 var styles = [
	["images/mm_20_green.png icone_a_matcher",{
		url: "images/mm_20_green.png", //icone image a remplacer pour le regroupement
		height: 20, // hauteur de l'image
		width: 12,// largeur de l'image
		ancre: [2,-2],//ancre pour le texte
		color: "#000000", //color du texte
		size: 10 // taille du texte
	 }],
	["images/mm_20_red.png",{ // idem pourun deuxieme type d'icone
		url: "images/mm_20_red.png",
		height: 20,
		width: 12,
		ancre: [2,-2],
		color: "#000000",
		size: 10
	}]
	
];
imp.setStyle(styles);

                       

Import de marker

- Pour un marker custom avec bulle custom : renseigner "icon" et "html"
- Pour un marker custom avec bulle non custom : renseigner "icon" et "texte"
- Pour un marker non custom avec bulle non custom : renseigner "texte" et vider "icon"
- Pour un marker non custom avec bulle custom : renseigner "html" et vider "icon"

configurer le fichier xml de la manière suivante :

            
<?xml version="1.0" encoding="utf-8"?>
<markers>	 
	<marker title="mon titre" icon="lien image"  width="largeur" height="hauteur" ancreX="ancre_x_icone"  ancreY="ancre_y_icone" lat="latitude" lng="longitude" html="html_de_la_bulle" ancreXbulle="ancre_x_bulle" ancreYbulle="ancre_y_bulle" onclick="code_js_onclick" openBulle="true_or_false" texte="contenu_bulle_non_custom"/>
</markers>	 

                       

Appel de la méthode kml afin d'importer le XML contenant les informations des markers

            
imp.kml("http://www.baptiste-gauthier.fr/test/gmapV3/kml2.xml") ;

                       

Import de polyline

Dans l'exemple, vous trouvez comment configurer le xml afin d'importer un fichier contenant des coordonnées GPS.

            
<?xml version="1.0" encoding="utf-8"?>
  <coordinates>
	<coord lng="6.433675 " lat="44.498311" alt="0" />
	<coord lng="6.433176 " lat="44.498166" alt="0" />
	<coord lng="6.433402 " lat="44.498013" alt="0" />
	...
</coordinates>
			
			          	

Ensuite il vous suffit de faire appel à la fonction kmlPolyline. On voit par la même occasion a utiliser la méthode getElevation de la classe Map

            	
  imp.kmlPolyline(url,function(){map2.getElevation(imp.polyline[0],traceGraph);});
                       

Les exemples

Classe Direction [Exemple]

Ci dessous vous trouverez les extraits de code qui ont été utilisés pour créer les exemples de ce site :

Import JS

Voici les différents imports JS à mettre dans votre page afin d'utiliser la classe Direction

            
<script type='text/javascript' src='js/classe/Utils.js'></script>
<script type='text/javascript' src='js/classe/Map.js'></script>
<script type='text/javascript' src='js/classe/Direction.js'></script>

                       

Initialisation

Pour initialiser la classe direction vous devez passer en paramètre une instance Map.

            
var direction;
direction = new Direction(map3);

                       

Itinéraire par défaut

Pour tracer un itinéraire, vous devez au minimum renseigner le départ, l'arrivée et l'identifiant de la div pour accueillir la feuille de route. Les autres options sont facultatives. Le trajet de l'itinéraire sera tracé sur la map de l'instance Direction.

            


var optDirection1 = {
		depart :"saint savin 38300 FRANCE",
		arrive:"bourgoin jallieu 38300 FRANCE",
		type: "car",
		div : "maFeuille",
		preverse: false,
		draggable:true,
		alternative:true

}

direction.addDirection(optDirection1);

                       

Configuration départ arrivé

Pour le départ ou l'arrivé vous pouvez transmettre soit l'adresse, soit un tableau de coordonnées

            


var optDirection1 = {
		depart :[45.3, 3.9],
		arrive:"bourgoin jallieu 38300 FRANCE",
		type: "car",
		div : "maFeuille",
		preverse: false,
		draggable:true,
		alternative:true

}

direction.addDirection(optDirection1);

                       

Itinéraire custom

Ci dessous les options qui faut transmettre à la méthode addDirection afin de créer un itineraire totalement skiné. Les 2 options importantes sont "custom" (activation de l'option) et "func" (fonction retour pour effectuer la mise en page de la feuille de route),

            

var optDirection2 = {
		depart :"saint savin 38300 FRANCE",
		arrive:"bourgoin jallieu 38300 FRANCE",
		type: "car",
		div : "maFeuille",
		preverse: false,
		draggable:false,
		alternative:false,
		custom : true,
		func:maFonctionRetourDirection
		

}

direction.addDirection(optDirection2);
	

Fonction retour d'un itinéraire custom simple

En paramètre de la fonction un tableau d'objet "route" vous ai transmi, vous pouvez donner ce tableau et un identifiant de div à la méthode traceAutoDirection afin de tracer l'itineraire en configuration de base .

          



function maFonctionRetourDirection(tab_etape){
	
	var option = {
		tab_etape : tab_etape,
		id_rendu : "maFeuille",
		
	}
	
	direction.traceAutoDirection(option);
}

Ensuite vous pouvez utiliser la feuille de style suivante afin de skinner la feuille de route

            
.start{
	/* contener de  : adresse départ de l'itineraire*/	
}

.duration{
		/* contener de  :  durée de l'itineraire*/	
}

.durationStep{
	/* contener de  :  durée de l'étape*/		
}


.infoStep{
	/* contener de  :  info de l'étape*/		
}

.end{
		/* contener de  : adresse arrivé de l'itineraire*/	
}

.classMarker{
		/* contener de  : numero étape*/	
}
									
			            

Vous pouvez aussi redéfinir les differents style de la feuille de route, et ainsi créer votre propre CSS. La définition du trait est aussi paramétrable

            



function maFonctionRetourDirection(tab_etape){
	
	var option = {
		tab_etape : tab_etape,
		id_rendu : "maFeuille",
		classe : {
			start : "test",	
			duration : "test",	
			durationStep : "test",	
			infoStep : "test",	
			end : "test",	
			classMarker:"test"
		},
		trait : {
			alpha : 1,
			size:10,
			color:"#FF0000"
		}
	}
	
	direction.traceAutoDirection(option);
}

Fonction retour d'un itinéraire custom complexe

Dans cette exemple on va redéfinir la fontion traceAutoDirection afin de réaliser les actions que l'on desire. C'est un exemple complete qui trace l'itineraire, les markers, la feuille de route en utilisant le tableau d'objet route transmit par le callback

            




var optDirection2 = {
		depart :"saint savin 38300 FRANCE",
		arrive:"bourgoin jallieu 38300 FRANCE",
		type: "car",
		div : "maFeuille",
		preverse: false,
		draggable:false,
		alternative:false,
		custom : true,
		func:maFonctionRetourDirection
		

}

function maFonctionRetourDirection(tab_etape){
	
	
	var html = "";
	var itineraire = [];
	//parcours des differentes routes
	for(var i = 0; i < tab_etape.length ; i++){
		
			//ajout du points de départ 
			html += "<div style='background-color:red;'>"+(tab_etape[i].start)+"</div>";
			
			//ajout de la distance
			html += "<div style='background-color:yellow;'>"+(tab_etape[i].duration/60)+"min "+(tab_etape[i].distance/1000)+" km</div>";
			
			//stockage du point de depart
			itineraire.push(tab_etape[i].startCoord);
			
			//ajout du points de départ
			markerHTML = map3.addMarkerHTML(tab_etape[i].startCoord.lat(),tab_etape[i].startCoord.lng(),"<div style='background-color:red;width:30px;height:30px;font-size:10px;'>1</div>",maFonction);
			
			//parcours de toutes les étapes
			for(var y = 0; y < tab_etape[i].steps.length ; y++){
				
				//ajout de la distance de l'etape
				html += "<div style='background-color:green;'>"+(tab_etape[i].steps[y].duration/60)+"min "+(tab_etape[i].steps[y].distance/1000)+" km</div>";
				
				//ajout de l'info de l'etape
				html += "<div  style='background-color:blue;'>"+y+" - "+tab_etape[i].steps[y].text+"</div>";
				
				//stockage de tous les lat lng de l’etape
				for(var z = 0 ; z < tab_etape[i].steps[y].path.length; z++){
					itineraire.push(tab_etape[i].steps[y].path[z]);
				}
				
				
			}
			
			//ajout du fin d'arrivé
			html += "<div style='background-color:red;'>"+(tab_etape[i].end)+"</div>";
			
			//stokage du points de fin
			itineraire.push(tab_etape[i].endCoord);
			
			//ajout du marker de fin
			markerHTML = map3.addMarkerHTML(tab_etape[i].endCoord.lat(),tab_etape[i].endCoord.lng(),"<div style='background-color:red;width:30px;height:30px;font-size:10px;'>2</div>",maFonction);
	}
	
	//ajout de l'html construit précèdemment
	document.getElementById("maFeuille").innerHTML = html; 
	
	//tracer et centrage du polilyne
	var poly = map3.addPolyline(itineraire);
	map3.centerWithPoly(poly);
}



                       

Suppression direction

Pour effacer un itineraire non custom il vous suffit de faire appel à la fonction delAt en passant l'indice de la direction que vous voulez supprimer

            


var indiceDirection = direction.addDirection(optDirection1);
 direction.delAt(directionIndice2);

                       

Pour effacer un itineraire custom avec la fonction de tracé perso, il est à votre charge de supprimer les éléments du tracé (polyline et markers). Voici la methode :

            
var optDirection1 = {
		depart :[45.3, 5.4],
		arrive:"bourgoin jallieu 38300 FRANCE",
		type: "car",
		div : "maFeuille",
		preverse: false,
		draggable:true,
		alternative:true,
		custom : true,

}

var indiceDirection = direction.addDirection(optDirection1);
direction.delAt(directionIndice2);
polyIti.setMap(null);
markerDebut.setMap(null);
markerFin.setMap(null);

                       

Dans le cas ou vous utilisez la fonction traceAutoDirection les markers et polyline utilisés pour le tracé est renvoyé dans un tableau. Voici la methode :

            
var array_iti = [];								
function maFonctionRetourDirection(tab_etape){
			
		var option = {
				tab_etape : tab_etape,
				id_rendu : "maFeuille",
				trait : {
					alpha : 1,
					size:3,
					color:"#FF0000"
				}
				
		}
		
		
		array_iti = direction.traceAutoDirection(option);
}


var optDirection1 = {
		depart :[45.3, 5.4],
		arrive:"bourgoin jallieu 38300 FRANCE",
		type: "car",
		div : "maFeuille",
		preverse: false,
		draggable:true,
		alternative:true,
		custom : true,
        func:maFonctionRetourDirection


}

var indiceDirection = direction.addDirection(optDirection1);
direction.delAt(directionIndice2);
//suppression polyline
array_iti[0].setMap(null);
//suppression marker
for(var i = 0; i < array_iti[1].length ; i++){
	array_iti[1][i].setMap(null);
}