Directions

Directions, Route, and Waypoint live in a separate package, ember-google-maps-directions, so apps that don't need routing don't pay for it.

ember install ember-google-maps-directions

Fetching directions

The Directions component fetches directions between locations. It's a convenience wrapper for Google's DirectionsService: render it, and it looks up the real DirectionsService for you and makes the request. It yields the result as directions.

You need to provide at least the three DirectionsRequest options: origin, destination, and travelMode.

<GMap @lat={{51.5074}} @lng={{-0.1278}} @zoom={{12}}>
  <Directions
    @origin="Covent Garden"
    @destination="Clerkenwell"
    @travelMode="WALKING"
    as |dir|
  >
    <!-- dir.directions is the DirectionsResult once it resolves -->
  </Directions>
</GMap>

For convenience, pass an @onDirectionsChanged handler and it's called whenever the directions update. This is a custom event the addon fires itself, similar to the native event on the DirectionsRenderer.

Adding waypoints

Directions also yields a registerWaypoint function. Pass it to a Waypoint component's @register argument, along with a @location and an optional @stopover, and the waypoint adds itself to the request:

<Directions @origin="Covent Garden" @destination="Clerkenwell" @travelMode="WALKING" as |dir|>
  <Waypoint @register={{dir.registerWaypoint}} @location="Leather Lane" />
</Directions>

Displaying routes

You might notice that Directions doesn't actually draw the route on the map. That's deliberate — the results from DirectionsService are complex, and you may not want to render the first route it comes back with by default.

To actually draw a route, render a Route component and pass it the directions result. Under the hood it uses a DirectionsRenderer:

<Directions @origin="Covent Garden" @destination="Clerkenwell" @travelMode="WALKING" as |dir|>
  <Route @directions={{dir.directions}} />
</Directions>

Complex routing

Let's recreate one of Google's own complex directions examples: walk from Covent Garden to Clerkenwell, fetch the route, and drop a marker on the map for every step along the way. Each marker gets an info window attached, showing that step's instructions. And since we're passing through the area anyway, let's add a waypoint at Leather Lane for a coffee stop.

<Directions
  @origin="Covent Garden"
  @destination="Clerkenwell"
  @travelMode="WALKING"
  @onDirectionsChanged={{this.onDirectionsChanged}}
  as |dir|
>
  <Waypoint @register={{dir.registerWaypoint}} @location="Leather Lane" />

  <Route
    @directions={{dir.directions}}
    @polylineOptions={{hash strokeColor="green" strokeWeight=8 strokeOpacity=0.7}}
  />

  {{#each this.routeSteps as |step|}}
    <Marker @position={{step.start_location}} @onClick={{this.toggleStep step}} />
  {{/each}}
</Directions>

If you're doing complex routing like this, manipulating the directions object straight from a template gets painful fast. It's worth writing a small helper. Here's one that pulls the steps out of the first leg of the first route:

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

Example

WARNING

The live demo below needs a Google Maps API key authorized for the Directions API. The shared key this docs site runs on isn't, so DirectionsService comes back with REQUEST_DENIED and no route draws — same category of limitation as the RefererNotAllowedMapError you'll see noted on other live-map pages, not a bug in the addon. Everything up to that point — the component mounting, the task firing, the real request going out to Google and the rejection coming back — works. Point this page at a key with Directions enabled and the route, waypoint, and step markers below all render.

Click a marker to see that step's instructions, once a route is available.