Info windows

Creating info windows

These are your basic, run-of-the-mill white tooltips. They're not as customizable as a fully custom overlay, but they can be quite useful since they "just work."

The InfoWindow component accepts three arguments worth knowing about: isOpen, content, and target. For everything else, check Google's own InfoWindowOptions docs.

isOpen controls whether the tooltip is open, true or false. It reverts back to false on its own when the user closes the window, so keep your own state in sync with an @onCloseclick handler.

content takes a string — plain text or HTML — to render inside the tooltip. If you want to render real HTML (or a component), use the block form instead: anything you put in the block renders inside the info window.

target attaches the info window to another map component, such as a marker. Skip it and the info window attaches to the map itself, positioned by lat/lng (or you can set those directly to reposition it).

<GMap @lat={{51.5074}} @lng={{-0.1278}} @zoom={{12}}>
  <InfoWindow
    @lat={{51.5074}}
    @lng={{-0.1278}}
    @isOpen={{this.mapTooltipOpen}}
    @onCloseclick={{this.closeMapTooltip}}
    @content="<i>Simple text tooltip</i>"
  />

  <Marker
    @lat={{51.5074}}
    @lng={{-0.1278}}
    @onClick={{this.markerClicked}}
    as |m|
  >
    <InfoWindow
      @target={{m.mapComponent}}
      @isOpen={{this.markerTooltipOpen}}
      @onCloseclick={{this.closeMarkerTooltip}}
    >
      <div>Custom <i>HTML</i> content in an info window!</div>
    </InfoWindow>
  </Marker>
</GMap>

Example

Click the marker to toggle its tooltip, or use the checkboxes below. The map also has its own info window, attached directly to the map rather than to the marker.

TIP

The run() calls below are only there because this live example runs in a sandbox with no Ember event dispatcher, so a plain on "click" handler on a checkbox doesn't get wrapped in a runloop for free. In a real Ember app you'd just write this.markerTooltipOpen = !this.markerTooltipOpen — no run() needed. The @onClick/@onCloseclick handlers below are Google Maps events routed through the addon's own event system, so they don't need it either — only the plain DOM checkboxes do.