How do I display the result of Google's computeRoute API?

71 Views Asked by At

I am using the computeRoute post method provided by Google's Routes API. The method returns a JSON file with the following data :

{
    "routes": [
        {
            "distanceMeters": 99537,
            "duration": "6977s",
            "polyline": {
                "encodedPolyline": "y`hbEqrfzEw@HYJUTS\\Qf@Kl@EHETQVQJe@FQJyDJuBNc@?{@JwAf@qAb@m@NkBZs@D_A@cBGm@Io@OqBw@i@UkMqEcD}@oB]kBMeDGaBDkEf@cJdBsC|@q@^qAfAaApAe@bAk@vAu@hCuCbPgF`XwB|L_CvLgFvZ[tAQfBkBpK{AtE}AtC}B~BmDzBoDrBs@d@{FdDsErCo@TuAT}A@sCOmLkC{DcAoCo@{E{@yD_@cBIuCAa@BSDsAJyB\\qA\\{CzAmAr@mAbAgBpBwA|Bc@x@y@tByAfF}B~IuAtGe@|CuA|FkAnF{BrJ{AlH}@rFwDbVm@~B_A`C_AjBkAjB_AfA_Ax@y@b@oAj@_ARgAJu@BYDoA@sJW}CDyGVoJn@qD\\_H~@}CRwCDqEGeB@wDPiF^_E\\_GZeABuAAqCSoB]sBi@qAg@i@WeCaB}AwAsLyLwKgL_FgEe@e@e@w@gBeBaBmAyAs@_AY}@QgBWwAEqAAaKTy@?cAGoC]wBk@}@_@kAu@}BaBcA{@m@s@m@{@_A_BaA{B{@aCwB_HaBuF{CmJ{EgPm@mBg@wAo@{AqAcCmBqCc@i@wBoBwCwBwJeGqPcJwBw@yA[iAK_AA}@BoANcB`@eBr@qAt@{@r@sEdFo@v@gAlBo@`Bc@|A[bBmAhK[tAs@|AgAvAe@`@q@d@{@`@mAb@}QvCiCXsHlAmEl@}Cn@eGdA{C^uCl@wAh@]PiAbASV{@pAc@dAo@dCM|@KfB?fADfAHv@b@fDTfCAlCM|A]|Ai@tA{@rA[`@yBxBkAdAu@t@aClCsAfBu@nAi@|AOj@Q`AMfAEbAApADvBR`Bb@|AZbAjN~YjBdEnErJ|@pBbEtIdOv[~CdH`ArBr@jCNjA@tAEl@UrA[x@O\\w@bAy@h@a@Ny@NqA@qCUcSkHcB_@wB_@iBSyBQwISsCKyAS{Ag@qDcBeA]q@OuAOcQDcHCmAFwAXwAZyDhAmAXsARyYbDqAH_D@wAGqC_@_OiDoG}AwCm@mHiBoCm@iEgAy@Mm@CkABw@Jw@Py@Xu@^uAlA_AjAaA`C]lBgBxOSbB]hBs@xBa@~@o@jAaAtAuApAk@j@mAt@o@ZuAf@_ATeBVu@HkBAiBKm@KwDcAwKeDkBc@qEg@mBCgBDkBPeC\\oBd@mD|A{Ax@{AfAmDrCaBjAy@`@u@Xm@Py@LyBHeAEsASuGyAgNqDeQaEu@W[OoAw@{@y@i@m@kAmBo@}AwDuNi@mAm@y@m@o@cAo@eAa@wAS_A?cAJw@Tc@Rm@`@wCvCk@r@gFfFqMdM}@t@u@\\}@X[F}@Du@Aw@O}@Y{@i@iAeAwK_LmAuAkAiBa@y@o@aB_BkFgBgFgAuBmA}AkB{Bm@iAe@qA_@gBS{BAcA@i@h@aJ?uAMcBOw@W{@o@uA[g@g@k@eA{@_Aa@cAW}@K{MaAgFc@oJo@eFc@mB_@mA_@gCeA}ByA}BoBuBiCiBuCqMyTyAqBgAiAk@_@{@c@aAa@kB_@oAG{@BiAH{AT_Gp@kDVgACeASk@Mu@a@YQq@o@w@iAWi@k@mB{AyGeA_EeDcNiAcFKmACeABoAdBmRPaBF{@?}AAk@KcBU{AOu@]s@yAsBq@q@eAy@aCkAkA[gDe@{JuA_B_@sAc@oBaAwBoA}AoAoAiACSaBiCkAwBm@m@WIs@EmIToJnC}AX_GHwAHeB\\g@N{Al@wAv@oChBwEbDaB`A{B`AeDbA{A\\aBTcW|AeALwHjBqFlAeBl@aDbBiA`@cAVoQpDs@F{AEeEo@q@EwAHeARyAf@mBn@a@JqAH_BA}@M}@WgAe@oIuEeB}@aDzFqBAmAGc@Ky@]_B{@{CgAcDyAmA_@[?S[}AcB{@q@m@WqAUi@CgBJk@Hq@T_@TiEdDa@Zo@t@kAzAc@`@QLs@?aBWcCo@iAMiACcADP~B@lBGhCCn@SfBe@tCc@zAcApCq@lAmAfBqAvAqBbBwA`AoAl@WR}Bl@gC^oMpA}@PgAj@_AhAw@xAW~@Kn@CzANbBvB~P`@hDJjAAtCINo@vFk@`BMTOJc@n@s@z@oEzEAP_E`E]f@Wl@Or@MpAAxAVvPF`GG~AKl@Up@i@fA]`@u@n@mCnAoPtH}Ax@qBzAyAzAkB|B}@zA_Utd@_@x@Ut@YfBMlC?tARpBvBzJRlAJnBRjMHtANbAb@vAlCrGVt@Rz@Nx@NrADjAA|AIvBUbDC~A@|AFhAH|@\\xBVlAn@tBx@hBzAxC`BvC~AxCLZdB|CjB~CdA~Ap@nA`@bAPj@Lt@tAhNj@hGpAhMHhA@`AIzAQjAg@~AcBdEk@`BcApCSt@EX?bADf@Tv@NZRZVTXP~Ar@j@^`@j@n@jAVh@Nb@Hb@Vd@V\\r@j@XRt@Zv@JzFIj@Jl@Tp@h@f@n@Pf@Rt@jAzHjAzGR|AL~AF|A?nBiA`\\g@lNMhCOtAWfA]~@k@bA[`@y@t@e@Xs@ZkAXgDReGR_FTgAPiA^cAr@s@r@uAlBqAlBgApA}@r@}@f@wAh@kEv@eC\\_Fx@oLnBkAZg@TgAp@g@b@cEpEqOxP]h@m@jAKd@Kn@Cv@BbDFhBBtCUfGi@~HOxASfA[x@g@v@k@n@}@l@qCjA_Bz@m@^yAzAeC~Ca@\\c@Vg@P_ALmAFiCD@RHNTBN?F|IEd@[lAGb@UfD@l@Hh@HTH|AAr@OrAEp@U~@o@vAg@|@Wv@OjA@Zj@vBf@`Bv@nDjAxCVx@Df@Cj@ZZdCdBbBn@rB`@VJ\\t@vA~H`@tCxAbHb@lB`@|Bn@nB`@~BBbB[rDiApDUGmFaDIQCgCIc@IS[]i@_@SIFd@EXGP]TWLuEzAm@b@k@f@u@\\]kB_@C]OUWSCC]GUCEiChAYgAGOiC\\mDNU?e@KuBkA_@GO@g@XgBbA]@e@CK@eBq@[WSWc@aAcAmD}@oDQ_AUoB[qAiAkDSg@Y]SG_@AcAX_A`@}@n@w@x@c@r@Sv@YzAm@vB[r@u@`AkAhAi@Ny@b@g@d@m@`Ae@p@_AdAyBrB]d@wAlCc@Ge@?SJYd@aA~B]f@k@b@eBd@SBI`@_@dAYd@UXa@R_@DQA_A}@kAa@WAcBT]Ae@ImAYU@k@Xq@f@Q\\K|@Ux@QlA?d@Fj@SCg@Q_@_@Ue@i@eBUYa@UUI{@m@[g@c@u@OMUI]AYJWT[n@S|@OhA[dAYn@YXs@f@i@X}@\\_BPeCNwBBgEe@i@Qy@e@}@k@s@Yo@EyBDeAM]GqJOwAHoCb@oGb@sA?_BUqAYc@O[Q[YY_@{BqDs@wAcC_G_@u@YYmCsB[a@g@eAqAgEkDeI}@gBq@}@{B_Cw@s@e@g@}@iAqCcFq@yAg@}@u@oBeAaDc@cA{@}AwAwBsG}H}@kAeAcB]w@e@{A]cBSuBCkADgDNiET_H?qACm@SyAYcAUi@g@{@{@}@w@k@gHoEcCgA_E{AcEqAeA_@qAq@}@u@mAqA}AyB]m@mFmHw@qAg@iBOuACiBD}@HaAhFiT~CiNNaAFs@BsAI{AQoAY{@Wi@]m@kIaKuB{BkC_CyD_D}OoNiAy@qAk@gEsAeAg@cBuAqFgFmCuCgFeGmFoGu@gAUy@YwCIaB?g@JsDN}D?uAGgAQ}@_@aAU]i@k@eAm@mLoEaCoAiGiDuHgE}@a@_Ck@kAGmBLoM~A{ACkOaEgAc@_Ak@oCgCeAi@aJaDuCcAiAq@m@i@u@u@PeAv@mKh@wGZ{ELmEAwAMkBUyAa@sAsBiGgLe[aE_LSq@Q_AIk@Ae@F{AToBzDgVPoAD_A?cASuFSyBS_AeA}Dk@uCIi@_@gDc@yF?q@@q@Hq@jAuFRu@Ri@dAgBrB_Cd@o@`@u@J]LaAF_D@}APiGAeAKwAeC_PIw@?oABe@Hc@Vw@Vo@bCyDvBeDpI_O`AoBVw@BMBk@A_@Eg@Uw@u@gBmAgCUo@YqAkBsQEo@CiBZ}F`@aHDiAAeAOuAg@iCqB{Hg@wBO{@MqA?m@Fw@|@aDhDiK`AeDLw@D_@?e@Cs@{@mGsBaNeAwGSmAMe@s@eA[[w@c@mQuGw@Qa@Eq@?g@JeAd@}HlEiCpAw@XuARwAAg@E_@Qk@]oB}AwCmCiEiEaDqCwB_BkEyDuEsDkCeCoBuB}A_CqEaHmAkBwCqD}BiC_EiEm@m@y@mAa@y@_DmFuDyFOg@k@sC}@yDiAoGQw@c@mAwDeGcA}Ae@i@QIg@KaAIq@Km@WeBcCmAwAw@cAk@kAGa@Gq@@[B]b@oBt@cEcAuDc@wAmLsc@s@{BqJmWqIoVsIaVcFyNgWws@_DgIg@gBMeAAq@Jo@La@dBaBvG{F|GcGVGZId@?\\FXPX\\Nb@Dr@Gd@Q`@[\\[N]Bk@@o_@sKuA]qEs@kIqBskAu\\eHsBcBa@kAUcL}Aui@kGuBc@aBg@_Bo@qXyMkHgDuEeBc[aKsCcAkBw@eG_DaYuOy\\qRoBuA_RqNwAcA{BiBmDmCkIgGmPaMkAaAyAyAI_@A_@HYxDiIPAPYQXQ@MX"
            }
        }
    ]
}

The "encodedPolyline" object can be decoded and displayed on a map using Google's interactive polyline decoder utility. I want to display this polyline that shows up when using the decoder utility on my map which is in a vue js project. How would I go about displaying, or decoding the polyline on my map? I looked around, and I didn't find an API for the decode utility. Here is my current vuejs component, just in case:

<template>
  <div>
    <GMapMap
      :center="center"
      :zoom="13"
      map-type-id="terrain"
      style="width: 100%; height: 100%; position: absolute"
      
    >
    </GMapMap>
  </div>
</template>
  
  <script>
export default {
  data() {
    return {
      center: { lat: 31.950695, lng: 35.923022 },
    }
  }
}
</script>

I looked up solutions, and I asked GPT, and checked youtube. I did not have any success finding what I was searching for, and it is not a foreign concept so I just figured I did not know what I was looking for, so I would ask about it on stack overflow so actual people read it and understood what I was looking for. I also tried some Discord communities but I didnt get any responses there.

TL;DR: I want to display a polyline that has many many points on a map. I have an encoded polyline and there is a tool by Google that decodes it, but I don't know how to use the tool in my project.

0

There are 0 best solutions below