0

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:

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

hodgln
  • 36
  • 3
  • 1
    How are you signing your request? Did you follow these [steps](https://developers.google.com/maps/documentation/maps-static/get-api-key#signing-requests)? I used the Maps Static URL you are using and signed my request using these steps and I can see the map properly in react-native(I just use the sample code here: https://reactnative.dev/docs/image#examples). But I experienced the image not rendered without error message when I purposely deleted some characters in my uri making the request invalid and running the invalid request in the browser returns the same error you get. – Pagemag Nov 15 '21 at 01:08
  • @pagemag I signed the request using the node.js code supplied in that link. Turns out the signature was fine, it was to do with the polyline not being uri encoded. – hodgln Nov 15 '21 at 19:20

1 Answers1

0

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`
        )
hodgln
  • 36
  • 3