I recently added the departure-time to the API-Call in the get distance pipe. While doing that I discovered that google is actually providing directions in the API Response. I have usescases for that, so I tried to retrieve the directions into a RTF. Since the directions are an array of individual steps, I set the Pipe Response of the getDistance Pipe to this:
routes.0.legs.0.steps
I then use the response to store it in a text field. The only Datatype that actually worked for this was JSON. so the response is configured as JSON.
[
{
"distance": {
"text": "1 m",
"value": 0
},
"duration": {
"text": "1 min",
"value": 0
},
"end_location": {
"lat": 50.0988649,
"lng": 8.517688399999999
},
"html_instructions": "Head <b>south<\/b> toward <b>Pfaffenwiese<\/b><div style=\"font-size:0.9em\">Restricted usage road<\/div>",
"polyline": {
"points": "{|wpHqr~r@"
},
"start_location": {
"lat": 50.0988649,
"lng": 8.517687
},
"travel_mode": "DRIVING"
},
{
"distance": {
"text": "0.2 km",
"value": 175
},
"duration": {
"text": "1 min",
"value": 54
},
"end_location": {
"lat": 50.0972911,
"lng": 8.5177839
},
"html_instructions": "Turn <b>right<\/b> toward <b>Pfaffenwiese<\/b><div style=\"font-size:0.9em\">Restricted usage road<\/div>",
"maneuver": "turn-right",
"polyline": {
"points": "{|wpHqr~r@zBCXAz@Ex@Cl@A"
},
"start_location": {
"lat": 50.0988649,
"lng": 8.517688399999999
},
"travel_mode": "DRIVING"
},
{
"distance": {
"text": "1.4 km",
"value": 1437
},
"duration": {
"text": "3 mins",
"value": 186
},
"end_location": {
"lat": 50.0969685,
"lng": 8.4977092
},
"html_instructions": "Turn <b>right<\/b> onto <b>Pfaffenwiese<\/b>",
"maneuver": "turn-right",
"polyline": {
"points": "aswpHcs~r@@|@FhG@h@@lB@DHzA?B`@tHH`B@P@rACbBGvBExCGfDE`CItGCzAA^ClACfA@z@?t@@r@@nADrDF|J@dA@~@DpD?F@~B@J@fCDzC@vA@p@"
},
"start_location": {
"lat": 50.0972911,
"lng": 8.5177839
},
"travel_mode": "DRIVING"
},
{
"distance": {
"text": "0.4 km",
"value": 365
},
"duration": {
"text": "1 min",
"value": 55
},
"end_location": {
"lat": 50.0944497,
"lng": 8.4944334
},
"html_instructions": "Turn <b>left<\/b> onto <b>Kolberger Weg<\/b>",
"maneuver": "turn-left",
"polyline": {
"points": "aqwpHuuzr@V^Zb@v@fAZb@lBnCh@r@hCpDJNf@t@Xb@"
},
"start_location": {
"lat": 50.0969685,
"lng": 8.4977092
},
"travel_mode": "DRIVING"
},
{
"distance": {
"text": "0.4 km",
"value": 418
},
"duration": {
"text": "1 min",
"value": 56
},
"end_location": {
"lat": 50.0968242,
"lng": 8.4899679
},
"html_instructions": "Turn <b>right<\/b> onto <b>Alt-Zeilsheim<\/b>",
"maneuver": "turn-right",
"polyline": {
"points": "iawpHeazr@Q~@?DKd@Kn@IZGRQj@IPoAlCA@[r@_@~@_@p@MRc@x@iArBAB_@j@o@`AEF"
},
"start_location": {
"lat": 50.0944497,
"lng": 8.4944334
},
"travel_mode": "DRIVING"
},
{
"distance": {
"text": "0.5 km",
"value": 471
},
"duration": {
"text": "1 min",
"value": 76
},
"end_location": {
"lat": 50.0963721,
"lng": 8.4834749
},
"html_instructions": "Turn <b>left<\/b> onto <b>Hofheimer Str.<\/b>",
"maneuver": "turn-left",
"polyline": {
"points": "cpwpHieyr@\bDRtBT~BHz@BZHpABbA?H@TAtA?z@AL?LAFADAPAV?`A?j@AR?P?P?b@?f@?P?P@Z?H?hA"
},
"start_location": {
"lat": 50.0968242,
"lng": 8.4899679
},
"travel_mode": "DRIVING"
},
{
"distance": {
"text": "9.8 km",
"value": 9820
},
"duration": {
"text": "6 mins",
"value": 352
},
"end_location": {
"lat": 50.0557268,
"lng": 8.3926971
},
"html_instructions": "Turn <b>right<\/b> to merge onto <b>A66<\/b> toward <b>Wiesbaden<\/b>\/<wbr\/><b>F-Sindlingen<\/b>\/<wbr\/><b>Flughafen Frankfurt<\/b>\/<wbr\/><b>Industriepark H\u00f6chst<\/b>",
"maneuver": "ramp-right",
"polyline": {
"points": "imwpHu|wr@GF?@CLADADCDCFIN_@@KAC?GAIAICAACAECCEEGCECGCGAIAEAIAIAK?G?E?G@G?G@GBMBI@EBCBGDGBCBEBCBAHEB?DAD?D?B?D@FBBB@?NIJHHHZRTNNJZPXNf@VVHFBh@PVHZFd@JZD\\DL@TBL?b@DTA^?V?@?^C^A^ETCLA\\IZE`@K^I|@WvCu@~@W`@MbBc@fBe@~Bo@lA[bIuB~Ae@lA[t@S\\K^K\\K^IVGLCn@ONE^I^GTGJARCHA`@CZAh@CX?`@?^@V@F@^B^F`@FPD@?HBLBHBB?^L^L^N`@RXLHFPJ^T\\VXT^ZZZVVBBX^X\\`@h@Zd@Zf@Zd@Zf@zAbCv@lAj@|@jBlCbB`C|@pAf@p@d@p@|BdDt@fAhA|AhA`BHJHJNRHLV\\@Bp@`An@~@@Br@`Aj@v@`@l@b@n@V^z@pAhAdBn@bAh@x@T^Xd@f@|@p@jAhApBn@hAJRh@|@PXh@dAjAzB@@t@zAJRl@lAh@fATf@Xl@HNFNNXP^@DTb@Vh@d@dABDVf@R`@Vf@tApClAbCVj@f@`A`@x@BB~@pBh@hAh@jAj@jAlAhCp@tAFJ@DLVHPLVf@dAd@~@R^NXFLfAxBVf@@@j@`AbAhBNVJN@DJNZf@T`@l@bAFLJNZf@l@~@X`@h@x@^j@Xd@j@|@f@v@JLLRXd@d@r@~@zAhAdBl@`Ax@nA?@Zd@f@z@b@r@l@fAj@~@Vb@NXB@R\\DHNRxBlDXb@l@bANXT^Xj@f@hA^`AJVTp@FTTv@Jb@Jd@Jb@Nl@Lr@Hb@F`@BPLz@Fj@@D?DHr@BX@ZDd@FhA@PD`A@Z@\\@t@?b@?Z?r@?v@Cv@Ax@Ep@K~BCf@KrBE~@A^Cn@Ct@Cn@An@Ad@C`A?`@AxAAl@?pA?h@?n@?nB?`B?R?dA?zAAlD?zC?f@?h@?f@ApC?b@?j@?`@?N?p@AfC?vDAZ?`@?xA?p@?p@?|@?N?D?bC?vD?tA?n@Av@?\\?l@?b@?dD?fA?jB?tB?~CAv@?x@?`@?T?`@?v@?nB?v@?fDAv@?T?pB?~@?V?`@?lA?LAh@?v@?H?l@?h@?L?v@AfC?fE?nBAh@?tB?~F?\\?TAnB?fG?xA?`@AfDAdB?Z?fBAfC?j@?nA?rA?V?xDA|A?f@?N?B?l@?hA?|A?R?vBAfB?pA?tA?F?R?Z?Z?@AtB?R?rCAd@?^?\\?b@Ab@AtA?z@?f@?lAAlE?v@?JA|EAl@"
},
"start_location": {
"lat": 50.0963721,
"lng": 8.4834749
},
"travel_mode": "DRIVING"
},
{
"distance": {
"text": "11.3 km",
"value": 11308
},
"duration": {
"text": "7 mins",
"value": 421
},
"end_location": {
"lat": 50.1454941,
"lng": 8.3259663
},
"html_instructions": "Take the exit onto <b>A3<\/b>",
"maneuver": "ramp-right",
"polyline": {
"points": "ioopHkefr@I\\?R?^Ad@A`@?NAJ?LCRANCNCRERAFI\\IZGPCLA@ELCLGPCHADCHCJEPCFGPI\\CHGPK\\a@xAUz@IVQl@IXCHK\\Sr@Qp@M`@K^ENCHGVITELGRGLEHQZKLGJQTOP[X?@IRuBbBw@r@eA|@?@I\\i@`@o@f@o@h@UP}AlAgJhHy@p@{@p@iA`A}@p@GFQLA@eAz@w@n@e@\\{CbC_@Z?@uCzBUTa@\\[XQNe@`@[\\WTk@j@GFm@p@]^s@x@KJQP_@f@_@d@[b@_@d@_@h@WZEDYb@]f@SXGF}@nAMP_ArAILe@l@a@l@KLc@n@SVKNi@v@A?_ApAQV[b@}EzGg@r@g@r@U\\[`@W`@_@f@CDQTs@`AkAbBo@z@mA`Bq@bAc@l@y@dA{@fAw@`Ak@l@[`@KF[ZSTUTa@`@k@h@o@l@OLMJo@h@a@\\[Ta@ZOLo@b@KHA@EBGDi@^KFQLGDMJOLg@\\{@j@IFUNYRy@h@c@ZOJa@Xg@Z[Tw@h@cAp@eAt@A?_@X_An@o@b@]VWP]T{@j@_@VWRa@VA@]Vc@X]Ta@X_@Va@V[VaAn@_@V_@XA@[Ri@^w@f@eBfAa@VaBbAWNIFSJKFa@Ta@Ta@TQLKDA@yAv@_@Rg@XqAl@A@q@ZQHk@XSJOFc@PQHyAp@]NQHOHQHc@RgBx@k@VQH[NE@QHA@u@\\m@X[NA@_@PGB[N_@P_@PaAb@a@RgBv@_Ab@eD|AOFGBIDa@Rs@\\cCfAsB`Aa@Pk@VA@mBx@SH]PWJa@RQH_@PKDYLa@R_@N_@PULYLUJIDQHUJ[N}@b@_Ab@c@R[LULYLSHKDWLYNi@T_@Pe@Vw@\\k@Ve@Rc@Pm@Xa@PWNMF]Na@RWLk@Va@Ps@Zg@Ta@ROHQH[P}@^[NWLYL]N]No@XSL[LULYJg@Vg@Tk@Va@R_@PMFSHs@ZOH_@Pk@Xq@ZYL[Ne@To@X_@P_@Nm@X[Le@Tc@R_@Pa@Pe@Ra@NMFMDSH[HkA^A?a@LQDi@Lg@Ni@Jk@LYDG@M@[Dg@Ha@FM@KBG@M@UB[Dc@DUBU@g@Bi@BU?S@Q?U@a@@[B_@B]@Y@_@B[Bc@@e@Bw@Do@@]@e@BaADc@Da@B[@Y@_@@W?_AFqAFuAHc@DU@O@WBWBg@D]DMBOBYBYDe@JC?]F]Hi@Jg@La@Ja@Hi@N_@HOFA?IBC@a@JYJa@Pe@Nk@PA?C@QFWHYNUJUJ]PULQJSJKF_@PeAj@OHWLMHYPw@d@k@\\k@\\YT[Pk@^o@b@k@^_@V]Ti@\\g@Z]RULWLYPQNWNOJQJMHQJSLYNWNMH_@Va@VUL[R[Re@X]RUN]Tm@^g@Zk@^g@XIFMH[Rg@Zc@V[PSLWP_@Vg@XYPIFMH_@Tc@Vi@\\SLMHWN[RSLe@Xw@b@_@VWNYPa@Va@Vm@^a@Xc@TWNULe@Zm@`@qAx@y@d@]PWPa@Vi@^]VSJSLSNQLk@h@i@f@[Ze@f@MNMNONON]`@g@l@[`@o@t@w@|@]^WXc@h@cAjAw@x@k@t@QT"
},
"start_location": {
"lat": 50.0557268,
"lng": 8.3926971
},
"travel_mode": "DRIVING"
},
{
"distance": {
"text": "0.2 km",
"value": 246
},
"duration": {
"text": "1 min",
"value": 31
},
"end_location": {
"lat": 50.145298,
"lng": 8.3274624
},
"html_instructions": "Take exit <b>46-Wiesbaden\/<wbr\/>Niedernhausen<\/b> toward <b>Wiesbaden<\/b>\/<wbr\/><b>Niedernhausen<\/b>\/<wbr\/><b>K\u00f6nigstein<\/b>\/<wbr\/><b>Eppstein<\/b>\/<wbr\/><b>B455<\/b>",
"maneuver": "ramp-right",
"polyline": {
"points": "i`aqHidyq@EACAC?C@C@CBMLGHIHA@OHG@G@E?GAIAECEECCACACAEAEAKAG@E?G?A@I@MBKDKBGBEJORWt@}@RUZa@DIDIDKBM@K"
},
"start_location": {
"lat": 50.1454941,
"lng": 8.3259663
},
"travel_mode": "DRIVING"
},
{
"distance": {
"text": "18 m",
"value": 18
},
"duration": {
"text": "1 min",
"value": 6
},
"end_location": {
"lat": 50.1452851,
"lng": 8.327717999999999
},
"html_instructions": "Slight <b>left<\/b> onto the ramp to <b>L3028<\/b>",
"maneuver": "ramp-left",
"polyline": {
"points": "c_aqHsmyq@@K?g@"
},
"start_location": {
"lat": 50.145298,
"lng": 8.3274624
},
"travel_mode": "DRIVING"
},
{
"distance": {
"text": "0.3 km",
"value": 298
},
"duration": {
"text": "1 min",
"value": 32
},
"end_location": {
"lat": 50.1478817,
"lng": 8.3273717
},
"html_instructions": "Turn <b>left<\/b> onto <b>L3028<\/b>",
"maneuver": "turn-left",
"polyline": {
"points": "a_aqHgoyq@@OKAcABC?w@BC?A@A@CB[BYBC@UBa@F[De@HG@I@E?a@HWDc@FAAC?A?C?M@k@D"
},
"start_location": {
"lat": 50.1452851,
"lng": 8.327717999999999
},
"travel_mode": "DRIVING"
},
{
"distance": {
"text": "81 m",
"value": 81
},
"duration": {
"text": "1 min",
"value": 19
},
"end_location": {
"lat": 50.1480709,
"lng": 8.3281267
},
"html_instructions": "Turn <b>right<\/b> onto <b>Zum Grauen Stein<\/b>",
"maneuver": "turn-right",
"polyline": {
"points": "goaqHamyq@QAGAICGECEGKEU?CBURgA"
},
"start_location": {
"lat": 50.1478817,
"lng": 8.3273717
},
"travel_mode": "DRIVING"
},
{
"distance": {
"text": "46 m",
"value": 46
},
"duration": {
"text": "1 min",
"value": 10
},
"end_location": {
"lat": 50.1478535,
"lng": 8.3286736
},
"html_instructions": "Continue straight",
"maneuver": "straight",
"polyline": {
"points": "mpaqHyqyq@j@kB"
},
"start_location": {
"lat": 50.1480709,
"lng": 8.3281267
},
"travel_mode": "DRIVING"
},
{
"distance": {
"text": "26 m",
"value": 26
},
"duration": {
"text": "1 min",
"value": 10
},
"end_location": {
"lat": 50.1476414,
"lng": 8.328519199999999
},
"html_instructions": "Turn <b>right<\/b><div style=\"font-size:0.9em\">Destination will be on the left<\/div>",
"maneuver": "turn-right",
"polyline": {
"points": "aoaqHeuyq@h@\\"
},
"start_location": {
"lat": 50.1478535,
"lng": 8.3286736
},
"travel_mode": "DRIVING"
}
]
I then added a new serverside JS Pipe and built this script to extract the HTML instructions from the JSON and concat them into an RTF with a linebreak after each step:
(function() {
// Assuming {directions_json} is a JSON string.
const dataString = '{directions_json}';
// Parse the JSON.
const jsonData = JSON.parse(dataString);
// Check that jsonData is an array of steps.
if (!Array.isArray(jsonData) || jsonData.length === 0) {
return "No route data available";
}
// Initialize an array to hold the instructions.
let allInstructions = [];
// Loop over each step in the array.
for (const step of jsonData) {
// Escape < and > in html_instructions.
const escapedInstruction = step.html_instructions
.replace(/</g, '<')
.replace(/>/g, '>');
allInstructions.push(escapedInstruction);
}
// Join all instructions with a line break.
const directions = allInstructions.join('<br>');
return directions;
})();
It works with simplified test data but with the actual data it doesn’t.
I either get a 413-Payload too large or this:
{
"error": "Invalid or unexpected token"
}
Any other ideas???