Créer et afficher une polyline sur une carte Google Maps

Polyline exemples et tutoriels en Français

API Google Maps JavaScript version 3

Comment créer et afficher une polyline sur une carte ?

Ce tutoriel, basé l'exemple intitulé : Comment créer une carte à l'aide de l'API Google Maps Version 3, vous explique comment créer et afficher une polyline sur une carte Google Maps.

var optionsCarte = {
	zoom: 8,
	center: { lat: 47.381381, lng: 0.687503 }
}
var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);

Nous allons modifier ce code afin de créer une polyline dont les caractéristiques sont les suivantes :

  • polyline nommée maPolyline représentant le tracé du tramway à Tours,
  • affichage sur la carte nommée maCarte,
  • couleur, épaisseur et opacité : valeurs par défaut.

Création du tableau contenant chaque point de la Polyline

Tout d'abord créons un nouveau tableau, nommé tableauPointsPolyline, contenant l'ensemble des points (latitude, longitude) permettant de tracer notre polyline :
Chaque point nécessaire à la construction du tracé, est inséré dans le tableau :

  • soit sous la forme d'un objet LatLng,
    var tableauPointsPolyline = [
    	new google.maps.LatLng(47.423820, 0.709820),
    	new google.maps.LatLng(47.423298, 0.708446),
    	new google.maps.LatLng(47.423180, 0.707545),
    	
    	... Seule une partie des points est affichée ici ...
    	
    	new google.maps.LatLng(47.339462, 0.658493),
    	new google.maps.LatLng(47.339027, 0.657849),
    	new google.maps.LatLng(47.338066, 0.657806)
    ];
    
  • soit sous la forme d'un objet littéral LatLngLiteral.
    var tableauPointsPolyline = [
    	{ lat: 47.423820, lng: 0.709820 },
    	{ lat: 47.423298, lng: 0.708446 },
    	{ lat: 47.423180, lng: 0.707545 },
    	
    	... Seule une partie des points est affichée ici ...
    	
    	{ lat: 47.339462, lng: 0.658493 },
    	{ lat: 47.339027, lng: 0.657849 },
    	{ lat: 47.338066, lng: 0.657806 }
    ];
    

Attention :
La dernière ligne du tableau, correspondant au dernier point de votre polyline, ne doit pas comporter de virgule en fin de ligne.

Paramètres map path de la Polyline

Nous allons ensuite créer un objet littéral, nommé optionsPolyline, définissant les propriétés nécessaires à la construction de notre polyline.
Chaque propriété s'écrit ainsi :

nom_de_la_propriété: valeur_de_la_propriété

Exemple :

var optionsPolyline = {
	nom_de_la_propriété_une: valeur_de_la_propriété_une,
	nom_de_la_propriété_deux: valeur_de_la_propriété_deux,
		... etc ...
	nom_de_la_propriété_n: valeur_de_la_propriété_n
};

Deux propriétés sont indispensables à la création d'une polyline :

  • La propriété map: permet de déterminer la carte sur laquelle notre polyline va venir s'afficher.
  • La propriété path: correspond à la séquence ordonnée des coordonnées nécessaires à la construction de la polyline.

Ici, on souhaite :

  • afficher la polyline sur la carte nommée maCarte :
    map: maCarte
  • utiliser les données contenues dans le tableau nommé tableauPointsPolyline pour tracer la polyline :
    path: tableauPointsPolyline

Le code sera donc :

	//*****************************************************************************************************
	//****	Objet LatLng						OU					Objet LatLngLiteral				******
	//*****************************************************************************************************


var tableauPointsPolyline = [								//		var tableauPointsPolyline = [	
	new google.maps.LatLng(47.423820, 0.709820),				//			{ lat: 47.423820, lng: 0.709820 },
	new google.maps.LatLng(47.423298, 0.708446),				//			{ lat: 47.423298, lng: 0.708446 },
	new google.maps.LatLng(47.423180, 0.707545),				//			{ lat: 47.423180, lng: 0.707545 },
															//			
	... Seule une partie des points est affichée ici ...		//			... Seule une partie des points est affichée ici ...
															//			
	new google.maps.LatLng(47.339462, 0.658493),				//			{ lat: 47.339462, lng: 0.658493 },
	new google.maps.LatLng(47.339027, 0.657849),				//			{ lat: 47.339027, lng: 0.657849 },
	new google.maps.LatLng(47.338066, 0.657806)				//			{ lat: 47.338066, lng: 0.657806 }
];															//		];

var optionsPolyline = {
	map: maCarte,
	path: tableauPointsPolyline
};
Attention :
Dans un objet littéral toutes les propriétés doivent être suivies d'une virgule en fin de ligne, exceptée la dernière propriété.

Création de la Polyline

Pour finir, on crée une nouvelle polyline nommée maPolyline à laquelle on applique les propriétés définies dans optionsPolyline.

	//*****************************************************************************************************
	//****	Objet LatLng						OU					Objet LatLngLiteral				******
	//*****************************************************************************************************


var tableauPointsPolyline = [								//		var tableauPointsPolyline = [	
	new google.maps.LatLng(47.423820, 0.709820),				//			{ lat: 47.423820, lng: 0.709820 },
	new google.maps.LatLng(47.423298, 0.708446),				//			{ lat: 47.423298, lng: 0.708446 },
	new google.maps.LatLng(47.423180, 0.707545),				//			{ lat: 47.423180, lng: 0.707545 },
															//			
	... Seule une partie des points est affichée ici ...		//			... Seule une partie des points est affichée ici ...
															//			
	new google.maps.LatLng(47.339462, 0.658493),				//			{ lat: 47.339462, lng: 0.658493 },
	new google.maps.LatLng(47.339027, 0.657849),				//			{ lat: 47.339027, lng: 0.657849 },
	new google.maps.LatLng(47.338066, 0.657806)				//			{ lat: 47.338066, lng: 0.657806 }
];															//		];

var optionsPolyline = {
	map: maCarte,
	path: tableauPointsPolyline
};
var maPolyline = new google.maps.Polyline( optionsPolyline );

Autre écriture possible en utilisant les méthodes setMap et setPath de la classe Polyline :

	//*****************************************************************************************************
	//****	Objet LatLng						OU					Objet LatLngLiteral				******
	//*****************************************************************************************************


var tableauPointsPolyline = [								//		var tableauPointsPolyline = [	
	new google.maps.LatLng(47.423820, 0.709820),				//			{ lat: 47.423820, lng: 0.709820 },
	new google.maps.LatLng(47.423298, 0.708446),				//			{ lat: 47.423298, lng: 0.708446 },
	new google.maps.LatLng(47.423180, 0.707545),				//			{ lat: 47.423180, lng: 0.707545 },
															//			
	... Seule une partie des points est affichée ici ...		//			... Seule une partie des points est affichée ici ...
															//			
	new google.maps.LatLng(47.339462, 0.658493),				//			{ lat: 47.339462, lng: 0.658493 },
	new google.maps.LatLng(47.339027, 0.657849),				//			{ lat: 47.339027, lng: 0.657849 },
	new google.maps.LatLng(47.338066, 0.657806)				//			{ lat: 47.338066, lng: 0.657806 }
];															//		];

var maPolyline = new google.maps.Polyline();
	maPolyline.setMap( maCarte );
	maPolyline.setPath( tableauPointsPolyline );

Autre écriture possible, la classe Polyline héritant de la classe MVCObject :

	//*****************************************************************************************************
	//****	Objet LatLng						OU					Objet LatLngLiteral				******
	//*****************************************************************************************************


var tableauPointsPolyline = [								//		var tableauPointsPolyline = [	
	new google.maps.LatLng(47.423820, 0.709820),				//			{ lat: 47.423820, lng: 0.709820 },
	new google.maps.LatLng(47.423298, 0.708446),				//			{ lat: 47.423298, lng: 0.708446 },
	new google.maps.LatLng(47.423180, 0.707545),				//			{ lat: 47.423180, lng: 0.707545 },
															//			
	... Seule une partie des points est affichée ici ...		//			... Seule une partie des points est affichée ici ...
															//			
	new google.maps.LatLng(47.339462, 0.658493),				//			{ lat: 47.339462, lng: 0.658493 },
	new google.maps.LatLng(47.339027, 0.657849),				//			{ lat: 47.339027, lng: 0.657849 },
	new google.maps.LatLng(47.338066, 0.657806)				//			{ lat: 47.338066, lng: 0.657806 }
];															//		];

var maPolyline = new google.maps.Polyline();
	maPolyline.setValues( {
		map: maCarte,
		path: tableauPointsPolyline
	} );

Code pour créer et afficher une polyline

Ce code permet d'afficher une polyline sur une carte. Ses caractéristiques (couleur, épaisseur, transparence) sont celles par défaut.

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
		<meta charset="UTF-8" />
		<title>Titre de votre page</title>
		<style>
			html, body {
				height: 100%;
				margin: 0;
				padding: 0
			}
			#EmplacementDeMaCarte {
				height: 100%
			}
		</style>
	</head>
	
	<body>
		<div id="EmplacementDeMaCarte"></div>
		<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 ne soit 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>
		<script>
			function initialisation(){
				var optionsCarte = {
					zoom: 12,
					center: { lat: 47.381381, lng: 0.687503 }
				}
				var maCarte = new google.maps.Map( document.getElementById( "EmplacementDeMaCarte" ), optionsCarte );
								
					//*****************************************************************************************************
					//****	Objet LatLng						OU					Objet LatLngLiteral				******
					//*****************************************************************************************************
					
				var tableauPointsPolyline = [								//		var tableauPointsPolyline = [	
					new google.maps.LatLng(47.423820, 0.709820),				//			{ lat: 47.423820, lng: 0.709820),
					new google.maps.LatLng(47.423298, 0.708446),				//			{ lat: 47.423298, lng: 0.708446},
					new google.maps.LatLng(47.423180, 0.707545),				//			{ lat: 47.423180, lng: 0.707545},
					new google.maps.LatLng(47.422657, 0.706558),				//			{ lat: 47.422657, lng: 0.706558},
					new google.maps.LatLng(47.422310, 0.705700),				//			{ lat: 47.422310, lng: 0.705700},
					new google.maps.LatLng(47.421902, 0.704927),				//			{ lat: 47.421902, lng: 0.704927},
					new google.maps.LatLng(47.421524, 0.704284),				//			{ lat: 47.421524, lng: 0.704284},
					new google.maps.LatLng(47.421001, 0.704155),				//			{ lat: 47.421001, lng: 0.704155},
					new google.maps.LatLng(47.420887, 0.703769),				//			{ lat: 47.420887, lng: 0.703769},
					new google.maps.LatLng(47.420856, 0.698833),				//			{ lat: 47.420856, lng: 0.698833},
					new google.maps.LatLng(47.423210, 0.698791),				//			{ lat: 47.423210, lng: 0.698791},
					new google.maps.LatLng(47.423878, 0.697417),				//			{ lat: 47.423878, lng: 0.697417},
					new google.maps.LatLng(47.423847, 0.696301),				//			{ lat: 47.423847, lng: 0.696301},
					new google.maps.LatLng(47.423790, 0.695186),				//			{ lat: 47.423790, lng: 0.695186},
					new google.maps.LatLng(47.423733, 0.693512),				//			{ lat: 47.423733, lng: 0.693512},
					new google.maps.LatLng(47.423500, 0.691066),				//			{ lat: 47.423500, lng: 0.691066},
					new google.maps.LatLng(47.423065, 0.687418),				//			{ lat: 47.423065, lng: 0.687418},
					new google.maps.LatLng(47.422947, 0.685873),				//			{ lat: 47.422947, lng: 0.685873},
					new google.maps.LatLng(47.422688, 0.683341),				//			{ lat: 47.422688, lng: 0.683341},
					new google.maps.LatLng(47.419956, 0.684028),				//			{ lat: 47.419956, lng: 0.684028},
					new google.maps.LatLng(47.418941, 0.683899),				//			{ lat: 47.418941, lng: 0.683899},
					new google.maps.LatLng(47.418594, 0.683770),				//			{ lat: 47.418594, lng: 0.683770},
					new google.maps.LatLng(47.417545, 0.683556),				//			{ lat: 47.417545, lng: 0.683556},
					new google.maps.LatLng(47.417068, 0.683620),				//			{ lat: 47.417068, lng: 0.683620},
					new google.maps.LatLng(47.416344, 0.683749),				//			{ lat: 47.416344, lng: 0.683749},
					new google.maps.LatLng(47.415920, 0.683920),				//			{ lat: 47.415920, lng: 0.683920},
					new google.maps.LatLng(47.415443, 0.684114),				//			{ lat: 47.415443, lng: 0.684114},
					new google.maps.LatLng(47.414730, 0.684221),				//			{ lat: 47.414730, lng: 0.684221},
					new google.maps.LatLng(47.414326, 0.684264),				//			{ lat: 47.414326, lng: 0.684264},
					new google.maps.LatLng(47.414223, 0.684285),				//			{ lat: 47.414223, lng: 0.684285},
					new google.maps.LatLng(47.414280, 0.685487),				//			{ lat: 47.414280, lng: 0.685487},
					new google.maps.LatLng(47.413685, 0.686731),				//			{ lat: 47.413685, lng: 0.686731},
					new google.maps.LatLng(47.409008, 0.681281),				//			{ lat: 47.409008, lng: 0.681281},
					new google.maps.LatLng(47.401154, 0.684328),				//			{ lat: 47.401154, lng: 0.684328},
					new google.maps.LatLng(47.396751, 0.686259),				//			{ lat: 47.396751, lng: 0.686259},
					new google.maps.LatLng(47.392902, 0.687783),				//			{ lat: 47.392902, lng: 0.687783},
					new google.maps.LatLng(47.392017, 0.688126),				//			{ lat: 47.392017, lng: 0.688126},
					new google.maps.LatLng(47.391113, 0.688491),				//			{ lat: 47.391113, lng: 0.688491},
					new google.maps.LatLng(47.390347, 0.688856),				//			{ lat: 47.390347, lng: 0.688856},
					new google.maps.LatLng(47.389664, 0.689070),				//			{ lat: 47.389664, lng: 0.689070},
					new google.maps.LatLng(47.388283, 0.689757),				//			{ lat: 47.388283, lng: 0.689757},
					new google.maps.LatLng(47.389301, 0.692568),				//			{ lat: 47.389301, lng: 0.692568},
					new google.maps.LatLng(47.389561, 0.692997),				//			{ lat: 47.389561, lng: 0.692997},
					new google.maps.LatLng(47.389084, 0.693555),				//			{ lat: 47.389084, lng: 0.693555},
					new google.maps.LatLng(47.388500, 0.693448),				//			{ lat: 47.388500, lng: 0.693448},
					new google.maps.LatLng(47.386887, 0.695400),				//			{ lat: 47.386887, lng: 0.695400},
					new google.maps.LatLng(47.386204, 0.695229),				//			{ lat: 47.386204, lng: 0.695229},
					new google.maps.LatLng(47.385578, 0.695486),				//			{ lat: 47.385578, lng: 0.695486},
					new google.maps.LatLng(47.384548, 0.695808),				//			{ lat: 47.384548, lng: 0.695808},
					new google.maps.LatLng(47.382877, 0.696516),				//			{ lat: 47.382877, lng: 0.696516},
					new google.maps.LatLng(47.380596, 0.697331),				//			{ lat: 47.380596, lng: 0.697331},
					new google.maps.LatLng(47.380363, 0.697203),				//			{ lat: 47.380363, lng: 0.697203},
					new google.maps.LatLng(47.379597, 0.693212),				//			{ lat: 47.379597, lng: 0.693212},
					new google.maps.LatLng(47.374916, 0.695057),				//			{ lat: 47.374916, lng: 0.695057},
					new google.maps.LatLng(47.374001, 0.695422),				//			{ lat: 47.374001, lng: 0.695422},
					new google.maps.LatLng(47.373959, 0.694628),				//			{ lat: 47.373959, lng: 0.694628},
					new google.maps.LatLng(47.373856, 0.693662),				//			{ lat: 47.373856, lng: 0.693662},
					new google.maps.LatLng(47.373577, 0.692117),				//			{ lat: 47.373577, lng: 0.692117},
					new google.maps.LatLng(47.373070, 0.689628),				//			{ lat: 47.373070, lng: 0.689628},
					new google.maps.LatLng(47.373013, 0.689178),				//			{ lat: 47.373013, lng: 0.689178},
					new google.maps.LatLng(47.371952, 0.688727),				//			{ lat: 47.371952, lng: 0.688727},
					new google.maps.LatLng(47.370136, 0.687654),				//			{ lat: 47.370136, lng: 0.687654},
					new google.maps.LatLng(47.369305, 0.687461),				//			{ lat: 47.369305, lng: 0.687461},
					new google.maps.LatLng(47.367928, 0.687032),				//			{ lat: 47.367928, lng: 0.687032},
					new google.maps.LatLng(47.368057, 0.685143),				//			{ lat: 47.368057, lng: 0.685143},
					new google.maps.LatLng(47.367577, 0.684414),				//			{ lat: 47.367577, lng: 0.684414},
					new google.maps.LatLng(47.366444, 0.684092),				//			{ lat: 47.366444, lng: 0.684092},
					new google.maps.LatLng(47.366356, 0.683749),				//			{ lat: 47.366356, lng: 0.683749},
					new google.maps.LatLng(47.366707, 0.680895),				//			{ lat: 47.366707, lng: 0.680895},
					new google.maps.LatLng(47.367111, 0.678577),				//			{ lat: 47.367111, lng: 0.678577},
					new google.maps.LatLng(47.367577, 0.675938),				//			{ lat: 47.367577, lng: 0.675938},
					new google.maps.LatLng(47.365528, 0.675037),				//			{ lat: 47.365528, lng: 0.675037},
					new google.maps.LatLng(47.363712, 0.674329),				//			{ lat: 47.363712, lng: 0.674329},
					new google.maps.LatLng(47.362228, 0.673749),				//			{ lat: 47.362228, lng: 0.673749},
					new google.maps.LatLng(47.360294, 0.671003),				//			{ lat: 47.360294, lng: 0.671003},
					new google.maps.LatLng(47.359730, 0.669115),				//			{ lat: 47.359730, lng: 0.669115},
					new google.maps.LatLng(47.359161, 0.668600),				//			{ lat: 47.359161, lng: 0.668600},
					new google.maps.LatLng(47.357548, 0.667999),				//			{ lat: 47.357548, lng: 0.667999},
					new google.maps.LatLng(47.356995, 0.666583),				//			{ lat: 47.356995, lng: 0.666583},
					new google.maps.LatLng(47.355976, 0.664995),				//			{ lat: 47.355976, lng: 0.664995},
					new google.maps.LatLng(47.354771, 0.664308),				//			{ lat: 47.354771, lng: 0.664308},
					new google.maps.LatLng(47.353928, 0.663879),				//			{ lat: 47.353928, lng: 0.663879},
					new google.maps.LatLng(47.352634, 0.663342),				//			{ lat: 47.352634, lng: 0.663342},
					new google.maps.LatLng(47.351067, 0.662613),				//			{ lat: 47.351067, lng: 0.662613},
					new google.maps.LatLng(47.350601, 0.662613),				//			{ lat: 47.350601, lng: 0.662613},
					new google.maps.LatLng(47.349480, 0.663235),				//			{ lat: 47.349480, lng: 0.663235},
					new google.maps.LatLng(47.348854, 0.663407),				//			{ lat: 47.348854, lng: 0.663407},
					new google.maps.LatLng(47.348083, 0.663171),				//			{ lat: 47.348083, lng: 0.663171},
					new google.maps.LatLng(47.347446, 0.662892),				//			{ lat: 47.347446, lng: 0.662892},
					new google.maps.LatLng(47.347214, 0.662763),				//			{ lat: 47.347214, lng: 0.662763},
					new google.maps.LatLng(47.347038, 0.661991),				//			{ lat: 47.347038, lng: 0.661991},
					new google.maps.LatLng(47.346310, 0.662119),				//			{ lat: 47.346310, lng: 0.662119},
					new google.maps.LatLng(47.345135, 0.662291),				//			{ lat: 47.345135, lng: 0.662291},
					new google.maps.LatLng(47.344231, 0.662484),				//			{ lat: 47.344231, lng: 0.662484},
					new google.maps.LatLng(47.344158, 0.660896),				//			{ lat: 47.344158, lng: 0.660896},
					new google.maps.LatLng(47.343708, 0.660038),				//			{ lat: 47.343708, lng: 0.660038},
					new google.maps.LatLng(47.342819, 0.659974),				//			{ lat: 47.342819, lng: 0.659974},
					new google.maps.LatLng(47.341702, 0.660832),				//			{ lat: 47.341702, lng: 0.660832},
					new google.maps.LatLng(47.339581, 0.659008),				//			{ lat: 47.339581, lng: 0.659008},
					new google.maps.LatLng(47.339462, 0.658493),				//			{ lat: 47.339462, lng: 0.658493},
					new google.maps.LatLng(47.339027, 0.657849),				//			{ lat: 47.339027, lng: 0.657849},
					new google.maps.LatLng(47.338066, 0.657806)				//			{ lat: 47.338066, lng: 0.657806)
				];															//		];	


				var optionsPolyline = {
					map: maCarte,
					path: tableauPointsPolyline
				};
				var maPolyline = new google.maps.Polyline( optionsPolyline );
			}
		</script>
		<script async defer src="http://maps.googleapis.com/maps/api/js?key=InsérezVotreCléApiGoogleMapsIci&callback=initialisation"></script>
	</body>
</html>

Carte avec une Polyline

Encoder et décoder les données LatLng d'une polyline

Voici quelques tutoriels supplémentaires permettant d'encoder ou décoder les données d'une polyline.