Traffic, transit, and bicycling layers

ember-google-maps ships three layer components that overlay live Google data on top of the map: TrafficLayer, TransitLayer, and BicyclingLayer. Each one takes whatever options the underlying google.maps.*Layer class accepts, and renders nothing itself — just drop it inside GMap.

hbs

<GMap @lat={{51.5074}} @lng={{-0.1278}} @zoom={{12}}>
  <TrafficLayer />
</GMap>

Only one of these makes sense on screen at a time, so switching between them usually means conditionally rendering one or the other based on some state you track yourself:

hbs

<GMap @lat={{51.5074}} @lng={{-0.1278}} @zoom={{12}}>
  {{#if this.isTraffic}}
    <TrafficLayer />
  {{else if this.isTransit}}
    <TransitLayer />
  {{else if this.isBicycling}}
    <BicyclingLayer />
  {{/if}}
</GMap>

Example

Switch between layers with the buttons below.

TIP

The run() call below is only there because this live example runs in a sandbox with no Ember event dispatcher, so a plain on "click" handler doesn't get wrapped in a runloop for free. In a real Ember app you'd just write this.layer = newLayer — no run() needed.

Traffic, transit, and bicycling layers ​

Example ​

Traffic, transit, and bicycling layers

Example