Google Map Static Api with polyline not displaying on React Native

Question

I am trying to add an image of a map using the Google Maps Static API in React Native.

I am using the directions api to obtain the overview_polyline data and incorporating that into a url that is then signed using the google cloud digital signature before being passed in to the source prop ({ uri: (my url)}) of Image.

The image is not rendered on screen with no error messages.

I have tried using fetch() in a trycatch statement and the response I get is:

The Google Maps Platform server rejected your request. Unable to authenticate the request. Provided 'signature' is not valid for the provided API key, or the provided 'key' is not valid. The signature was checked against the URL: /maps/api/staticmap?&size=400x400&path=weight:3%257Ccolor:0x0352A0CC%257Cenc:(polyline)&key&mapID&signature.

However, when I use the exact same url in safari and chrome (with the same API key and signature) it renders the image.

I have tried:

• this solution
• this solution

both altered the url so it no longer worked in the browser.

Below is an example of a url I am using: https://maps.googleapis.com/maps/api/staticmap?&size=400x400&path=weight:3%7Ccolor:0x0352A0CC%7Cenc:s~xdIxe~GyBh]mFpG{AqGs@qFmKgVoVaNjPkcAzJ{sBzc@qqA|XaxAwFc_A{Ywm@u[mOgYgc@}UiuAgVgtBsDaMkG`D_BaZpCadFfKmxBxXgn@hq@m\\nb@pCta@vNncAhKd`AzSp|@xUpk@yVvt@q^`_AzAlw@pT`l@r`@rfDdjAtn@b[jj@jcAl[pg@tj@ne@nn@jIxbAkB~wAaq@zl@aLnf@Rnc@dI~m@aBnwCzFj}A~a@j}@|B~h@eIxp@hS|`@xHl[_Grr@_d@rWgXfOme@ti@e_Apz@y}@~aA}hBpyAmuBjf@wUjZeAbdAci@peAuWrn@yKxl@ii@tYaYr]qIl^jDp\fRti@daAt`@ve@n[bMjo@dx@dz@ldAts@`[`]tRlTf]tf@reAll@tMhnAiBfd@nB~a@}Irg@pExn@vk@bp@|VpcAyZrkAcg@|~@yWzs@pCxdCz{@vr@_HnmA}gAnqAydApt@a^z_AaQ|}@`BdlA`_@x`@lMze@Jlc@zDtZ`Pbq@bb@~qAtEv|A{Tdm@eW`h@us@hkA_}Dhm@ywA`fAipAjyC{qBleA_b@xx@bBl_AxO|}@e]~cAkk@f]gFzx@l@zcAee@pdAiVtbA`_@fo@xc@pc@|Qp~@|LxtBzBhhA`Cx`@uHfh@bC~j@bHtcAaGvaA_b@xvAq_A~uAo_@xiA_f@|pCc|@taAcNdsAqj@hsBiwBvoEg_Ene@sRnj@uI|f@mi@|g@e_AzlAkaDtl@}_CniAggIrhAqgEje@mtBzz@oaBfdCgiFfx@ktAju@}{@z}@gy@ty@cy@hf@yy@vg@m~@hi@mbAfjAq|Ctn@glAjdAw`Azv@k}AxfByvEn|AccG`r@utBdVkxA`j@ylD`_A_gFzb@yz@ju@cs@zaBwrAnm@qTf|@{H`s@ig@xe@{x@ng@_m@zw@gYvaAuMz{@uj@teAot@hs@qu@js@uPfa@}x@boAmoB|kBalBfyBwVj{Gqs@n{@vEnhAdTz_@tGh`@eDje@_c@bl@ybAlo@wi@pj@qN|{Cq~@h^cUbb@}Er{@nE~}@kd@b}@}tB`d@uk@ti@}OrXcgAph@c`BrVu~A_P{uBnA_u@f]so@z|@aa@xcAqbAnu@gt@po@qSb|@rPvZN~ZoMfO}U~Eya@gNug@sHkGtCwQzt@ax@db@aRbM}_@`QkTjc@weAje@mo@dIqHvFeEn@pGdMfDrO|AbHoDbHT|XlEjVab@~c@{l@xXcTnOsJvq@am@`LaFlDgu@{AiN}Z{`A]mCHf@&key=XXXXXXXX&map_id=XXXXXXXXXXXea10&signature=XXXXXXXXXX

Answer 1

Use encodeURIComponent()

I used this function on the overview_polyline value returned from the directions api to convert the polyline to be uri compatible.

const encodeParseRes = encodeURIComponent(parseRes.route)

        return (
            `https://maps.googleapis.com/maps/api/staticmap?&size=500x500&path=weight:6%7Ccolor:0x0352A0CC%7Cenc:${encodeParseRes}&key=XXXXXXXXXX&map_id=XXXXXXXXXX`
        )