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.

{{#g-map lat=london.lat lng=london.lng zoom=12 as |g|}}
  {{#g.directions
    origin="Covent Garden"
    destination="Clerkenwell"
    travelMode="WALKING" as |d|}}
    {{!-- Check out the DirectionsResult object --}}
    {{log d.directions}}
  {{/g.directions}}
{{/g-map}}

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.

{{#g-map lat=london.lat lng=london.lng zoom=12 as |g|}}
  {{#g.directions
    origin="Covent Garden"
    destination="Clerkenwell"
    travelMode="WALKING" as |d|}}
    {{d.waypoint location="Holborn Station"}}
  {{/g.directions}}
{{/g-map}}
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.

{{#g-map lat=london.lat lng=london.lng zoom=12 as |g|}}
  {{#g.directions
    origin="Covent Garden"
    destination="Clerkenwell"
    travelMode="WALKING" as |d|}}
    {{d.route polylineOptions=(hash strokeColor="green")}}
  {{/g.directions}}
{{/g-map}}
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 from the Department of Coffee and Social Affairs!

{{#g-map lat=london.lat lng=london.lng zoom=12 as |g|}}
  {{!-- Fetch the directions --}}
  {{#g.directions
    origin="Covent Garden"
    destination="Clerkenwell"
    travelMode="WALKING" as |d|}}

    {{!-- Display the route returned by the directions query --}}
    {{#d.route
      draggable=true
      polylineOptions=(hash
        strokeColor="green"
        strokeWeight=8
        strokeOpacity=0.7) as |r|}}

      {{!-- Add a waypoint to make sure we grab our coffee --}}
      {{d.waypoint location="Leather Lane Department of Coffee and Social Affairs"}}

      {{!-- Use a custom helper to process the directions --}}
      {{#each (get-route-steps r.directions) as |s|}}
        {{!-- Display a marker for each step of the route --}}
        {{#g.marker
          position=s.start_location
          onClick=(action (toggle "showInstructions" s)) as |m|}}
          {{!-- Add an infoWindow with directions for good measure --}}
          {{m.infoWindow
            content=s.instructions
            isOpen=s.showInstructions}}
        {{/g.marker}}
      {{/each}}
    {{/d.route}}
  {{/g.directions}}
{{/g-map}}

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);

It's finally time to learn how to create custom HTML markers!

Custom overlays ›