0

AngularJS Google Maps Directions

Angular Google Maps is a set of directives that integrate Google Maps in an AngularJS application. It makes using Google Maps in such an application very easy as you don’t need to know the Google Maps API in order to use it.

Directions Service

Overview

You can calculate directions (using a variety of methods of transportation) by using the DirectionsService object. This object communicates with the Google Maps API Directions Service which receives direction requests and returns computed results. You may either handle these directions results yourself or use the DirectionsRenderer object to render these results.

When specifying the origin or destination in a directions request, you can specify a query string (for example, “Chicago, IL” or “Darwin, NSW, Australia”), a LatLng value, or a google.maps.Place object.

The Directions service can return multi-part directions using a series of waypoints. Directions are displayed as a polyline drawing the route on a map, or additionally as a series of textual description within a <div> element (for example, “Turn right onto the Williamsburg Bridge ramp”).

Directions Requests

Accessing the Directions service is asynchronous, since the Google Maps API needs to make a call to an external server. For that reason, you need to pass a callback method to execute upon completion of the request. This callback method should process the result(s). Note that the Directions service may return more than one possible itinerary as an array of separate routes[].

To use directions in the Google Maps JavaScript API, create an object of type DirectionsService and call DirectionsService.route() to initiate a request to the Directions service, passing it a DirectionsRequest object literal containing the input terms and a callback method to execute upon receipt of the response.

These fields are explained below:

  • origin (required) specifies the start location from which to calculate directions. This value may be specified as a String (for example, “Chicago, IL”), as a LatLng value or as a google.maps.Place object. If you use a google.maps.Place object, you can specify a place ID, a query string or a LatLng location. You can retrieve place IDs from the Geocoding, Place Search and Place Autocomplete services in the Google Maps JavaScript API. For an example using place IDs from Place Autocomplete, see Place Autocomplete and Directions.
  • destination (required) specifies the end location to which to calculate directions. The options are the same as for the origin field described above.
  • travelMode (required) specifies what mode of transport to use when calculating directions. Valid values are specified in Travel Modes below.
  • transitOptions (optional) specifies values that apply only to requests where travelMode is TRANSIT. Valid values are described in Transit Options, below.
  • drivingOptions (optional) specifies values that apply only to requests where travelMode is DRIVING. Valid values are described in Driving Options, below.
  • unitSystem (optional) specifies what unit system to use when displaying results. Valid values are specified in Unit Systems below.
  • waypoints[] (optional) specifies an array of DirectionsWaypoints. Waypoints alter a route by routing it through the specified location(s). A waypoint is specified as an object literal with fields shown below:
    • location specifies the location of the waypoint, as a LatLng, as a google.maps.Place object or as a String which will be geocoded.
    • stopover is a boolean which indicates that the waypoint is a stop on the route, which has the effect of splitting the route into two routes.

    (For more information on waypoints, see Using Waypoints in Routes below.)

  • optimizeWaypoints (optional) specifies that the route using the supplied waypoints may be optimized by rearranging the waypoints in a more efficient order. If true, the Directions service will return the reordered waypoints in a waypoint_order field.(For more information, see Using Waypoints in Routes below.)
  • provideRouteAlternatives (optional) when set to true specifies that the Directions service may provide more than one route alternative in the response. Note that providing route alternatives may increase the response time from the server.
  • avoidHighways (optional) when set to true indicates that the calculated route(s) should avoid major highways, if possible.
  • avoidTolls (optional) when set to true indicates that the calculated route(s) should avoid toll roads, if possible.
  • region (optional) specifies the region code, specified as a ccTLD (“top-level domain”) two-character value. (For more information see Region Biasing below.)

Travel Modes

When you calculate directions, you need to specify which transportation mode to use. The following travel modes are currently supported:

  • DRIVING (Default) indicates standard driving directions using the road network.
  • BICYCLING requests bicycling directions via bicycle paths & preferred streets.
  • TRANSIT requests directions via public transit routes.
  • WALKING requests walking directions via pedestrian paths & sidewalks.

Consult the Google Maps coverage data to determine to what extent a country supports directions. If you request directions for a region in which that direction type is not available, the response will return the DirectionsStatus=”ZERO_RESULTS“.

Transit Options

The available options for a directions request vary between travel modes. When requesting transit directions, the avoidHighways, avoidTolls, waypoints[] and optimizeWaypoints options will be ignored. You can specify transit specific routing options through the TransitOptions object literal.

These fields are explained below:

  • arrivalTime (optional) specifies the desired time of arrival as a Date object. If arrival time is specified, departure time is ignored.
  • departureTime (optional) specifies the desired time of departure as a Date object. The departureTime will be ignored if arrivalTime is specified. Defaults to now (that is, the current time) if no value is specified for either departureTime or arrivalTime.
  • modes[] (optional) is an array containing one or more TransitMode object literals. This field may only be included if the request includes an API key. Each TransitMode specifies a preferred mode of transit. The following values are permitted:
    • BUS indicates that the calculated route should prefer travel by bus.
    • RAIL indicates that the calculated route should prefer travel by train, tram, light rail, and subway.
    • SUBWAY indicates that the calculated route should prefer travel by subway.
    • TRAIN indicates that the calculated route should prefer travel by train.
    • TRAM indicates that the calculated route should prefer travel by tram and light rail.
  • routingPreference (optional) specifies preferences for transit routes. Using this option, you can bias the options returned, rather than accepting the default best route chosen by the API. This field may only be specified if the request includes an API key. The following values are permitted:
    • FEWER_TRANSFERS indicates that the calculated route should prefer a limited number of transfers.
    • LESS_WALKING indicates that the calculated route should prefer limited amounts of walking.

Driving Options

You can specify routing options for driving directions through the DrivingOptions object. You must supply a Google Maps APIs Premium Plan client ID when loading the API if you want to include a drivingOptions field in the DirectionsRequest.

These fields are explained below:

  • departureTime (required for the drivingOptions object literal to be valid) specifies the desired time of departure as a Date object. The value must be set to the current time or some time in the future. It cannot be in the past. (The API converts all dates to UTC to ensure consistent handling across time zones.) For Google Maps APIs Premium Plan customers, if you include the departureTime in the request, the API returns the best route given the expected traffic conditions at the time, and includes the predicted time in traffic (duration_in_traffic) in the response. If you don’t specify a departure time (that is, if the request does not include drivingOptions), the returned route is a generally good route without taking traffic conditions into account.
  • trafficModel (optional) specifies the assumptions to use when calculating time in traffic. This setting affects the value returned in the duration_in_traffic field in the response, which contains the predicted time in traffic based on historical averages. Defaults to bestguess. The following values are permitted:
    • bestguess (default) indicates that the returned duration_in_traffic should be the best estimate of travel time given what is known about both historical traffic conditions and live traffic. Live traffic becomes more important the closer the departureTime is to now..
    • pessimistic indicates that the returned duration_in_traffic should be longer than the actual travel time on most days, though occasional days with particularly bad traffic conditions may exceed this value.
    • optimistic indicates that the returned duration_in_traffic should be shorter than the actual travel time on most days, though occasional days with particularly good traffic conditions may be faster than this value.

Displaying the DirectionsResult

The DirectionsResult contains the result of the directions query, which you may either handle yourself, or pass to a DirectionsRenderer object, which can automatically handle displaying the result on a map.

To display a DirectionsResult using a DirectionsRenderer, you simply need to do the following:

  1. Create a DirectionsRenderer object.
  2. Call setMap() on the renderer to bind it to the passed map.
  3. Call setDirections() on the renderer, passing it the DirectionsResult as noted above. Because the renderer is an MVCObject, it will automatically detect any changes to its properties and update the map when its associated directions have changed.

Vehicle Type

The VehicleType object exposes the following properties:

ValueDefinition
VehicleType.RAILRail.
VehicleType.METRO_RAILLight rail transit.
VehicleType.SUBWAYUnderground light rail.
VehicleType.TRAMAbove ground light rail.
VehicleType.MONORAILMonorail.
VehicleType.HEAVY_RAILHeavy rail.
VehicleType.COMMUTER_TRAINCommuter rail.
VehicleType.HIGH_SPEED_TRAINHigh speed train.
VehicleType.BUSBus.
VehicleType.INTERCITY_BUSIntercity bus.
VehicleType.TROLLEYBUSTrolleybus.
VehicleType.SHARE_TAXIShare taxi is a kind of bus with the ability to drop off and pick up passengers anywhere on its route.
VehicleType.FERRYFerry.
VehicleType.CABLE_CARA vehicle that operates on a cable, usually on the ground. Aerial cable cars may be of the type VehicleType.GONDOLA_LIFT.
VehicleType.GONDOLA_LIFTAn aerial cable car.
VehicleType.FUNICULARA vehicle that is pulled up a steep incline by a cable. A Funicular typically consists of two cars, with each car acting as a counterweight for the other.
VehicleType.OTHERAll other vehicles will return this type.

Prakash S

Prakash S

I would like to introduce myself as a Software professional opting for the career in software industry. I'm Prakash S, a MCA graduate and trained as industry level practice for Software technology. Basically I am a PHP Developer but now days exploring more in HTML5, CSS, AngularJS and jQuery libraries.