Logo TouraineVerte

GMap3 Plugin JQuery

addDirectionsRenderer gmap3

Google Maps API & Google Web Services

Vous avez trouvé ce tutoriel intéressant ? Recommandez le en cliquant sur le bouton +1    

Ajouter un itinéraire sur une carte Google Maps

Tutoriel publié le Mis à jour le
Tutoriel en Français

Cette fonction permet d'ajouter le moteur de rendu pour itinéraire sur une carte Google Maps

addDirectionsRenderer

Cet exemple calcule un itinéraire entre deux adresses postales puis affiche le résultat sur la carte.

 
$('#maCarte').gmap3(
	{
		action:'getRoute',
		options:{
			origin:'48 Pirrama Road, Pyrmont NSW',
			destination:'Bondi Beach, NSW',
			travelMode: google.maps.DirectionsTravelMode.DRIVING
		},
		callback: function(results){
			if (!results) return;
			$(this).gmap3(
				{
					action:'init', 
					zoom: 13, 
					mapTypeId: google.maps.MapTypeId.ROADMAP, 
					streetViewControl: true, 
					center: [-33.879, 151.235] 
				},
				{
					action:'addDirectionsRenderer',
					options:{
						preserveViewport: true,
						draggable: false,
						directions:results
					}
				}
			);
		}
	}
);

Carte avec addDirectionsRenderer

Code complet avec addDirectionsRenderer

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
		<meta charset="UTF-8"/>
		<title>Votre titre de page</title>
		<style type="text/css">
			html { height: 100% }
			body { height: 100%; margin: 0px; padding: 0px }
			#maCarte{
				height: 350px;
				width: 100%;
			}
		</style>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
		<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
		<script type="text/javascript" src="http://www.votredomaine.fr/js/gmap3.js"></script>
		<script type="text/javascript"> 
			$(function(){
				$('#maCarte').gmap3(
					{
						action:'getRoute',
						options:{
							origin:'48 Pirrama Road, Pyrmont NSW',
							destination:'Bondi Beach, NSW',
							travelMode: google.maps.DirectionsTravelMode.DRIVING
						},
						callback: function(results){
							if (!results) return;
							$(this).gmap3(
								{
									action:'init', 
									zoom: 13, 
									mapTypeId: google.maps.MapTypeId.ROADMAP, 
									streetViewControl: true, 
									center: [-33.879, 151.235] 
								},
								{
									action:'addDirectionsRenderer',
									options:{
										preserveViewport: true,
										draggable: false,
										directions:results
									}
								}
							);
						}
					}
				);
			});
		</script>
	</head>
	
	<body>
		<div id="maCarte"></div>
	</body>
</html>