Search code examples
google-mapsgoogle-maps-api-3google-maps-static-apigoogle-directions-api

Incorrect path using encoded polyline from Google Directions API in Static Maps

I'm trying to use an encoded polyline from Google's Direction API and display it in a Google Static Map image. When I use the encoded polyline in the Static Map the path is displayed incorrectly - it starts in the correct place, and has the correct general path, but is skewed from the expected results.

As an example, I've made a request for rail directions from Bern to Zurich Airport. The API returns the following encoded polyline:

}sp}Gmrkl@m@wIiAaB_BaA}IcCmLoFqG_DuFkAyN[mEiBqN}MqFsLqUoxAyG{`@qGqJwDkBeJMod@lScMzF{OfCwH[oGwAwI{EyOiTcS{e@mKkd@iGsi@wKem@iKg[aPg[_N_RiE{EoUaR{f@}X}d@sWo[mN}]_KqYcDePyCcQaGeUuM{PoO_SsWcLeTiSsi@{Ka[yRgb@sN{S}RaS_XkRiX{OiO{GgMiEoc@aDwq@{Eig@qHyhAeQ{n@_Nqj@uOqp@qTcZmNyZkUcRkSsIiL{Qq[qHuPuLk]wIe]mLqd@sLm\\kf@y`Ayk@eeAu`AazA}JgR{Qeb@yHsX}Gg\\uDyViEwn@wHup@w_@_sCyT_~AsVuwAkGaT}Qud@cZch@y{@{gB_OeTaPkQkf@ae@kQcQ}MwPoQu[{GgPkJiZiEoRaIgh@_Gm[oQyj@kPk\\iPkTi[cYuOyIqQsGcYuFm]gCug@g@cU{G}IaGeHcH}IsMyFaMsKi]eLw`@qKab@kIwe@eDkLyKwRiGsFoOuGcGkAuQm@uH_@{W}DmOkFcXiQ{WgTkLgL}I_KwJgGcHoBeGMaIjBuDhA_GRab@aEoKuCqFaEoIsQaG}NkDuL_@qR~BmNdR{b@zEaW~Cee@vEsv@vA}JfEeNvH{T|AcKXyN{AgQeDeNeHqWwYseAcX_eA}IwSqGiHsHeE{g@uQeJqFeF{H_EuLyWg|@wX{_AqIkc@_[klB_Q{iAgRegCkTsqCmK{sAgJgx@qAeZPeNtAsOpGoVhRe[|E}LlJob@`Mwj@vFoWvLsk@bBcPaAmX_ByRcJmgAsCa]yEaTuFqJsG{Foa@}P}JoIsJmQuKoRgFgLgCuJaTghAwI}`@cJsVgIsMgZ{XkH{KsGqRcD_XE_ZXwn@}`AylKyBeWEsLrAiTfB}LzS{w@|Mcj@fTez@tOmi@lLmb@dGkOhO{\\rE_FtJgPv[eh@~EeG`HoK|LmH~SuJjGqEbHuN|Eic@lGsu@bAyQYmP}B{o@iDqaAuAus@zCcYnEkTtMmu@|Jak@fUerAzC_SLyNpD_\\~DuXbJq`@zDySbDqJrM{o@bCcOjG}WnAsFv@kEdAyFeAxFw@jEc@`Bo@~BsCbNyBdLsAzHOzOaAlKaDhGiEzBoFOiDgCgD{HiEoPcG_HiVaLiF_CwIwFgFaBiOkFoQgIe[iNsJyF}DoFuGeOyHgXmGeHcLmJwZwXkb@k`@yMaLkHiDaKeB_Ly@}CVcEtAaE|CQJiMdHyJxCgWv@cSyDmIaIuBuE

Plotting this encoded polyline using the Google Maps API results in the correct path:

enter image description here

function initialize() {

    var map = new google.maps.Map(document.getElementById('map-canvas'), {
        center: {
            lat: 47.23,
            lng: 8.00
        },
        zoom: 09
    });

    var encoded_data = '}sp}Gmrkl@m@wIiAaB_BaA}IcCmLoFqG_DuFkAyN[mEiBqN}MqFsLqUoxAyG{`@qGqJwDkBeJMod@lScMzFcFvAwHn@wH[oGwAwI{EwFqGaHwKcS{e@mKkd@iGsi@wKem@iKg[aPg[_N_RiE{EoUaR{f@}X}d@sWo[mN}]_KqYcDePyCcQaGeUuM{PoO_SsWcLeTiSsi@{Ka[yRgb@sN{S}RaS_XkRiX{OiO{GgMiEoc@aDwq@{Eig@qHyhAeQ{n@_Nqj@uOqp@qTcZmNyZkUcRkSsIiL{Qq[qHuPuLk]wIe]mLqd@sLm\\kf@y`AiRm^oXwe@u`AazA}JgR{Qeb@yHsX}Gg\\uDyViEwn@wHup@w_@_sCyT_~AaKgo@qJmg@kGaT}Qud@cZch@y{@{gB_OeTaPkQkf@ae@kQcQ}MwPoQu[{GgPkJiZiEoRaIgh@_Gm[oQyj@kPk\\iPkTi[cYuOyIqQsGcYuFm]gCug@g@cU{G}IaGeHcH}IsMyFaMsKi]eLw`@qKab@kIwe@eDkLyKwRiGsFoOuGcGkAuQm@uH_@{W}DmOkFcJ}E_MkJ{WgTkLgL}I_KwJgGcHoBeGMaIjBuDhA_GRab@aEoKuCqFaEoIsQaG}NkDuL_@qR~BmNdR{b@zEaW~Cee@vEsv@vA}JfEeNpG_Q|A_HfAwOq@qQ{DeRgSou@eb@i|AyJc^aKcOeHyEm_@aNeOsFkDiCmEaGiIiV}e@__B}Kkc@{Q{fAg\\wpBkLqrAeWuiDyUuwCqGak@aA_SFeNjCwWhI_W`MaRjFgLbVueAdHa[fP}w@fAqT_BoVoHi}@{Hq{@yF}QyFaImH_FaQqGmQcJqH}IuWag@yFkQ{FyZcVcmAeJ_W{LcRqOaNgK{KeI{PeFoW}@eTp@qp@e@oRqHkr@gx@{|IwA_St@iSbAgNnGsXhRks@pNwk@bQsp@tVu|@zF}PhN}\\rDoH~BaCvDqEn]el@fP_VrDiFbDaCdXoMbIgErCcDpCaFdCqIpFil@vFsq@ViQ}@qS{Bop@uCkaA{@o[\\yV`N{t@~W{zAdVowAZeNvA_MbEmTxHeZb@}IpCwQbIe`@jMgp@tC_PvFkT~CgMdAaGeA`Gq@xDkAhEaBdHsBvIcE`SG|OsAlKaDlF{ErBgFg@}CoCaDcI{EcQ}F{FcHaDiNiGwGoDwGgEgOkEca@mQmVaLyFgEcIiOaG_QiDuLsBuCuJkIgWsT_m@uj@iPgNqSaEoKc@cBRgFpB_DdCqMjHyJxCsJv@aW_AcNsGuF}J';

    var decode = google.maps.geometry.encoding.decodePath(encoded_data);

    var line = new google.maps.Polyline({
        path: decode,
        strokeColor: '#red',
        strokeOpacity: 1.0,
        strokeWeight: 4,
        zIndex: 3
    });

    line.setMap(map);
}

initialize();
#map-canvas {
    height: 400px;
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&sensor=false"></script>
<div id="map-canvas"></div>

However, when the same encoded polyline is used in a Static Map the path starts in Bern and ends far north of Zurich. Here's the Static URL:

https://maps.googleapis.com/maps/api/staticmap?size=512x512&scale=2&maptype=terrain&style=feature:all&path=weight:3%7Ccolor:0xff0000ff%7Cgeodesic:true%7Cenc:}sp}Gmrkl@m@wIiAaB_BaA}IcCmLoFqG_DuFkAyN[mEiBqN}MqFsLqUoxAyG{@qGqJwDkBeJMod@lScMzFcFvAwHn@wH[oGwAwI{EwFqGaHwKcS{e@mKkd@iGsi@wKem@iKg[aPg[_N_RiE{EoUaR{f@}X}d@sWo[mN}]_KqYcDePyCcQaGeUuM{PoO_SsWcLeTiSsi@{Ka[yRgb@sN{S}RaS_XkRiX{OiO{GgMiEoc@aDwq@{Eig@qHyhAeQ{n@_Nqj@uOqp@qTcZmNyZkUcRkSsIiL{Qq[qHuPuLk]wIe]mLqd@sLm\\kf@yAiRm^oXwe@uAazA}JgR{Qeb@yHsX}Gg\\uDyViEwn@wHup@w_@_sCyT_~AaKgo@qJmg@kGaT}Qud@cZch@y{@{gB_OeTaPkQkf@ae@kQcQ}MwPoQu[{GgPkJiZiEoRaIgh@_Gm[oQyj@kPk\\iPkTi[cYuOyIqQsGcYuFm]gCug@g@cU{G}IaGeHcH}IsMyFaMsKi]eLw@qKab@kIwe@eDkLyKwRiGsFoOuGcGkAuQm@uH_@{W}DmOkFcJ}E_MkJ{WgTkLgL}I_KwJgGcHoBeGMaIjBuDhA_GRab@aEoKuCqFaEoIsQaG}NkDuL_@qR~BmNdR{b@zEaW~Cee@vEsv@vA}JfEeNpG_Q|A_HfAwOq@qQ{DeRgSou@eb@i|AyJc^aKcOeHyEm_@aNeOsFkDiCmEaGiIiV}e@__B}Kkc@{Q{fAg\wpBkLqrAeWuiDyUuwCqGak@aA_SFeNjCwWhI_WMaRjFgLbVueAdHa[fP}w@fAqT_BoVoHi}@{Hq{@yF}QyFaImH_FaQqGmQcJqH}IuWag@yFkQ{FyZcVcmAeJ_W{LcRqOaNgK{KeI{PeFoW}@eTp@qp@e@oRqHkr@gx@{|IwA_St@iSbAgNnGsXhRks@pNwk@bQsp@tVu|@zF}PhN}\\rDoH~BaCvDqEn]el@fP_VrDiFbDaCdXoMbIgErCcDpCaFdCqIpFil@vFsq@ViQ}@qS{Bop@uCkaA{@o[\\yVN{t@~W{zAdVowAZeNvA_MbEmTxHeZb@}IpCwQbIe@jMgp@tC_PvFkT~CgMdAaGeAGq@xDkAhEaBdHsBvIcE`SG|OsAlKaDlF{ErBgFg@}CoCaDcI{EcQ}F{FcHaDiNiGwGoDwGgEgOkEca@mQmVaLyFgEcIiOaG_QiDuLsBuCuJkIgWsT_m@uj@iPgNqSaEoKc@cBRgFpB_DdCqMjHyJxCsJv@aW_AcNsGuF}J

and resulting image:

enter image description here

I have tried setting the geodesic param to true and false but there seems to be no difference.

Can encoded polylines from Google Directions be used in Static Maps? And if so, what params are needed to correctly display them?

Solution

  • The encoded polyline that you use in your example contains \\ symbols, I understand Google Maps JavaScript API escapes the \ backslash symbols. Before passing an encoded polyline to Static Maps API you should replace escaped backslashes with simple backslashes.

    You request will be:

    <img src="https://maps.googleapis.com/maps/api/staticmap?size=512x512&scale=2&maptype=terrain&style=feature:all&path=weight:3%7Ccolor:0xff0000ff%7Cgeodesic:true%7Cenc:}sp}Gmrkl@m@wIiAaB_BaA}IcCmLoFqG_DuFkAyN[mEiBqN}MqFsLqUoxAyG{`@qGqJwDkBeJMod@lScMzFcFvAwHn@wH[oGwAwI{EwFqGaHwKcS{e@mKkd@iGsi@wKem@iKg[aPg[_N_RiE{EoUaR{f@}X}d@sWo[mN}]_KqYcDePyCcQaGeUuM{PoO_SsWcLeTiSsi@{Ka[yRgb@sN{S}RaS_XkRiX{OiO{GgMiEoc@aDwq@{Eig@qHyhAeQ{n@_Nqj@uOqp@qTcZmNyZkUcRkSsIiL{Qq[qHuPuLk]wIe]mLqd@sLm\kf@y`AiRm^oXwe@u`AazA}JgR{Qeb@yHsX}Gg\uDyViEwn@wHup@w_@_sCyT_~AaKgo@qJmg@kGaT}Qud@cZch@y{@{gB_OeTaPkQkf@ae@kQcQ}MwPoQu[{GgPkJiZiEoRaIgh@_Gm[oQyj@kPk\iPkTi[cYuOyIqQsGcYuFm]gCug@g@cU{G}IaGeHcH}IsMyFaMsKi]eLw`@qKab@kIwe@eDkLyKwRiGsFoOuGcGkAuQm@uH_@{W}DmOkFcJ}E_MkJ{WgTkLgL}I_KwJgGcHoBeGMaIjBuDhA_GRab@aEoKuCqFaEoIsQaG}NkDuL_@qR~BmNdR{b@zEaW~Cee@vEsv@vA}JfEeNpG_Q|A_HfAwOq@qQ{DeRgSou@eb@i|AyJc^aKcOeHyEm_@aNeOsFkDiCmEaGiIiV}e@__B}Kkc@{Q{fAg\wpBkLqrAeWuiDyUuwCqGak@aA_SFeNjCwWhI_W`MaRjFgLbVueAdHa[fP}w@fAqT_BoVoHi}@{Hq{@yF}QyFaImH_FaQqGmQcJqH}IuWag@yFkQ{FyZcVcmAeJ_W{LcRqOaNgK{KeI{PeFoW}@eTp@qp@e@oRqHkr@gx@{|IwA_St@iSbAgNnGsXhRks@pNwk@bQsp@tVu|@zF}PhN}\rDoH~BaCvDqEn]el@fP_VrDiFbDaCdXoMbIgErCcDpCaFdCqIpFil@vFsq@ViQ}@qS{Bop@uCkaA{@o[\yV`N{t@~W{zAdVowAZeNvA_MbEmTxHeZb@}IpCwQbIe`@jMgp@tC_PvFkT~CgMdAaGeA`Gq@xDkAhEaBdHsBvIcE`SG|OsAlKaDlF{ErBgFg@}CoCaDcI{EcQ}F{FcHaDiNiGwGoDwGgEgOkEca@mQmVaLyFgEcIiOaG_QiDuLsBuCuJkIgWsT_m@uj@iPgNqSaEoKc@cBRgFpB_DdCqMjHyJxCsJv@aW_AcNsGuF}J&key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU" title="test" />