google map static drawing "route" instead of straight line

Question

I succeeded in getting a google static map displaying a path between 2 coordinates.

The problem is that the drawn path is just a straight line between the 2 points.

I read that to be able to draw the "route" between 2 points on a static google map, as in, following the roads and city geography instead of the straight line, I need to add all the coordinates/crossroads for the path.

Does anyone knows an easy solution to solve this?

score 25 · Accepted Answer · edited Apr 21 '22 at 04:16

25

You can definitely do this with the Static Maps API:

get directions using DirectionsService:

https://developers.google.com/maps/documentation/javascript/reference/directions#DirectionsService

and convert the overview path to suit the requirements of the Static Maps API:

https://developers.google.com/maps/documentation/maps-static/start#Paths

edited Apr 21 '22 at 04:16

Alter Lagos

12,090
1
70
92

answered Oct 15 '10 at 06:05

Chris Broadfoot

5,082
1
29
37

1

To convert the overview path you can use the google.maps.geometry.encoding.encodePath() then use it directly with the static map API – Chuck Mah May 23 '12 at 15:37
1

is there a web api solution for PHP instead of javascript? – Tharindu Aug 28 '15 at 10:43
DirectionsService has a callback DirectionsResult which contains the encoded overview_polyline, that you can use in your Static Map "path" parameter like so without convertion: "&path=enc:" + response.routes[0].overview_polyline where response is the callback. – MartinG Apr 27 '20 at 16:28

score 0 · Answer 2 · answered Apr 04 '13 at 12:55

Using Polylines u can draw straight line.

The Polyline class defines a linear overlay of connected line segments on the map. A Polyline object consists of an array of LatLng locations, and creates a series of line segments that connect those locations in an ordered sequence.

u can see the example here

https://google-developers.appspot.com/maps/documentation/javascript/examples/polyline-simple

about polylines

https://developers.google.com/maps/documentation/javascript/overlays

I think this is not a static map example. – hswner Jun 15 '15 at 23:09 — hswner, Jun 15 '15 at 23:09

score 0 · Answer 3 · answered Oct 13 '10 at 09:50

0

I think you cannot use this functionnality with the staticmap api. However you can use Directions with the JavaScript API V3.

answered Oct 13 '10 at 09:50

MatTheCat

18,071
6
54
69

Thanks for your answer. Yeah get the directions and then generate the path, I knew you could do it that way, I just hoped someone already coded this process :) – Pierre Oct 13 '10 at 11:07
You absolutely can draw a route on a Static Map - as long as you got the "Encoded Polyline" from a previous API call (via the Directions API). Refer to the 'enc' parameter in the Static Maps API. – 1owk3y Nov 29 '17 at 05:52

score -1 · Answer 4 · edited Jun 06 '16 at 12:22

I dugged into many suggestions and codes and combined all to make a very simple solution, the code above should work for you:

NSURL *url = [NSURL URLWithString:[NSString stringWithFormat:@"https://maps.googleapis.com/maps/api/directions/json?origin=%f,%f&destination=%f,%f&sensor=false&mode=driving",[startLat floatValue] ,[startLong floatValue], [endLat floatValue], [endLong floatValue]]];

NSDictionary *PathInfo;//the json of the result

NSURLRequest *request = [NSURLRequest requestWithURL:url];
NSURLResponse *response = nil;
NSError *error = nil;
NSData *responseData =  [NSURLConnection sendSynchronousRequest:request returningResponse:&response error:&error];
if (!error) {
    PathInfo = [NSJSONSerialization JSONObjectWithData:responseData options:NSJSONReadingAllowFragments error:&error];
    GMSPath *path =[GMSPath PathInfo[@"routes"][0][@"overview_polyline"][@"points"]];
    GMSPolyline *singleLine = [GMSPolyline polylineWithPath:path];
    singleLine.strokeWidth = 3;
    singleLine.strokeColor = [UIColor redColor];
    singleLine.map = mapView_;
}

google map static drawing "route" instead of straight line

4 Answers4

Linked