CODEWITHSUNDEEP
rubygoogle-mapsgoogle-roads-api
aldrien.h
aldrien.h

Reputation: 3615

How to calculate distance using lists of coordinates with Google Maps Roads API

I'm generating static map with snapToRoads (since it accepts multiple waypoints).

Given I have lists of coordinates, how can I calculate distance between those coordinates and sum it to get total driving distance.

Or is there other better way to do it in ruby code ?

Sample snap-to-roads request:

waypoints = [arrays of coordinates]
snap_to_roads_url = "https://roads.googleapis.com/v1/snapToRoads?path=#{waypoints.join('|')}&interpolate=true&key=API_KEY"
snappedPoints = HTTParty.get(URI.encode(snap_to_roads_url))

# Store snapped polyline returned by the snap-to-road service
snappedPoints['snappedPoints'].each do |snap|
  snappedCoordinates << "#{snap['location']['latitude']},#{snap['location']['longitude']}"
  placeIdArray << snap['placeId']
end

Static Map request:

https://maps-api-ssl.google.com/maps/api/staticmap?&size=650x550&sensor=false&zoom=16&markers=size:small&maptype=roadmap&path=weight:3%7Ccolor:red%7C54.57424022982199,-1.2351261042386523|54.57423420000001,-1.2351275000000002|54.57423420000001,-1.2351275000000002 ...many more

And also any idea how can I include markers with the above request, given I have origin and destination coordinates.

Please help!

Upvotes: 0

Views: 1851

Answers (1)

syciphj
syciphj

Reputation: 996

I would suggest, for your use-case, that you instead use the Directions API Web Service. You can also put multiple waypoints (up to 23 per request) and its return will generate an encoded polyline of your path. It will also provide travel distance, travel time, etc.

Learn more about it here: https://developers.google.com/maps/documentation/directions/start

Snap To Roads need your coordinates to be very near each other to work properly and your static map url might get too lengthy after a few points. Some browsers may reach its url limit, and Static Maps has an 8192 character limit

Here's a sample request with the Directions Web Service (just include your own API key): https://maps.googleapis.com/maps/api/directions/json?origin=-37.59431782470163%2C144.91110764394534&destination=place_id%3AEipTeWRuZXkgUm9hZCwgU29tZXJ0b24sIFZpY3RvcmlhLCBBdXN0cmFsaWE&mode=driving&waypoints=place_id%3AEjJNaXRmb3JkIENyZXNjZW50LCBDcmFpZ2llYnVybiwgVmljdG9yaWEsIEF1c3RyYWxpYQ%7Cplace_id%3AEi5FZGluZ3RvbiBXYXksIENyYWlnaWVidXJuLCBWaWN0b3JpYSwgQXVzdHJhbGlh&key=YOUR_API_KEY

For a more visual representation you go to this (Include your API key to see JSON results)link

Then in its result, you can get an encoded polyline at its property: routes.overview_polyline. You can use that as your encoded polyline path like so: &path=geodesic:true%7Ccolor:0x0057E7ff%7Cenc:ENCODED_POLYLINE_HERE

Your markers' coordinates can be retrieved by getting each leg of the route. Start with routes[0].legs[0].start_location and end_location Use those coordinates for your markers.

For your total driving distance, every leg has a distance property with numerical values. Just add all the legs for your total distance and even time.

Your static map request will be similar to the attached code below. 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<img src="https://maps.googleapis.com/maps/api/staticmap?size=800x800
            &maptype=roadmap
  &key=AIzaSyCD0rWgXRVBa7PgaTWXVp_gU51pgHGviYY&markers=color:blue%7Clabel:A%7C-37.5943328,144.9110993&markers=color:blue%7Clabel:B%7C-37.60746779999999,144.9393146&markers=color:blue%7Clabel:C%7C-37.6118511,144.9329711&markers=color:blue%7Clabel:D%7C-37.6302591,144.9490315&path=geodesic:true%7Ccolor:0x0057E7ff%7Cenc:psmdFk}msZeApE~APxAJvK~@pCLdA@dD?fACbESlEYbAIlB[`Dg@bBYtJeCbEcAfDo@q@_D]cBM_AEg@Eu@@sAJyAVuArAoFRqAJ_A?o@CACECG@OFKBABCJu@NyBEeAq@kEaAsGI}@EwA^uG@[AACGAEBMBC@A?{@@M?o@QuAa@sAq@yASu@Ko@I}A?u@V}DLyBAQA[?SAAAG?OFKLAHFbAL|JdALBRHZ@P?H@@ABEBAFg@FKj@gJT}CTqAZeAVs@bC}EVk@Lc@NaAFaAAy@IkAUq@A?EAGK?O?AOg@U_@o@q@g@[e@Q[Ie@G_CS_ACgAH_D^KFSF?@A@A@C@EA?AYAGC[?u@Es@Ok@Sm@_@k@e@eBmBUY`CkClE}Eh@[\Gd@Ce@B]FWLQLmE|EaCjCTXdBlBj@d@l@^j@Rr@Nt@DZ?FEJAJA@A?ABAF@RAL@dEe@bAAfAFfBN^Hb@Lf@Vf@`@n@v@`@^F@BBDLALDb@AXHjA@x@G`AGh@VHl@Z`@\x@fAy@gAa@]m@[WIFi@FaAAy@IkAUq@A?EAGK?O?AOg@U_@o@q@g@[e@Q[Ie@G_CS_ACgAH_D^KFSF?@A@A@G@AA?AYAGC[?u@Es@Ok@Sm@_@k@e@eBmBe@q@a@s@w@gBg@cBEEKe@A?CC?A?I?AG{@KcAGoACwBGk@Ok@Qi@Ye@YWSSUKA@CAGE?Ec@I_@Ka@QmKkD_@Ec@Mc@]ICCCQGe@EKAiAHUDa@NOLGRU`BKb@Gf@?h@DH@LELGFIBKAIGAA?Ai@GOKi@O}@Y_@E]Mo@c@e@s@Se@Mi@E[?S?GRCzBW~A]vBu@tFqCtCyAzAi@lA[rC]hCOnIa@`[uApQ}AvL_A~D]nBMhBQdBKdSkBnUsBfb@aDzD]Bv@q@H"/> 


</body>
</html>

If you want things to be interactive though (similar to the Directions webapp I linked) then you'll need to use the [Google Maps Javascript API Directions Service] (https://developers.google.com/maps/documentation/javascript/directions).

Hope these help!

Here's some more about encoded polylines and markers with static map: https://developers.google.com/maps/documentation/static-maps/intro#Markers https://developers.google.com/maps/documentation/static-maps/intro#Paths

Upvotes: 1

Related Questions