javascript - Show a route on a map

Question

How can i show the following result: http://maps.googleapis.com/maps/api/directions/json?origin=hadera&destination=haifa&sensor=false

on a map? i want to see the entire route!

please: no use of google's javascript API. just the Web Service

Answer 1

I assume you want to show the route on a Google Map, which is mandatory ;)

You can do this without using the JavaScript API, just use the Static Maps API with the path parameter containing the encoded polyline you'll find in the overview_polyline field of the route of your choice.

Example using the first route (that is, response.routes[0].overview_polyline.points) from your sample request:

"overview_polyline" : {
    "points" : "en_eEsoctEa@IuAvHzD~@hGrA~D~@i@vCgAlGa@|BqFp[kBOyBAgADk@Hw@JqBb@cIjAcC`@{Cr@iKrC_Bh@kDhAeCx@}Bn@}IpCcFtAq@Hs@D_A?yAEoAQi@OcA]kAg@}OoKmMqIkCgBoBgA}D{Bm@]ERiAxGoA`IYtAs@hCwAzDsB`EoDhGkDrGkBbDmBbD_CrC{@`AcAn@c@Pm@JUDa@?u@Cq@Mo@Um@c@cC}BmGgGgc@yd@qSmTsNiOwDoDqCmBkCuAcA]oC_AyCw@}Bc@_BO{BOwE@aDNiBRyARyBd@_K|Cag@bPsVdImDhAkBf@qCf@_AJqADeABcBCuAIqC_@kIqAuLaBgNmBuImAqFs@kL_BsEq@qEk@eGo@aFUqEIoOSiLI_DAgQQuDIiEa@u\iDwBOiGw@yB_@uCy@yPsEaIwBiL_D{Cu@sAUgDk@uCYgAIeBCoEAax@nAgC@qCGcBIeCWmKmAmOaBkH_AqCc@}Aa@{CaAaBs@}BiAwMyGoAk@kBcAqHqDcBs@kC}@_D_AwCu@_BUgC[eDSeFIs@A{BFs`AtA_HH}CAoCIwBMsH]sMm@iMm@wG]qDYiFm@eFw@iCg@{Cs@cFsAwI}BqJgC{C{@cKmCuLaDuXmHwT_GuCu@sBc@wGkAqB[kDa@gE]eDQeGO{CCmC@}CFmCHcG\yLx@wN`AcEXkETyDHiH@_DGgEO_F]sFi@oNuAgP_BwWgCsO{AuCa@eCe@eBa@wBm@uCaA}EwBwBiAaCyAsAaAyDcDoN_NmWqVgA_AiDeCwD_CyAy@wD_BeEyAsBk@kDs@uB]_CYyCU{AIyFOyCGyTW{SYiEEsJQ}ECyA@mDLyFVoCVyBZyCd@aDv@kDdAkA^gAh@qDrAsLtFmInDoBt@oAd@eATcG`AmCLo@Ds@?oCEeAG{lB_VaM{AyGs@aHYuISeB?gHMiLYyJe@gO{AwCUwGs@yf@_FaFc@u@KqI{@{Iy@wEa@{De@gO{AqC]mHk@gEOoPUoOQ_S[kKOmBIkBWs@Q}@[}@e@eAy@{AkBoAgBqDmHi@eAs@_Ae@e@sAaAcAm@_Ac@}@U_AM_BK}BM]@eCEyBJaALs@LsA\_Bv@{BlAiBhAyAx@{Ap@wCtAaFjC_CfAwBv@cB\kDt@_LnBwJbBmEb@gJp@M@{BLcD`@cDX}E`@_CLuBCcEWmKk@{Dg@cCYaEgAqCoAoBwAcCgC}EmGg@m@gDkEuE{FiBwBoBsCkAwB}@wBo@gCa@sCMqAMoD@uIBkDFuQ@qDBy@"
},

Resulting map:

Full request, requires URL-encoding the encoded polyline:

http://maps.googleapis.com/maps/api/staticmap?sensor=false&size=400x400&path=weight:3%7Ccolor:red%7Cenc:en_eEsoctEa%40IuAvHzD~%40hGrA~D~%40i%40vCgAlGa%40%7CBqFp%5BkBOyBAgADk%40Hw%40JqBb%40cIjAcC%60%40%7BCr%40iKrC_Bh%40kDhAeCx%40%7DBn%40%7DIpCcFtAq%40Hs%40D_A%3FyAEoAQi%40OcA%5DkAg%40%7DOoKmMqIkCgBoBgA%7DD%7BBm%40%5DERiAxGoA%60IYtAs%40hCwAzDsB%60EoDhGkDrGkBbDmBbD_CrC%7B%40%60AcAn%40c%40Pm%40JUDa%40%3Fu%40Cq%40Mo%40Um%40c%40cC%7DBmGgGgc%40yd%40qSmTsNiOwDoDqCmBkCuAcA%5DoC_AyCw%40%7DBc%40_BO%7BBOwE%40aDNiBRyARyBd%40_K%7CCag%40bPsVdImDhAkBf%40qCf%40_AJqADeABcBCuAIqC_%40kIqAuLaBgNmBuImAqFs%40kL_BsEq%40qEk%40eGo%40aFUqEIoOSiLI_DAgQQuDIiEa%40u%5CiDwBOiGw%40yB_%40uCy%40yPsEaIwBiL_D%7BCu%40sAUgDk%40uCYgAIeBCoEAax%40nAgC%40qCGcBIeCWmKmAmOaBkH_AqCc%40%7DAa%40%7BCaAaBs%40%7DBiAwMyGoAk%40kBcAqHqDcBs%40kC%7D%40_D_AwCu%40_BUgC%5BeDSeFIs%40A%7BBFs%60AtA_HH%7DCAoCIwBMsH%5DsMm%40iMm%40wG%5DqDYiFm%40eFw%40iCg%40%7BCs%40cFsAwI%7DBqJgC%7BC%7B%40cKmCuLaDuXmHwT_GuCu%40sBc%40wGkAqB%5BkDa%40gE%5DeDQeGO%7BCCmC%40%7DCFmCHcG%5CyLx%40wN%60AcEXkETyDHiH%40_DGgEO_F%5DsFi%40oNuAgP_BwWgCsO%7BAuCa%40eCe%40eBa%40wBm%40uCaA%7DEwBwBiAaCyAsAaAyDcDoN_NmWqVgA_AiDeCwD_CyAy%40wD_BeEyAsBk%40kDs%40uB%5D_CYyCU%7BAIyFOyCGyTW%7BSYiEEsJQ%7DECyA%40mDLyFVoCVyBZyCd%40aDv%40kDdAkA%5EgAh%40qDrAsLtFmInDoBt%40oAd%40eATcG%60AmCLo%40Ds%40%3FoCEeAG%7BlB_VaM%7BAyGs%40aHYuISeB%3FgHMiLYyJe%40gO%7BAwCUwGs%40yf%40_FaFc%40u%40KqI%7B%40%7BIy%40wEa%40%7BDe%40gO%7BAqC%5DmHk%40gEOoPUoOQ_S%5BkKOmBIkBWs%40Q%7D%40%5B%7D%40e%40eAy%40%7BAkBoAgBqDmHi%40eAs%40_Ae%40e%40sAaAcAm%40_Ac%40%7D%40U_AM_BK%7DBM%5D%40eCEyBJaALs%40LsA%5C_Bv%40%7BBlAiBhAyAx%40%7BAp%40wCtAaFjC_CfAwBv%40cB%5CkDt%40_LnBwJbBmEb%40gJp%40M%40%7BBLcD%60%40cDX%7DE%60%40_CLuBCcEWmKk%40%7BDg%40cCYaEgAqCoAoBwAcCgC%7DEmGg%40m%40gDkEuE%7BFiBwBoBsCkAwB%7D%40wBo%40gCa%40sCMqAMoD%40uIBkDFuQ%40qDBy%40