CODEWITHSUNDEEP
google-maps
Skizit
Skizit

Reputation: 44852

plotting a route on Google Maps

How would I use Google Maps API to plot a route? E.g to have a bunch of way points loaded onto the map (I currently have this) and draw a line from each of them showing the user a route they could take to see all of them? How would I then load this up when the user see's the map?

Upvotes: 24

Views: 66821

Answers (3)

user2288580
user2288580

Reputation: 2268

I've done this on Android. Google has a service for this here is the link https://developers.google.com/maps/documentation/roads/intro

You'll find an example API call on this page here. Plus some web instructions. https://developers.google.com/maps/documentation/roads/snap

This is an example web call to the service. https://roads.googleapis.com/v1/snapToRoads?path=-35.27801,149.12958|-35.28032,149.12907|-35.28099,149.12929|-35.28144,149.12984|-35.28194,149.13003|-35.28282,149.12956|-35.28302,149.12881|-35.28473,149.12836&interpolate=true&key=YOUR_API_KEY

If memory serves, I believe you can have up to 100 points per call and you get charged by each call regardless of the amount of points.

This above call can also be configured to snap to roads.

As far as drawing the routs when the map loads, this depends on what technologies you are using. I know that it's easy to in .NET WinForms

If you post a comment on your question; letting me know what technologies you are using I may be able to give you some further advice.

If you want to test your routes for free, I found a nifty little web site: https://www.darrinward.com/lat-long/

Hope this helps.

Upvotes: 1

RedBlueThing
RedBlueThing

Reputation: 42522

You can set the waypoints property on a DirectionsService object and it will plot the route from the source to the destination via all the points in your array:

Array of intermediate waypoints. Directions will be calculated from the origin to the destination by way of each waypoint in this array.

Once you have set the waypoints property, you call the route method to calculate the directions:

route(request:DirectionsRequest, callback:function(DirectionsResult, DirectionsStatus)))

Once you have your DirectionsResult, you can use the DirectionsRenderer object to render the results on a Google Map.

Update with working example

The following code makes a direction request between hardcoded start and end points via an array of three waypoints:

// three points through which the directions pass
var point1 = new google.maps.LatLng(-33.8975098545041,151.09962701797485);
var point2 = new google.maps.LatLng(-33.8584421519279,151.0693073272705);
var point3 = new google.maps.LatLng(-33.84525521656404,151.0421848297119);

// build an array of the points
var wps = [{ location: point1 }, { location: point2 }, {location: point3}];

// set the origin and destination
var org = new google.maps.LatLng ( -33.89192157947345,151.13604068756104);
var dest = new google.maps.LatLng ( -33.69727974097957,150.29047966003418);

var request = {
        origin: org,
        destination: dest,
        waypoints: wps,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
        };

You can find a working example of this code here (source).

N.B. Keep in mind you can only use up to eight waypoints in your array, unless you switch to a business account.

Upvotes: 29

rgubby
rgubby

Reputation: 1311

You could use a static map, then loop through your points and plot the points using the path param.

Something like:

&path=color:blue|weight:5|45.123,-123.595|46.456,-124.985

Upvotes: 1

Related Questions