How to display "Google API directions" polylines with leaflet? - google-maps

Question

I would like to display an itinerary on a map with leaflet.
For this, I make a get request on the Google maps directions API. I get a json like this:
{
"routes" : [
{
"bounds" : {
"northeast" : {
"lat" : 51.5103406,
"lng" : -0.0627423
},
"southwest" : {
"lat" : 51.5049264,
"lng" : -0.0898856
}
},
"copyrights" : "Données cartographiques ©2014 Google",
"legs" : [
{
"distance" : {
"text" : "3,0 km",
"value" : 2959
},
"duration" : {
"text" : "7 minutes",
"value" : 427
},
"end_address" : "29 Fowey Close, Londres E1W 2JP, Royaume-Uni",
"end_location" : {
"lat" : 51.5064421,
"lng" : -0.0627423
},
"start_address" : "8 Southwark Street, Londres SE1 1TL, Royaume-Uni",
"start_location" : {
"lat" : 51.5049264,
"lng" : -0.0898856
},
"steps" : [
{
"distance" : {
"text" : "0,6 km",
"value" : 601
},
"duration" : {
"text" : "1 minute",
"value" : 77
},
"end_location" : {
"lat" : 51.5099409,
"lng" : -0.0870841
},
"html_instructions" : "Prendre la direction \u003cb\u003enord-est\u003c/b\u003e sur \u003cb\u003eBorough High St/A3\u003c/b\u003e vers \u003cb\u003eBedale St\u003c/b\u003e\u003cdiv style=\"font-size:0.9em\"\u003eContinuer de suivre A3\u003c/div\u003e\u003cdiv style=\"font-size:0.9em\"\u003eEntrée dans une section à péage\u003c/div\u003e",
"polyline" : {
"points" : "ypjyHxpPCG_#o#QY_AkAE?C?CCQSEGEEMQEEACGGIGeAo#]OA?ECQGGC_#KgHeBqAc#a#Iq#WYG_AUi#OIACAYG"
},
"start_location" : {
"lat" : 51.5049264,
"lng" : -0.0898856
},
"travel_mode" : "DRIVING"
},
{
"distance" : {
"text" : "0,2 km",
"value" : 152
},
"duration" : {
"text" : "1 minute",
"value" : 25
},
"end_location" : {
"lat" : 51.50989,
"lng" : -0.0883307
},
"html_instructions" : "Prendre légèrement \u003cb\u003eà gauche\u003c/b\u003e sur \u003cb\u003eArthur St\u003c/b\u003e",
"maneuver" : "turn-slight-left",
"polyline" : {
"points" : "cpkyHf_PGB_#EK?A?I#GFEHAJAJ?Z?V#NBRBPDVBFDHDLDFFFFFJFXL"
},
"start_location" : {
"lat" : 51.5099409,
"lng" : -0.0870841
},
"travel_mode" : "DRIVING"
},
{
"distance" : {
"text" : "0,6 km",
"value" : 590
},
"duration" : {
"text" : "1 minute",
"value" : 72
},
"end_location" : {
"lat" : 51.50955829999999,
"lng" : -0.080139
},
"html_instructions" : "Prendre \u003cb\u003eà gauche\u003c/b\u003e sur \u003cb\u003eUpper Thames St/A3211\u003c/b\u003e\u003cdiv style=\"font-size:0.9em\"\u003eContinuer de suivre A3211\u003c/div\u003e",
"maneuver" : "turn-left",
"polyline" : {
"points" : "yokyH`gPZ}DFu#Dg#H}#Bk#P_CRsDJuAJiB\\qE#QF_ABiA?i#CUCc#Ce#CWCMAIG_#Ke#Oa#ACQi#Qm#"
},
"start_location" : {
"lat" : 51.50989,
"lng" : -0.0883307
},
"travel_mode" : "DRIVING"
},
{
"distance" : {
"text" : "0,5 km",
"value" : 498
},
"duration" : {
"text" : "1 minute",
"value" : 73
},
"end_location" : {
"lat" : 51.5093097,
"lng" : -0.0737046
},
"html_instructions" : "Continuer sur \u003cb\u003eByward St/A100\u003c/b\u003e\u003cdiv style=\"font-size:0.9em\"\u003eContinuer de suivre A100\u003c/div\u003e\u003cdiv style=\"font-size:0.9em\"\u003eSortie de section à péage dans 400 m, au niveau de Minories/A1211\u003c/div\u003e",
"polyline" : {
"points" : "wmkyHzsNG[CWCUAS?E?c#?I?M#u##I#_AFs#Jo#DYBM?G?C?C?K?QAs#A]AaACe#Ae#AQM{ASqAIc#CMa#{BEW?I?K?IBK#GHSHOHOJMHKLMRQVOPU"
},
"start_location" : {
"lat" : 51.50955829999999,
"lng" : -0.080139
},
"travel_mode" : "DRIVING"
},
{
"distance" : {
"text" : "0,5 km",
"value" : 472
},
"duration" : {
"text" : "1 minute",
"value" : 54
},
"end_location" : {
"lat" : 51.5090739,
"lng" : -0.06770899999999999
},
"html_instructions" : "Continuer sur \u003cb\u003eMinories/A1203\u003c/b\u003e\u003cdiv style=\"font-size:0.9em\"\u003eContinuer de suivre A1203\u003c/div\u003e",
"polyline" : {
"points" : "elkyHrkMXc#XYHAJORg#VgAT}#Ry#Nq#FWDOD]B]?W?WASAWM_B]gDEe#Gi#i#uCo#uC"
},
"start_location" : {
"lat" : 51.5093097,
"lng" : -0.0737046
},
"travel_mode" : "DRIVING"
},
{
"distance" : {
"text" : "0,3 km",
"value" : 297
},
"duration" : {
"text" : "1 minute",
"value" : 57
},
"end_location" : {
"lat" : 51.5065805,
"lng" : -0.0666981
},
"html_instructions" : "Prendre \u003cb\u003eà droite\u003c/b\u003e sur \u003cb\u003eVaughan Way\u003c/b\u003e",
"maneuver" : "turn-right",
"polyline" : {
"points" : "ujkyHdfL`Ak#VQZYZ_#JSJOJMFGJGJG#ALCHCPC~#?n#AL?`#?p#?\\F"
},
"start_location" : {
"lat" : 51.5090739,
"lng" : -0.06770899999999999
},
"travel_mode" : "DRIVING"
},
{
"distance" : {
"text" : "0,3 km",
"value" : 272
},
"duration" : {
"text" : "1 minute",
"value" : 41
},
"end_location" : {
"lat" : 51.5068938,
"lng" : -0.0629257
},
"html_instructions" : "Prendre \u003cb\u003eà gauche\u003c/b\u003e sur \u003cb\u003eKennet St\u003c/b\u003e",
"maneuver" : "turn-left",
"polyline" : {
"points" : "c{jyHz_LASASAKCMM]Uo#ESGSAOAQ?SAwAFkB#c#FuCKcBAa#"
},
"start_location" : {
"lat" : 51.5065805,
"lng" : -0.0666981
},
"travel_mode" : "DRIVING"
},
{
"distance" : {
"text" : "77 m",
"value" : 77
},
"duration" : {
"text" : "1 minute",
"value" : 28
},
"end_location" : {
"lat" : 51.5064421,
"lng" : -0.0627423
},
"html_instructions" : "Prendre \u003cb\u003eà droite\u003c/b\u003e sur \u003cb\u003eFowey Close\u003c/b\u003e\u003cdiv style=\"font-size:0.9em\"\u003eVotre destination se trouvera sur la droite\u003c/div\u003e",
"maneuver" : "turn-right",
"polyline" : {
"points" : "a}jyHhhKrAANABA#C#G?ECEMG"
},
"start_location" : {
"lat" : 51.5068938,
"lng" : -0.0629257
},
"travel_mode" : "DRIVING"
}
],
"via_waypoint" : []
}
],
"overview_polyline" : {
"points" : "ypjyHxpPc#w#qAeBI?UW_#e#IKoAw#w#[g#OgHeBqAc#sAa#yA]qA[GB_#EM?QHGT?nAFd#H^Xf#RNXLZ}DL}ALiB|#sN^cFJiCC_AGiAQoAo#uBYiAGm#AgADmC\\kC?[EeDEkAOmBcA_GEa#?UDSRc#T]VYj#a#j#y#XYHAJORg#l#eCb#kBLg#H{#?o#Ck#k#gGMoAi#uCo#uCxA}#v#y#Vc#RUVOj#M~CAp#?\\FCg#EYc#mAMg#Ca#AkBHoCFuCKcBAa#rAARCBKCKMG"
},
"summary" : "A3",
"warnings" : [],
"waypoint_order" : []
}
],
"status" : "OK"
};
I see there's some fields polyline with some weird data in it but I don't know what it represents. How can I display these?

Answer 1

That's a Google maps encoded polyline.
You can use this library to decode them at the appropriate resolution:
Polyline decoder (and encoder)
Basically they are an ascii encoded binary structure containing a set of polylines for multiple zoom levels.

Answer 2

You can actually use the Leaflet plugin: Leaflet.encoded . That'll put the Google Encoded Polyline on the Leaflet map.

Answer 3

The polyline data is encoded. I had this same issue creating a rubygem to do more or less the same thing. I came across a script written by a guy named George Lantz that decodes the string into points. I have it included as ruby in my gem here. You can probably figure out the logic in whatever language you prefer.
Ruby Script to Decode GMaps Polyline Data