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:

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 onLoad action, you can get access to this object once the map loads.

const publicAPI = {
  markers: [],
  circles: [],
  polylines: [],
  infoWindows: [],
  // ...
}
{{g-map
  lat=london.lat
  lng=london.lng
  onLoad=(action "onLoad")}}
import Controller from '@ember/controller';

export default Controller.extend({
  actions: {
    onLoad({ map, publicAPI }) {
      // Do something. Save a copy of the map instance and publicAPI.
    }
  }
});

Some components may take some time to initialise and render on the map. You can provide an onComponentsLoad action to the map that will be called once all the components have been registered with the map.

Learn more about what you can do with these components in the next section.

Canvas ›