Show A Route On A Map

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 rou

Solution 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

Solution 2:

how about google's support for embedding? or how to add google maps to your website

the easiest way to use it is go to actual google maps and use the link button, then use the link in your site/whatever