Directions

The Module

📦 @bespunky/angular-google-maps/directions
🧩 GoogleMapsDirectionsModule

Live demos

The directions module allows you to both calculate and render directions on your map (see original docs).

Getting Started

The fastest way to add directions to your map is using the <bs-google-maps-directions> directive:

Origin-Destination Directions

<bs-google-map *bsSafe ...>
    <bs-google-maps-directions [from]="'Jerusalem'" [to]="Tel Aviv"></bs-google-maps-directions>
</bs-google-map>

Trail Directions

<bs-google-map *bsSafe ...>
    <bs-google-maps-directions [through]="['Jerusalem', [31.998041, 34.731823], 'Tel Aviv']"></bs-google-maps-directions>
</bs-google-map>

The first item will be considered as origin, last one as destination and everything in between will be considered a waypoint.

❕ Note that any change to the provided places will trigger a new directions request to Google's servers.

💡 To use the directive import GoogleMapsDirectionsModule.

💡 Make sure you Enabled Directions API on Google Cloud and read the original docs on Limits and Restrictions for Waypoints.

Flexible Types

Just like with geometry types and overlays, the directions module defines flexible types for places and waypoints.

In essence, it allows you to provide almost any type of data you can think of as a waypoint (even your overlays) and do something cool like the following:

<bs-google-map *bsSafe ...>
    <bs-google-maps-marker  [position]="someCoord" #marker="marker"></bs-google-maps-marker>
    <bs-google-maps-polygon [path]="somePath"      #polygon="polygon"></bs-google-maps-polygon>

    <bs-google-maps-directions [through]="[marker, polygon, 'Jerusalem', [31.9, 34.7], { lat: 31.99, lng: 35 }, 'Tel Aviv']"></bs-google-maps-directions>
</bs-google-map>

Note that for BoundsLike places, the coordinate will be calculated as the center of the shape.

Places

Places are expressed using the DirectionsPlace type and can be specified as:

• Any of the supported native types (e.g. string | LatLng | LatLngLiteral | Place).
• Anything that fits with BoundsLike (see Interchangeability).
• Anything that fits with DirectionsWaypoint.

Waypoints

Waypoints are expressed using the DirectionsWaypoint type and can be specified as:

• Anything that fits with the google.maps.DirectionsWaypoint interface.
• Anything that fits with the google.maps.DirectionsWaypoint and has a BoundsLike (see Interchangeability) assigned to the location property.

Advances Directions Requests

You can further customize your direction requests by binding the [config] property and providing a google.maps.DirectionsRequest object.

Any origin, destination or waypoints properties you provide within the config object will be ignored as they are set by the directive.

Advanced Directions Rendering

You can further customize renderization of the directions by binding the [options] property and providing a google.maps.DirectionsRendererOptions object. To set individual options, use the quick option properties (e.g. draggable, hideRouteList, etc.).

Inside The Module

The module is comprised of 3 players:

If you're not planning on rendering the directions on the map, or you have your own mechanism for rendering them, it is preferred that you inject GoogleMapsDirectionsService and use it directly without importing GoogleMapsDirectionsModule. This will allow the compiler to tree-shake the module.

See Also