Ce tutoriel vous montre comment à partir des données encodées ci-dessous :
- {j~uHyajJtesNzeve@ng}\uszPr_yCyneZ_yqE{fa[}jv^{mdC
afficher la Polyline correspondante et ses LatLng en clair.
Carte Google Maps
Exemple de code
<!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>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry"></script>
<script type="text/javascript">
function initialize(){
var limites = new google.maps.LatLngBounds();
var optionsCarte = {
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
/**
* Attention au piège : le caractère \ doit être échappé \\
* La version encodée originale : {j~uHyajJtesNzeve@ng}\uszPr_yCyneZ_yqE{fa[}jv^{mdC
* La version encodée modifiée avant décodage : {j~uHyajJtesNzeve@ng}\\uszPr_yCyneZ_yqE{fa[}jv^{mdC
*/
var polylineEncodee = '{j~uHyajJtesNzeve@ng}\\uszPr_yCyneZ_yqE{fa[}jv^{mdC';
/**
* La méthode statique decodePath() retourne un tableau de LatLng
* polylineDecodee est donc un tableau que l'on va parcourir
* afin d'optimiser l'affichage de la polyline
*/
var polylineDecodee = google.maps.geometry.encoding.decodePath(polylineEncodee);
for(i=0; i<polylineDecodee.length; i++){
limites.extend(polylineDecodee[i]);
}
maCarte.fitBounds(limites);
/**
* Options de la Polyline à afficher
*/
var optionsPolyline = {
map: maCarte,
path: polylineDecodee
}
/**
* Création et affichage de la Polyline
*/
var polyline = new google.maps.Polyline(optionsPolyline);
/**
* Affichage des données relatives à la Polyline
* sous leur forme encodée et décodée
*/
document.getElementById('info').innerHTML = "Polyline encodée : '"+polylineEncodee+"'<br/>Polyline décodée : "+polylineDecodee;
}
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
<div id="EmplacementDeMaCarte" style="width:100%; height:400px"></div>
<div id="info"></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>