Fetching directions

The directions component can be used to fetch directions between locations. This is a convenience wrapper for DirectionsService. The component fetches the service from the addon’s googleMapsApi service and makes a request. The resulting directions are yielded as directions.

You must provide at least 3 of the DirectionsRequest options: origin, destination, and travelMode.

<GMap
  @lat={{this.london.lat}}
  @lng={{this.london.lng}}
  @zoom={{12}} as |map|>

  <map.directions
    @origin="Covent Garden"
    @destination="Clerkenwell"
    @travelMode="WALKING" as |d|>

    {{!-- Check out the DirectionsResult object --}}
    {{log d.directions}}

  </map.directions>
</GMap>

For convenience, you can provide an onDirectionsChanged action, which will be called when the directions are updated. This is a custom event provided by the addon, similar to the native event on the DirectionsRenderer.

Adding waypoints

The directions component yields a simple waypoint component that accepts a location and an optional stopover attribute. You also provide the waypoints as an option to directions.

<GMap
  @lat={{this.london.lat}}
  @lng={{this.london.lng}}
  @zoom={{12}} as |map|>

  <map.directions
    @origin="Covent Garden"
    @destination="Clerkenwell"
    @travelMode="WALKING" as |directions|>

    <directions.waypoint @location="Holborn Station" />

  </map.directions>
</GMap>

Displaying routes

You may have noticed that the the directions component doesn’t actually display the route on the map. This is deliberate. The results returned by the DirectionsService are complex and you may not want to display the first route by default.

To actually display routes, the directions component yields a route component, which uses the DirectionsRenderer under the hood to display directions results.

<GMap
  @lat={{this.london.lat}}
  @lng={{this.london.lng}}
  @zoom={{12}} as |map|>

  <map.directions
    @origin="Covent Garden"
    @destination="Clerkenwell"
    @travelMode="WALKING" as |directions|>

    <directions.route @polylineOptions={{g-map/hash strokeColor="green"}} />

  </map.directions>
</GMap>

Complex routing

Let’s recreate one of the more complex examples from Complex directions example. We want to walk from Covent Garden to Clerkenwell. We’re going to fetch the route and display markers along the route for each step of the route. Each marker has an infoWindow attached to it that displays the instructions for the specific step. You know what? Let’s also add a waypoint to pass by Leather Lane and grab some coffee!

<GMap
  @lat={{this.london.lat}}
  @lng={{this.london.lng}}
  @zoom={{12}} as |map|>

  {{!-- Fetch the directions --}}
  <map.directions
    @origin="Covent Garden"
    @destination="Clerkenwell"
    @travelMode="WALKING" as |directions|>

    {{!-- Display the route returned by the directions query --}}
    <directions.route
      @draggable={{true}}
      @polylineOptions={{g-map/hash
        strokeColor="green"
        strokeWeight=8
        strokeOpacity=0.7}} as |route|>

      {{!-- Add a waypoint to make sure we grab our coffee --}}
      <d.waypoint @location="Leather Lane" />

      {{!-- Use a custom helper to process the directions --}}
      {{#each (get-route-steps route.directions) as |step|}}
        {{!-- Display a marker for each step of the route --}}
        <map.marker
          @position={{step.start_location}}
          @onClick={{toggle "showInstructions" step}} as |marker|>

          {{!-- Add an infoWindow with directions for good measure --}}
          <marker.infoWindow
            @content={{step.instructions}}
            @isOpen={{step.showInstructions}} />

        </map.marker>
      {{/each}}

    </directions.route>
  </map.directions>
</GMap>

If you’re doing complex routing like in the example above, you might find that manipulating the directions object in Handlebars can be a bit of a pain. In this case, I would suggest creating your own helpers. Here we’ve defined a get-route-steps helper that extracts the route steps.

import { helper } from '@ember/component/helper';

export function getRouteSteps([directions]) {
  try {
    return directions.routes[0].legs[0].steps;
  }
  catch(error) {
    return [];
  }
}

export default helper(getRouteSteps);