Logo TouraineVerte

API Google Maps JavaScript version 3

Construire une polyline simple

Google Maps API & Google Web Services

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

Créer une polyline

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

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

Ce tutoriel est basé sur le code de l'exemple intitulé :

Comment créer une carte à l'aide de l'API Google Maps Version 3.

Nous allons compléter ce code afin d'ajouter une polyline sur la carte.

Les caractéristiques de la polyline sont les suivantes :

  • représente le tracé du tramway à Tours en 2013,
  • affichée sur la carte nommée maCarte,
  • couleur, épaisseur et opacité : valeurs par défaut.

Carte avec une Polyline

Création du tableau contenant chaque point de la Polyline

Création d'un nouveau tableau nommé tableauPointsPolyline, destiné à contenir l'ensemble des points (latitude, longitude) permettant de tracer notre polyline :

var tableauPointsPolyline = [];

<!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 type="text/css">
			html {
				height: 100%
			}
			body {
				height: 100%;
				margin: 0;
				padding: 0
			}
			#EmplacementDeMaCarte {
				height: 100%
			}
		</style>
		<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
		<script type="text/javascript">
			function initialisation(){
				var centreCarte = new google.maps.LatLng(47.381381, 0.687503);
				var optionsCarte = {
					zoom: 12,
					center: centreCarte,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				}
				var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
				var tableauPointsPolyline = [
					.....
				];
			}
			google.maps.event.addDomListener(window, 'load', initialisation);
		</script>
	</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>
	</body>
</html>

Insertion des points dans le tableau

Chaque point nécessaire à la construction du tracé, est inséré dans le tableau de la façon suivante :

new google.maps.LatLng(latitude, longitude), // Mettre une virgule en fin de ligne

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

new google.maps.LatLng(latitude, longitude) // Pas de virgule à la fin de la dernière ligne

<!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 type="text/css">
			html {
				height: 100%
			}
			body {
				height: 100%;
				margin: 0;
				padding: 0
			}
			#EmplacementDeMaCarte {
				height: 100%
			}
		</style>
		<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
		<script type="text/javascript">
			function initialisation(){
				var centreCarte = new google.maps.LatLng(47.381381, 0.687503);
				var optionsCarte = {
					zoom: 12,
					center: centreCarte,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				}
				var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
				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)
				];
			}
			google.maps.event.addDomListener(window, 'load', initialisation);
		</script>
	</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>
	</body>
</html>

Paramètres de la Polyline

Création d'options nommées optionsPolyline, sous la forme d'un objet littéral, destinées à fixer les paramètres nécessaires à la construction de notre polyline.

Chaque option s'écrit ainsi :

nom_de_la_propriété: valeur

<!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 type="text/css">
			html {
				height: 100%
			}
			body {
				height: 100%;
				margin: 0;
				padding: 0
			}
			#EmplacementDeMaCarte {
				height: 100%
			}
		</style>
		<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
		<script type="text/javascript">
			function initialisation(){
				var centreCarte = new google.maps.LatLng(47.381381, 0.687503);
				var optionsCarte = {
					zoom: 12,
					center: centreCarte,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				}
				var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
				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)
				];
				var optionsPolyline = {
					.....
				};
			}
			google.maps.event.addDomListener(window, 'load', initialisation);
		</script>
	</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>
	</body>
</html>

Propriété map

La propriété map: permet de déterminer la carte sur laquelle notre polyline va venir s'afficher.

Ici, on veut l'afficher sur la carte nommée maCarte.

map: maCarte,

<!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 type="text/css">
			html {
				height: 100%
			}
			body {
				height: 100%;
				margin: 0;
				padding: 0
			}
			#EmplacementDeMaCarte {
				height: 100%
			}
		</style>
		<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
		<script type="text/javascript">
			function initialisation(){
				var centreCarte = new google.maps.LatLng(47.381381, 0.687503);
				var optionsCarte = {
					zoom: 12,
					center: centreCarte,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				}
				var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
				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)
				];
				var optionsPolyline = {
					map: maCarte
					.....
				};
			}
			google.maps.event.addDomListener(window, 'load', initialisation);
		</script>
	</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>
	</body>
</html>

Proprité path

La propriété path: correspond à la séquence ordonnée des coordonnées nécessaires à la construction de la polyline.

Ici, on veut afficher sur la carte le tracé correspondant aux données contenues dans le tableau nommé tableauPointsPolyline.

path: tableauPointsPolyline

Attention : la dernière option ne doit pas être suivie d'une virgule en fin de ligne.

<!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 type="text/css">
			html {
				height: 100%
			}
			body {
				height: 100%;
				margin: 0;
				padding: 0
			}
			#EmplacementDeMaCarte {
				height: 100%
			}
		</style>
		<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
		<script type="text/javascript">
			function initialisation(){
				var centreCarte = new google.maps.LatLng(47.381381, 0.687503);
				var optionsCarte = {
					zoom: 12,
					center: centreCarte,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				}
				var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
				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)
				];
				var optionsPolyline = {
					map: maCarte,
					path: tableauPointsPolyline
				};
			}
		google.maps.event.addDomListener(window, 'load', initialisation);
		</script>
	</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>
	</body>
</html>

Création de la Polyline

Pour finir, on créé une nouvelle polyline nommée maPolyline à laquelle on applique les options fixées dans optionsPolyline .

<!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 type="text/css">
			html {
				height: 100%
			}
			body {
				height: 100%;
				margin: 0;
				padding: 0
			}
			#EmplacementDeMaCarte {
				height: 100%
			}
		</style>
		<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
		<script type="text/javascript">
			function initialisation(){
				var centreCarte = new google.maps.LatLng(47.381381, 0.687503);
				var optionsCarte = {
					zoom: 12,
					center: centreCarte,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				}
				var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
				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)
				];
				var optionsPolyline = {
					map: maCarte,
					path: tableauPointsPolyline
				};
				var maPolyline = new google.maps.Polyline(optionsPolyline);
		}
			google.maps.event.addDomListener(window, 'load', initialisation);
		</script>
	</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>
	</body>
</html>

Code final

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 type="text/css">
			html {
				height: 100%
			}
			body {
				height: 100%;
				margin: 0;
				padding: 0
			}
			#EmplacementDeMaCarte {
				height: 100%
			}
		</style>
		<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
		<script type="text/javascript">
			function initialisation(){
				var centreCarte = new google.maps.LatLng(47.381381, 0.687503);
				var optionsCarte = {
					zoom: 12,
					center: centreCarte,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				}
				var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
				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),
					new google.maps.LatLng(47.422657, 0.706558),
					new google.maps.LatLng(47.422310, 0.705700),
					new google.maps.LatLng(47.421902, 0.704927),
					new google.maps.LatLng(47.421524, 0.704284),
					new google.maps.LatLng(47.421001, 0.704155),
					new google.maps.LatLng(47.420887, 0.703769),
					new google.maps.LatLng(47.420856, 0.698833),
					new google.maps.LatLng(47.423210, 0.698791),
					new google.maps.LatLng(47.423878, 0.697417),
					new google.maps.LatLng(47.423847, 0.696301),
					new google.maps.LatLng(47.423790, 0.695186),
					new google.maps.LatLng(47.423733, 0.693512),
					new google.maps.LatLng(47.423500, 0.691066),
					new google.maps.LatLng(47.423065, 0.687418),
					new google.maps.LatLng(47.422947, 0.685873),
					new google.maps.LatLng(47.422688, 0.683341),
					new google.maps.LatLng(47.419956, 0.684028),
					new google.maps.LatLng(47.418941, 0.683899),
					new google.maps.LatLng(47.418594, 0.683770),
					new google.maps.LatLng(47.417545, 0.683556),
					new google.maps.LatLng(47.417068, 0.683620),
					new google.maps.LatLng(47.416344, 0.683749),
					new google.maps.LatLng(47.415920, 0.683920),
					new google.maps.LatLng(47.415443, 0.684114),
					new google.maps.LatLng(47.414730, 0.684221),
					new google.maps.LatLng(47.414326, 0.684264),
					new google.maps.LatLng(47.414223, 0.684285),
					new google.maps.LatLng(47.414280, 0.685487),
					new google.maps.LatLng(47.413685, 0.686731),
					new google.maps.LatLng(47.409008, 0.681281),
					new google.maps.LatLng(47.401154, 0.684328),
					new google.maps.LatLng(47.396751, 0.686259),
					new google.maps.LatLng(47.392902, 0.687783),
					new google.maps.LatLng(47.392017, 0.688126),
					new google.maps.LatLng(47.391113, 0.688491),
					new google.maps.LatLng(47.390347, 0.688856),
					new google.maps.LatLng(47.389664, 0.689070),
					new google.maps.LatLng(47.388283, 0.689757),
					new google.maps.LatLng(47.389301, 0.692568),
					new google.maps.LatLng(47.389561, 0.692997),
					new google.maps.LatLng(47.389084, 0.693555),
					new google.maps.LatLng(47.388500, 0.693448),
					new google.maps.LatLng(47.386887, 0.695400),
					new google.maps.LatLng(47.386204, 0.695229),
					new google.maps.LatLng(47.385578, 0.695486),
					new google.maps.LatLng(47.384548, 0.695808),
					new google.maps.LatLng(47.382877, 0.696516),
					new google.maps.LatLng(47.380596, 0.697331),
					new google.maps.LatLng(47.380363, 0.697203),
					new google.maps.LatLng(47.379597, 0.693212),
					new google.maps.LatLng(47.374916, 0.695057),
					new google.maps.LatLng(47.374001, 0.695422),
					new google.maps.LatLng(47.373959, 0.694628),
					new google.maps.LatLng(47.373856, 0.693662),
					new google.maps.LatLng(47.373577, 0.692117),
					new google.maps.LatLng(47.373070, 0.689628),
					new google.maps.LatLng(47.373013, 0.689178),
					new google.maps.LatLng(47.371952, 0.688727),
					new google.maps.LatLng(47.370136, 0.687654),
					new google.maps.LatLng(47.369305, 0.687461),
					new google.maps.LatLng(47.367928, 0.687032),
					new google.maps.LatLng(47.368057, 0.685143),
					new google.maps.LatLng(47.367577, 0.684414),
					new google.maps.LatLng(47.366444, 0.684092),
					new google.maps.LatLng(47.366356, 0.683749),
					new google.maps.LatLng(47.366707, 0.680895),
					new google.maps.LatLng(47.367111, 0.678577),
					new google.maps.LatLng(47.367577, 0.675938),
					new google.maps.LatLng(47.365528, 0.675037),
					new google.maps.LatLng(47.363712, 0.674329),
					new google.maps.LatLng(47.362228, 0.673749),
					new google.maps.LatLng(47.360294, 0.671003),
					new google.maps.LatLng(47.359730, 0.669115),
					new google.maps.LatLng(47.359161, 0.668600),
					new google.maps.LatLng(47.357548, 0.667999),
					new google.maps.LatLng(47.356995, 0.666583),
					new google.maps.LatLng(47.355976, 0.664995),
					new google.maps.LatLng(47.354771, 0.664308),
					new google.maps.LatLng(47.353928, 0.663879),
					new google.maps.LatLng(47.352634, 0.663342),
					new google.maps.LatLng(47.351067, 0.662613),
					new google.maps.LatLng(47.350601, 0.662613),
					new google.maps.LatLng(47.349480, 0.663235),
					new google.maps.LatLng(47.348854, 0.663407),
					new google.maps.LatLng(47.348083, 0.663171),
					new google.maps.LatLng(47.347446, 0.662892),
					new google.maps.LatLng(47.347214, 0.662763),
					new google.maps.LatLng(47.347038, 0.661991),
					new google.maps.LatLng(47.346310, 0.662119),
					new google.maps.LatLng(47.345135, 0.662291),
					new google.maps.LatLng(47.344231, 0.662484),
					new google.maps.LatLng(47.344158, 0.660896),
					new google.maps.LatLng(47.343708, 0.660038),
					new google.maps.LatLng(47.342819, 0.659974),
					new google.maps.LatLng(47.341702, 0.660832),
					new google.maps.LatLng(47.339581, 0.659008),
					new google.maps.LatLng(47.339462, 0.658493),
					new google.maps.LatLng(47.339027, 0.657849),
					new google.maps.LatLng(47.338066, 0.657806)
				];
				var optionsPolyline = {
					map: maCarte,
					path: tableauPointsPolyline
				};
				var maPolyline = new google.maps.Polyline(optionsPolyline);
			}
			google.maps.event.addDomListener(window, 'load', initialisation);
		</script>
	</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>
	</body>
</html>