Back

Directions Service

Note: This service requires your project to have an associated billing information.

Make sure to ENABLE this Directions API in your google map console dashboard.

Before you can use directions service, initialize it first by calling the InitDirectionsService method of the map object like this:

 map.InitDirectionsService()

Returns: None

Once the directions service is initialize, you can then call the ShowRoute method of the map object to query for routes and directions like this:

 map.ShowRoute(origin, destination, travelMode, callback)

origin Object
Required. The latLng literal coordinate of the origin or the DirectionsRequest object literal.
destination Object
Required. The latLng literal coordinate of the destination. This is required when the origin param you provide is a latLng object literal
travelMode String
Optional. Can be one of the following: 'BICYCLING', 'DRIVING', 'WALKING' or 'TRANSIT'. Default is 'WALKING'
callback String
Optional. A callback function where to return the result if you want to use the result.

Return. None

Show Route Example

app.LoadPlugin("MapView");

function OnStart() {
    lay = app.CreateLayout("Linear", "VCenter, FillXY");
        
        var apiKey = "AIzaSyD2eHntKEmh272p3ac6YjWPbPkwo3m2mck";
        
        map = app.CreateMapView(apiKey, 0.9, 0.65, 7.0689323, 125.6114588, 13);
        map.SetOnReady(MapOnReady);
        lay.AddChild(map);

    app.AddLayout(lay);
}
function MapOnReady() {
    map.InitDirectionsService();
    var orig = {lat: 7.0703842, lng: 125.6043722};
    var dest = {lat: 7.0711694, lng: 125.6083105};
    map.ShowRoute(orig, dest, "WALKING", "OnResult");
}
function OnResult(res) {
    app.ShowPopup(res);
}
Copy    Run   

Complete request

The origin parameter can be of two types, a latLng literal or a DirectionsRequest object literal. If you use the latLng literal object, destination param is required. Otherwise, if you used the DirectionsRequest object literal, which is the complete one, don't provide the destination and travelMode param anymore. Callback is always optional

You can find the complete documentation for the DirectionsRequest object literal here.

Complete DirectionsRequest object literal

{
    origin: LatLng | String | google.maps.Place,
    destination: LatLng | String | google.maps.Place,
    travelMode: TravelMode,
    transitOptions: TransitOptions,
    drivingOptions: DrivingOptions,
    unitSystem: UnitSystem,
    waypoints[]: DirectionsWaypoint,
    optimizeWaypoints: Boolean,
    provideRouteAlternatives: Boolean,
    avoidFerries: Boolean,
    avoidHighways: Boolean,
    avoidTolls: Boolean,
    region: String
}
Copy

Sample Directions Request

app.LoadPlugin("MapView");

function OnStart() {
    lay = app.CreateLayout("Linear", "VCenter, FillXY");
        
        var apiKey = "AIzaSyD2eHntKEmh272p3ac6YjWPbPkwo3m2mck";
        
        map = app.CreateMapView(apiKey, 0.9, 0.65, 7.0689323, 125.6114588, 13);
        map.SetOnReady(MapOnReady);
        lay.AddChild(map);

    app.AddLayout(lay);
}
function MapOnReady() {
    map.InitDirectionsService();
    
    var request = {
        origin: 'Chicago, IL',
        destination: 'Los Angeles, CA',
        waypoints: [
            {
                location: 'Joplin, MO',
                stopover: false
            },{
                location: 'Oklahoma City, OK',
                stopover: true
        }],
        provideRouteAlternatives: false,
        travelMode: 'DRIVING',
        drivingOptions: {
            departureTime: new Date(/* now, or future date */),
            trafficModel: 'pessimistic'
        },
        unitSystem: google.maps.UnitSystem.IMPERIAL
    }
    map.ShowRoute(orig, null, null, "OnResult");
}
function OnResult(res) {
    app.ShowPopup(res);
}
Copy    Run   

Additionally, you can hide the route on the map by calling the HideRoute method of the map object.

As for the moment, you can only create one route on a map. The moment you call ShowRoute for another destination, the route will be overidden.