Google-maps – plotting a route on Google Maps

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?

Best Answer

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.

Related Topic