Creating info windows

These are your basic, run-of-the-mill white tooltips. While the custom overlay is way more customizable, these tooltips can be quite useful since they “just work”™.

The infoWindow component accepts three new arguments: isOpen, content, and target. For all the other options, read InfoWindowOptions.

The isOpen attribute can be used to control the opening and closing of the tooltip using true or false. It automatically reverts back to false when the user closes the info window.

content lets you provide a string with text or even HTML that will be rendered in the tooltip. However, if you really want to render HTML content, I would recommend using the block form of the component. Anything defined within the block, will be rendered inside the info window.

The target attribute is used to attach the info window to a map component, like a marker. The infoWindow component yielded by the map is already attached to the map. You can override the position by overriding the target or setting the lat and lng coordinates manually.

Map components, like markers and circles, also yield their own infoWindow. These ones are already attached to the parent marker component, so the only thing left to do is set the isOpen attribute.

<GMap
  @lat="51.507568"
  @lng="-0.127762"
  @zoom={{12}}
  @styles={{this.myMapStyle}} as |map|>

  {{!-- A manually positioned info window with basic text --}}
  <map.infoWindow
    @lat={{this.london.lat}}
    @lng={{this.london.lng}}
    @isOpen={{this.mapTooltipOpen}}
    @content="Simple text tooltip" />

  {{!--
    An info window attached to a marker component.
    Notice how it is yielded by the marker itself.
    This info window displays the template defined in the block --}}
  <map.marker
    @lat={{this.london.lat}}
    @lng={{this.london.lng}}
    @onClick={{toggle this.markerTooltipOpen this}} as |marker|>

    <marker.infoWindow
      @isOpen={{this.markerTooltipOpen}}>

      <div class="text-center">
        <img src="/images/doge.jpg" alt="Such doge!" width="200">
        <div>
          Custom <i>HTML</i> content in infoWindow!
        </div>
      </div>

    </marker.infoWindow>
  </map.marker>
</GMap>