Menu
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?
590
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.
88
You can actually use the Leaflet plugin: Leaflet.encoded . That'll put the Google Encoded Polyline on the Leaflet map.
33
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
20
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
