Handling events 💥

Parameters prefixed by on are reserved in this addon. The parameter name is stripped of the prefix, decamelized and the provided action is bound to the event name. The event names used by Google are different from the ones you may be used to in ember, so make sure to consult Google’s API docs for each component.

As an example, to register an action for the bounds_changed event, you would pass an action to the onBoundsChanged attribute. For dragend, you would use onDragend.

<GMap
  @lat="51.508530"
  @lng="-0.076132"
  @zoom={{10}}
  @onClick={{this.onClick}}
  @onDragend={{this.onDragend}}
  @onZoomChanged={{this.onZoomChanged}}
  @onBoundsChanged={{this.onBoundsChanged}} />

Warning Some Google event names break the expected naming style. Notice how dragend is a single word and not two words separated by an underscore. This directly translates to the camelized name, so you would not capitalize the e in onDragend.

Every single map component provided by this addon follows this convention. It allows the addon to remain lightweight and decoupled from the API. If an event or option name changes, this addon does not have to be updated – only your own code does.

Each action will receive any optional arguments you pass in the template and an event object. The event object serves two purposes. Firstly, it provides you with an abundance of information about the triggered event. Secondly, and more importantly, it provides access to a host of functions that allow you to immediately react to the event.

event The window.event object.
googleEvent Google Maps provides its own event system. This object might contain extra, map-specific details.
eventName The name of the triggered event.
target The source element or component that triggered the event. This could be the map itself, a marker, or an HTML element.
publicAPI A set of public objects and methods exposed by the map component that registered the event. This object should also provide the map component instance.
map The parent map instance. See Map.

Test The sample map has some event listeners set up – see if you can find them all!

Event propagation

You may run into situations where you need to disable the propagation of an event up the DOM tree.

A common scenario is handling click events on markers and overlays. If you bind a click handler to the marker to display a tooltip and then bind a second click handler on the map to close all open tooltips, your tooltips will never open. A click on the marker will trigger the tooltip, but the same click event will then bubble up the DOM tree to the map and trigger the map click handler, closing all open tooltips.

There are two ways to avoid this issue: refactor your code to eliminate the unintended effects of bubbling or disable bubbling.

You can disable bubbling by calling stopPropagation on the event object you receive as an argument.

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

export default class extends Controller {
  @action
  actionBoundToMarker({ event }) {
    // Stop event propagation
    event.stopPropagation();

    // Do something
  }
}

If you eventually get tired of writing this, you can create a template helper similar to the one suggested in the ember docs for the action helper.

Components ›