Contextual components

In block form, the g-map component yields all sorts of map components. These contextual components automatically register with the parent and bind themselves to the map. Even better, they wait to render until the map is ready!

The addon currently provides the following components:

• canvas
• marker
• circle
• rectangle
• polyline
• polygon
• infoWindow
• control
• overlay
• autocomplete
• directions
• route
• waypoint
• trafficLayer
• transitLayer
• bicyclingLayer

Setting options on components

Almost every attribute passed to the component will be passed on directly as an option to the underlying Google Maps component. These docs don’t cover every available option for every component – that’s not the point of this addon. It’s up to you to find out the available options provided by Google Maps. I will leave helpful links to Google Maps guides and references like this where possible: Reference.

Accessing component instances

Since the Ember components are just light wrappers for the actual Google map classes, you may need access to the instances of the map components. Each map component automatically registers with the parent map component – g-map. The parent map then provides a publicAPI. This object contains the the map component instances that are accessible by the plural of the component name. Using the onceOnIdle action, you can get access to this object once the map loads.

const publicAPI = {
  components: {
    markers: [],
    circles: [],
    polylines: [],
    infoWindows: [],
    // ...
  },
};

<GMap
  @lat={{this.london.lat}}
  @lng={{this.london.lng}}
  @onceOnIdle={{this.onLoad}} />

import Controller from '@ember/controller';
import { action } from '@ember/object';

export default class extends Controller {
  @action
  onLoad({ map, components }) {
    // Do something with the map
  }
}