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
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
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
Related
Using react-leaflet, I want to get the location address information from coordinates.
I found a working example of a similar behavior: here
However it seems it doesn't work with my version of react-leaflet. Also I don't even need it to work with onClick events, just get the address on page load so i can populate a form field.
Any push in the right direction would be most helpful.
You are looking after a reverse geocoding service. You can start by looking into Nominatim it is free and it is what they use in the example. However remember to read the usage policy, it is not meant for heavy use. If you know that you will make a lot i requests each second you should look for a paid alternative.
Would recommend to build your own service that can take coordinates and pass that to the api, relaying on a package. e.g.
I have a graphql query hook that I pass latLng that I get from leaflet -> pass it through my backend -> Nominatim.
const { data, fetching, error } = useReverseGeo(latLng);
I'm making a web app. I integrate GMap to know my client position. When I use it with manual number, the code is working. But when I use JSON data, the code is not working. The browser always run and my page can't right click.
This is my code.
You should parseInt('value') per lat and lng after separated them from json data
I have a link to a Map/Place. The urls look like https://www.google.com/maps/d/viewer?mid=18y_Gahydj0rBHluofKO0wxHLBLI&ll=51.16842583802143%2C-0.8371334530562535&z=17 so I'm guessing the place ID is Gahydj0rBHluofKO0wxHLBLI
View the link here
That link has a route on it. I'm trying to display that route on a map using the javascript maps api but I'm struggling to get it working.
Not sure how the route is stored and how I should be accessing it?
I tried OSRM online demo [1] and Front End source codes [2]
http://map.project-osrm.org/
https://github.com/Project-OSRM/osrm-frontend
There we can set start and set location on text boxes. In order to set route markers between start and end we need to click on the path and drag to required point on the map.
Is there anyway to set these intermediate points dynamically using JavaScript?
Of course OSRM implements an API that can be called via JS and returns JSON routes:
https://github.com/Project-OSRM/osrm-backend/wiki/Server-api
You need to repect the API usage policy and other legal aspects.
I'm trying to make a map with Google Map API and MarkerClusterer. It's works perfect with a simple JSON file (like this http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/examples/simple_example.html).
But I would use Fusion Tables (simple to edit/add/del markers): http://www.google.com/drive/apps.html#fusiontables.
Is it possible ?
Of course you can. You may request FusionTable-data via the FusionTables-API. This may be done on serverside, but also via AJAX(the API supports JSONP). Once you got the data the workflow will be similar to the JSON-example in your question.
working example