InfoWindow

Description

This component represent a google map InfoWindow. It can have two different behavior. Either it is a child of a marker or not.

• As a child of marker : This info window is bound to the marker. The position will be always the same (you should not specify the position property for such info windows). And if the user click on the marker the opened attribute will be toggled
• As a child of any other component: This info window is free. You must set the position and opened properties

The content of the Info window

You can set the content of the Info window in two different ways :

• By using the content property. The content of the Info Window will be updated in real time
• By adding html content as a child of the Info window component. The content will also be updated in real time (except for IE, it is refreshed with a frequency of 2Hz)

You can see the examples below if you don't get it

Properties

• opened (2w) : Boolean: This is the only non Google property. It represent the state of the Info window : opened or not.
• position (1w)
• zIndex (2w)
• content (2w) : This one is not required if you use nested HTML inside the Info Window component

Examples

Using content and bound to a marker

<marker :position:"{lat: 0, lng: 0}">
  <info-window content="Hello you can use {{moustache}} expressions here ! "></info-window>
</marker>

Using child elements and not bound to a marker

<info-window :position="{lat:0, lng:0}">
  I can use <b>HTML</b> here and {{moustache}} expressions too !<br>
  I am not bound to any markers. I'm freeee.
</info-window>