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 } ];
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 notrepolyline
va venir s'afficher. - La propriété
path
: correspond à la séquence ordonnée des coordonnées nécessaires à la construction de lapolyline
.
Ici, on souhaite :
- afficher la
polyline
sur la carte nomméemaCarte
:map: maCarte
- utiliser les données contenues dans le tableau nommé
tableauPointsPolyline
pour tracer lapolyline
: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
};
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.
- Encoder les LatLng d'un objet MVCArray avec encodePath
- Encoder les LatLng d'un tableau Array avec encodePath
- Décoder avec decodePath une chaîne de LatLng encodés
- Tracer une polyline en cliquant sur la carte et afficher des Latitude/Longitude brutes et encodées