Google maps encoded polyline is not coming on the map

Question

So I am using the Strava API which gives me an encoded polyline. I can decode this polyline to a normal polyline and then encode it again for Google. My map is coming on normally, but my route is not showing. Any idea of what is wrong? (I turned off the signature for now, just to test, but it's not working either way)

const polyline = require("@mapbox/polyline")
import { encode } from "@googlemaps/polyline-codec";

const enc_poly = "{hpuHuh{WhBLIpElSfB`G}MiD}DqKk@sJ_FwPaOsC_IuHkAgTsPuEqIiFgC{A\mEzIgUiKuDtJeFhBmGtJkBXRoGiMm[^iLyGoFh@iI{H_JkBaPiNai@ao@i]gXgDiRq@mOlCuJuB_Cqe@ea@oXqToTkDcH}@aJkCwGyTo^{Q_K}GqIoIiAmEzIyT|PqBdIwGiKuF~AkNyCyD`Ci\`Cp@fRgCdDeyA}cGeB{Mv@wUlb@obBt@iPsAePeZ}bA}q@ihBcnAevEyN_iA_DqIuDoD?sSoCeYsVlAmPrEoEeD}CiId@{GeBq@`N_eBcD_nCvAqBp@cM|Ea@xHkGrQyBh`@sW`OoTbk@e`@tN_FxPqT`XaTz\el@`Cyc@cMmu@~BgNqGghA}JoGoAgEj|Ci}Br_@iTwZa|@mTajA{HsVwBsYaWeaAtMiJYoNhEpBjRcJlj@}@oDeIkGi\eBav@bAwS{AiKkCeCcBmGGgm@kFeV?}Nr~@jQzk@aGvVyJxKgIlXpHjc@}Od[e`@hLeI`^_J`XqS`F]`@mCmDgJqAwQdDgFtDmNxP}XdIuWzQqU`Oqb@|A_Ki@wOgE}KBoE`CeBaI{wBiFvB~Ya]jBVdBeIbOiRzEeNbV}WlS_^nArChCFfEvHxOrg@pRaIlXqEjHkIjZdGpf@a_@zWq[rJqRlHyChJf`@~IzT`GnDnG~KnFiHrB~CnInB~DgC|]QbCyCpGpIbKb@xGdEhVpe@bCf]hEjWtOta@tPwOvCm[nEoG`DgLvIfAxQeFjJu@xDdChTyDrNuOtBaQnN}VxNy]dNsAtI`UfIvBSnLaFvMl@`HtXpp@`K~LdWvw@zr@leBnJlD~JmGnMBx_@rh@pHd\bg@n`@dNbPnJlRuD`HqBr_@eNla@qLlw@kNrYiAdGdFrk@nFzU}RlWmZhWkH{OcObDcAeH}DfAdGn^~@~j@Yzb@sCx[dLfh@{GvRqHvHi@lEbCbUnKh_@jGjq@iE`LaI|FoCdH}EbBrAvJ~IhQ`@pPdk@fnDxa@|fA|b@f_AlEKnMtkAvGzR|CdVpx@bcCfP`a@zGpeAMbX_Mji@iEmE}Ix@uGkBqSfKiTVsZhWoWt[aZ{KmAjLoF`Bh@xOsb@vc@gJt@uHtEyBrE~JdKoA`DaInAaN|LsE`\BnGhFhLjGbAvJrTdLfLqAjGd@vQkClF@rT{AlDv@nOcD~MLdUbBrOi@xM`ErBQfLsIHhI|^rRxV|Lps@rCxt@}LhXaH|hAzDzi@~Gnh@zBjG~KxJ}FnOiHr]Kr`@iGr^iDpJ}S|[fKl[jBthAg@|H{GxUcB|NL~J{RfDcFxPuJje@}C`ZsC~EgF|^y@f[uMff@iJx@_NkEiJxC_JW}MdLcVpHia@mCkViGwG`BiE{CeKNw@jHyI|@eIsCqAvWiOYeYhKw\iLcFjGkDbMsJvKoEgj@mMGmGcFmh@xCwNqE_ElHaUnTyS|k@kNtt@iOdMkM~SaH~BkD_By_@ig@y[pAqVu^aKjCmBwFAoIeDkLoQaXwDfIaBsDkHsDoMs@b@hF"
const array = polyline.decode(enc_poly)
const g_enc_poly = encode(array, 3)
console.log(g_enc_poly)

const api_key = "MY_API_KEY"

let url = `https://maps.googleapis.com/maps/api/staticmap?size=400x400&center=${array[0][0]},${array[0][1]}&zoom=13&path=weight:3%7Ccolor:orange%7Cenc:${g_enc_poly}&key=${api_key}`

const element = document.createElement("img")
element.src = url

const main = document.querySelector("main .container")
main.appendChild(element)

This is what I get:

The interactive polyline encoder utility, atleast shows something:

UPDATE So I saw it worked in the JS Fiddle, but I still get errors: I see it loads in, but then it just goes away

This is my code:

//APPEND THE CARD IMAGE
                        const initMap = function initMap() {
                            const map = new google.maps.Map(document.querySelector(`.route-card-${counter} .route`), {
                              zoom: 10,
                              center: { lat: 34.366, lng: -89.519 },
                            });

                            const polyline = route.map.summary_polyline
                            const enc_poly = polyline
                            const polyline2 = require("@mapbox/polyline")
                            const array = polyline2.decode(enc_poly)

                            const poly = new google.maps.Polyline({
                              strokeColor: "#000000",
                              strokeOpacity: 1,
                              strokeWeight: 3,
                              map: map,
                              path: google.maps.geometry.encoding.decodePath(enc_poly)
                            });
                            var bounds = new google.maps.LatLngBounds();
                            for (var i=0; i<poly.getPath().getLength(); i++) {
                              bounds.extend(poly.getPath().getAt(i));
                            }
                            map.addListener('zoom_changed', function() {
                              console.log("zoom="+map.getZoom())
                            });
                            map.addListener('center_changed', function() {
                              console.log("center="+map.getCenter())
                            });
                            map.fitBounds(bounds);

                            let url = `https://maps.googleapis.com/maps/api/staticmap?size=400x400&center=${array[0][0]},${array[0][1]}&zoom=10&key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&path=weight:4%7Ccolor:red%7Cenc:${polyline}`;
                            const element = document.createElement("img")
                            element.src = url
                            
                            const routeImage = document.querySelector(`.route-card-${counter} .route`)
                            routeImage.appendChild(element)
                            }
                            initMap()
                            counter++

UPDATE enter image description here [![enter image description here][6]][6]

This is the error:

js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&libraries=geometry&v=weekly:83 Google Maps JavaScript API error: RefererNotAllowedMapError https://developers.google.com/maps/documentation/javascript/error-messages#referer-not-allowed-map-error Your site URL to be authorized: http://localhost:1234/pages/dashboard/personal/